なぜまとめようと思ったのか?
3.x版にアップデートしたあと、E2E(Nightwatch)を走らせると、開発途中のSNSが本番のAPIサーバと接続してしまい本番環境のDBに書き込みが反映されるといった自体が起きました。
そこで折角なので、3.xになったことによる環境設定周辺をここに簡単ではありますが、できるだけ丁寧にまとめておきたいと思います。
環境設定ファイルとモード
Vue CLIが2.xのときはconfigディレクトリ以下にそれぞれ
- dev.env.js
- prod.env.js
- test.env.js
が用意されていました。
3.xからは手動で各自必要な環境設定ファイルを用意します。また場所もconfig以下ではなく各プロジェクトのルートに作成します。そのため
vue create <アプリ名> で作成したら cd <アプリ名> で移動し各自必要だと思われる環境設定ファイルを touch コマンド等で作りましょう。
次に作成することのできるファイルを一覧で下に用意しました。
| ファイル名 | モード名 | ローカルで完結するか |
|---|---|---|
| .env | 全てのケースで読み込まれる | × |
| .env.local | 全てのケースで読み込まれる | ○ |
| .env.development | 開発環境のみ | × |
| .env.development.local | 開発環境のみ | ○ |
| .env.production | 本番環境とE2E環境で読み込まれる | × |
| .env.production.local | 本番環境とE2E環境で読み込まれる | ○ |
| .env.test | ユニットテスト環境で読み込まれる | × |
| .env.test.local | ユニットテスト環境で読み込まれる | ○ |
全てを列挙すると上のようになる。
まず .env だがこれは開発, テスト, 本番環境全てで使う環境設定がある場合に利用する。また .env は優先順位的には下位になるので .env.development などモードが指定されている方が優先順位は強い。
.local は各自のローカル環境でだけ使いたい環境変数が合った場合のみ利用することになる。そのため全ての開発者が共通して使うものを .env.development に設定しそのあとAさんだけが対応するセキュリティ部分があるとした場合 .env.development.local に設定するといった使用法が考えられる。また .local はプロジェクト立ち上げ時に自動的に .gitignore に記述されているためGitHubにあがることはない。
そしてここで気をつけるべきなのがテスト環境の扱いです。E2Eはテスト環境ではなく本番環境として扱われます。2.xの時点と異なっているため扱う処理は気をつけてください。
狙った環境で動作をするには
{
"script": {
"test:e2e": "vue-cli-service test:e2e ----mode development"
}
}
のように狙ってモード指定する必要がある。
補足 : 環境設定ファイルの書き方
VUE_APP_HOST=localhost
上のように VUE_APP をプレフィックス(変数の頭につける)にしてください。こうしないと読み込まれません。
読み込み時では
process.env.VUE_APP_HOST
とすることで読み込めるようになる。 process.env を忘れないようにすること。