Firebase + Vuejsのアプリを複数環境に対応させる

要約

• Firebaseプロジェクトごとに環境変数を用意して複数環境に対応させる
• 環境変数は、.env.xx.localファイルを用意

本文

Firebaseを使ったVueアプリを開発していると、
開発、ステージング、本番などの複数環境のFirebaseプロジェクトにデプロイする必要が出てきます。

ソースコードにベタで環境に関する記述をしてしまっても動くには動きますが、問題があります。

• いつか手作業を失敗して、思わぬ事故を起こしてしまう可能性がある
• Githubなどでソースコードを管理していると、APIキーなどを公開するのはセキュリティ上危険
  （ちなみに本当にやってしまうと、GitGuardianさんからアラートのメールが飛んできます）

そこで、Vue CLIが用意している環境変数の切替を利用しましょう。
以下の名称のファイルを用意します。

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Vue CLIでアプリを初期化した場合、.gitignoreファイルが自動で作られ.env.localと.env.*.localが記載されているので、gitにpushしたくない場合は.localをファイル名の最後に付けます。

環境変数はkey-value型で指定する、単純な構造です。
ただし、変数名には必ずVUE_APP_というプレフィックスをつけましょう。これが無いと、環境変数として認識されません。

.env.local

FOO=bar
VUE_APP_SECRET=secret

上記の例だと、VUE_APP_SECRETはsecretとして認識されますが、FOOはundefinedとなります。
こうして作った環境変数のファイルの例

.env.dev.local

VUE_APP_FIREBASE_API_KEY=xxxxxxxzzzzzz
VUE_APP_FIREBASE_AUTH_DOMAIN=xxxx.firebaseapp.com
VUE_APP_FIREBASE_DATABASE_URL=https://xxxx.firebaseio.com
VUE_APP_FIREBASE_PROJECT_ID=xxxx
VUE_APP_FIREBASE_STORAGE_BUCKET=xxxx.appspot.com
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=1234567890

これをmain.ts(main.js)に書き入れて完成です。

main.ts

/** firebase settings */
firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
});

おまけ

npm run serveで環境を指定するには以下のようにします

npm run serve -- --mode dev

参考

Modes and Environment Variables
Firebase を JavaScript プロジェクトに追加する