webpackを利用したvuejsでherokuの環境変数を利用する

herokuの環境変数からvuejsへ変数をバイパスする

• herokuに設定した環境変数は、そのままではwebpackを利用したvuejsでは利用できません。
• vuejsの環境変数とherokuの環境変数を繋げるため、vueの環境変数ファイルで、環境変数をバイパスしてあげる必要があります。
• herokuは NODE_ENV=production で動作する前提なので、prod.env.jsに書いています。

prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  REST_API_URL: JSON.stringify(process.env.REST_API_URL)
}

• 上記のように prod.env.js上で REST_API_URL へ process.env.REST_API_URL をバイパスします。
• そしてこれを利用したいところで、普段と同じように process.env で利用します。

some_useful_service.js

const restApiUrl = process.env.REST_API_URL

ローカル環境で変数を設定する

• ローカルで環境変数を入れてあげたい場合は、heroku localコマンドを通して実行する方法も使えます。
• heroku localコマンドを通すと .envファイルが読み込まれます。
• .envファイルに KEY=VALUEの形式で環境変数を書いておきます。
• .envは.gitignoreに追加しておき、gitには上げない運用の方がやりやすいと思います。
• https://devcenter.heroku.com/articles/heroku-local

.env

REST_API_URL=https://restful-sample.com

• Procfileに以下の開発用のコマンドを追加してあげます。
• コマンドの名前はご自由にどうぞ。

Procfile

web-dev: npm run dev

• ローカルでは上記のweb-devを使って、サービスを起動できます。
• 起動時に .env が自動的に読み込まれます。
• ポートを変更したい場合は -p オプションで指定してください。

heroku local web-dev -p 8080

• ローカルマシンの環境変数に設定して、npm run devで実行しても環境変数は読み込まれます。

~/.bash_profile

export REST_API_URL=https://restful-sample.com

source ~/.bash_profile
npm run dev