Vue.jsで環境変数を超簡単に切り替える

環境変数

本番環境、検証環境、開発環境の複数環境を作成したときにAPIの向き先を変えたりする必要がある。その都度ベタがきのコードを改修してfirebase,AWSにデプロイするなんていうのは嫌ですよね？
また、中にはビルド時に秘密にしたい秘密情報が必要な場合があります。そういったものをデプロイ・ローカルホストの起動時だけ利用できるように設定する簡単な方法がVue.jsには用意されています。

環境変数の切り替え

環境変数の切り替えをローカル上での起動とビルド時にできるようにするための７ステップを紹介します。

###1 .env.*** に変数を追加する

VUE_APP_***をプレフィックスにして変数名を定義

例 : http://hogehoge を develop に登録する場合

　.env.develop

VUE_APP_API_DOMAIN = http://hogehoge

###2 .env.*** に登録した環境変数を利用する

process.env.*** で利用したいところから呼び出す

記入例

const apiUrl = process.env.VUE_APP_API_DOMAIN

###3 ローカルホスト起動時に指定した環境変数を利用できるようにする

pachage.json に下記のように登録する
mode の右側の *** がついた.env.***の環境変数を利用するようになる。

serve-**": "vue-cli-service serve --mode ***"

記入例

"scripts": {
    "serve": "vue-cli-service serve",
    "serve-dev": "vue-cli-service serve --mode development",
    "serve-stg": "vue-cli-service serve --mode staging",
    "serve-prod": "vue-cli-service serve --mode production",
  },

###4 ローカルホスト起動時に境変数を切り替える

下記のコマンドのように package.json で利用したい環境変数を指定してコマンドを入力する。

% yarn serve-**

記入例: .env.develop に定義した環境変数を利用する

 yarn serve-dev

###5 ビルド時に環境変数を切り分ける

ローカルホスト同様、pachage.json に下記のように登録する
mode の右側の *** がついた.env.***の環境変数を利用するようになる。

build-**": "vue-cli-service build --mode ***"

記入例

  "scripts": {
    "serve-dev": "vue-cli-service serve --mode development",
    "serve-stg": "vue-cli-service serve --mode staging",
    "serve-prod": "vue-cli-service serve --mode production",
    "build-dev": "vue-cli-service build --mode development",
    "build-stg": "vue-cli-service build --mode staging",
    "build-prod": "vue-cli-service build --mode production",

###6 ビルド時に指定した環境変数を利用する

下記のコマンドのように package.json で利用したい環境変数を指定してコマンドを入力する。

% yarn build-**

記入例: .env.develop に定義した環境変数を利用する

％ yarn build-dev

7 .gitignoreに追加する

.gitignore に　github で保存したくないファイル名を追記することで秘密にしたい環境変数をgithubで公開しないで運用することができます。WEBで公開しているサービスのソースコードをポートフォリオとしてpublicにしたい人はこの方法が必要になります。

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

またファイルキャッシュされてしまっている場合があるのでgitignoreにファイル名を追加したにもかかわらず、gitのstagingに.envのファイル名が記載されている方は下記のコマンドでファイルのキャッシュを削除しましょう。

% git rm -r --cached . //ファイル全体キャッシュ削除

最後に

MENTAでVue/Nuxtについて教えているので興味ある方はご気軽にメッセージください！
https://menta.work/user/13200

参考