朝霞市在住のWEB系エンジニアかあさんのPHPメインの雑記帳

ITかあさん

最新記事

Nuxt.js 環境ごとにAPIのHOSTを変更する

Nuxt.js 環境ごとにAPIのHOSTを変更する

cross-envのインスト

cross-envをインストして、環境ごとに環境変数をわけられるようにします。
npm install --save cross-env

envファイルを作成する

アプリケーション直下に環境ごとにenvファイルを作成します。

env.development.js
env.production.js
env.staging.js

各環境に合わせて、APIのURIを設定します。下記はローカル開発環境用として、ステージング、本番用にそれぞれAPIのURIを設定しておきあmス

module.exports = {
apiBaseUrl: 'http://localhost:3000'
}

package.json


  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    //追加
    "build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
    //追加
    "build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
    "start": "nuxt start",
    //追加
    "start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
    //追加
    "start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "heroku-postbuild": "npm run build"
  },
...

nuxt.config

envの設定をnuxt.configに追加します

const pkg = require('./package')
//追加
const environment = process.env.NODE_ENV || 'development';
//追加
const envSet = require(`./env.${environment}.js`)
module.exports = {
  //追加
  env: envSet,
  mode: 'universal',

axios

環境変数はprocess.env.変数名
で呼び出すことができます。

var qs = require('qs');
import axios from 'axios'

class ApplyApi {
  constructor() {
    this.apiBase = process.env.apiBaseUrl;
  }
  apply(data) {
    axios.post(`${this.apiBase}/recruit_apply.json`, {
...
    },
     {
      headers: {
        'Content-Type': 'application/json'
      }
    })
  }
}

const applyApi = new ApplyApi();

export default applyApi;

Nuxt.js で動的タイトル設定

Nuxt.js で動的タイトル設定設定したいわー


ちょっと悩んだのでメモがてら。Nuxt.jsで作業中、タイトルをちゃんと設定したいな、となりまして。

nuxt.config.jsにtitleTemplateを使ってグローバルなタイトルの設定ができますが、それにプラス動的に各ページごとに加えたい時は下記のようにしてあげます

‘%s – ITかあさんNuxt.jsがんばるまん’

titleTemplateが不要な時は各ページで空を入れてあげるしかないっぽい。

これで、トップページの時は下記のようになります

トップページ – ITかあさんNuxt.jsがんばるまん

Herokuで無料SSLの設定

お名前.comで取得したドメインをHerokuの無料SSL証明書でSSL化

自分のブログすらSSL化してないのに、何言ってんだって気もしますが、Herokuにホスティングした独自ドメインのサイトをHerokuの無料SSL証明書つかって独自ドメインのサイトをSSL化したいと思います。
SSL無料証明書を使うにはHerokuのdyno(Hobbyプラン以上 月額7$以上)を設定する必要がります。

なお、お名前.comはあくまで私が普段つかってるレジストラであって、DNS設定できるならなんでも良いと思います。

Heroku > 対象のアプリ > Setting Domains and certificatesから設定します

Configure SSLから Automaticallyをえらびます。

 

DNSの設定は前回の設定内容を確認してもらうとして、独自ドメイン+herokudns.comをCNAMEで設定すればOKです。

Automaticallyを選んだ状態で決定すると、DNS設定について記載がありますので、これをそのままDNSのCNAMEで設定すればSSLは終了です

DNS CNAME設定

Herokuで独自ドメインの設定

Herokuにホスティングしているアプリに独自ドメイン設定したい

NuxtでWebサイトを作ったのですが、Herokuが楽でいいな、と思い、Herokuに設置。独自ドメインの設定はCNAMEで設定すればOKのようです。
(Nuxtのデプロイ手順は今度暇な時に書きます)

コマンド

ワンライナーでアプリとドメインの設定を確認できます

ドメインの設定

$ heroku domains:add www.yourdomain.jp -a yourapp-name

もし、指定したドメインが別のアプリで使われていた場合は ドメインの設定を解除する必要があります。

アプリとDNSの設定をワンライナーで確認する

# herokuのアプリ一覧で表示
$ heroku apps > heroku_apps_list; for i in `cat heroku_apps_list`; do heroku domains --app $i ; done

ドメインとアプリの関連付けを削除

$ heroku domains:remove yourdomain.jp -a yourapp-name

その後、もう一度自分の設定したいドメインとアプリで domains:addを実行してあげます。

DNS設定

CNAMEに設定すべきHeroku Domainを確認する

heroku domains -a yourapp-name

=== yourapp-name Heroku Domain
yourapp-name.herokuapp.com

=== yourapp-name Custom Domains
Domain Name DNS Record Type DNS Target
──────────────────── ─────────────── ──────────────────────────────────
www.yourdomain.jp CNAME www.yourdomain.jp.herokudns.com

yourapp-name Heroku Domain欄のドメインをコピーしてCNAMEのvalueに設定します

DNSの設定(私はお名前.comでしたが)は以下のようになります。VALUEにはherokuドメインが来るように設定します。

ホスト名: www.hirotaka.me
TYPE: CNAME
VALUE: yourapp-name.herokuapp.com
優先: (空欄)
状態: 有効

しばらくして指定したドメインでアクセスできるようになれば完了です。うまくいかないと感じたら、hostコマンドを叩いて設定されているか確認します
成功していれば次のように返ってきます
$ host yourdomain.jp
www.yourdomain.jp is an alias for yourapp-name.herokuapp.com.
us-east-1-a.route.herokuapp.com has address 54.236.166.251
us-east-1-a.route.herokuapp.com has address 52.5.226.222
us-east-1-a.route.herokuapp.com has address 52.72.224.148
us-east-1-a.route.herokuapp.com has address 52.6.103.192
us-east-1-a.route.herokuapp.com has address 52.7.153.92
us-east-1-a.route.herokuapp.com has address 52.6.165.91
us-east-1-a.route.herokuapp.com has address 52.71.195.70
us-east-1-a.route.herokuapp.com has address 52.72.5.0

wwwなしのレコード設定がCNAMEでできない

できませんね。。
なので、先頭にアスタリスクを設定してwwwなしでもアクセスできるようにしました。

ホスト名: *.yourdomain.jp
TYPE: CNAME
VALUE: yourapp-name.herokuapp.jp
優先: (空欄)
状態: 有効

DNS Record Type DNS Targetでうまくいかなかった

CNAMEのvalueには
DNS Record Type DNS Targetに表示される

yourdomain.jp.herokudns.com

こちらを表記するらしいのですが、
うまくいかなかったので(というか、このDNSでアクセスすることがそもそもできない)

古いやり方だと思われるheroku domain nameをCNAMEに設定するとうまく表示された。

SSLの問題かなあ。。SSL化しなくちゃいけないから、後でこの問題はまた考えよう