【Vue CLI】VueアプリでFirebase APIキーを環境変数として扱う方法

投稿日: by keruu

Vueアプリケーションにおいて、Firebase APIキーを環境変数として扱い、バージョン管理しない方法の紹介です。なお、Firebase APIキーはアプリケーションに組み込まれるので、ユーザーからは変わらず参照できます。

環境

  • Vue.js 3.0.6
  • Vue CLI 4.5.11
  • Firebase, Firestore, Authentication

APIキーを環境変数として記述する

環境変数を記述するための .env.local をプロジェクトのルートディレクトリに作成し、そこにAPIキーの値を置きます。環境変数の変数名には接頭辞として “VUE_APP_” を付ける必要があります。

下のように記述できます。

# Firebase configuration
VUE_APP_FIREBASE_APIKEY=“xxx”
VUE_APP_FIREBASE_AUTH_DOMAIN="xxx"
VUE_APP_FIREBASE_PROJECT_ID="xxx"
VUE_APP_FIREBASE_STORAGE_BUCKET="xxx"
VUE_APP_FIREBASE_MESSAGING_SENDER_ID="xxx”
VUE_APP_FIREBASE_APP_ID="xxx"

環境変数として記述したAPIキーを使用する

 .env.local 内の環境変数は npm run serve または npm run build を実行したときにVue CLIにより読み込まれます。コード内からは process.env.変数名 として参照できます。

下のように記述できます。

const firebaseConfig = {
  apiKey: process.env.VUE_APP_FIREBASE_APIKEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  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,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
}

firebase.initializeApp(firebaseConfig)

環境変数が読み込まれずに undefined が返るときは、一旦ローカルサーバーを停止して、npm run serve を再実行します。環境変数名が変わると自動で読み込まれないことがあるようです。

バージョン管理から .env.local を外す

.gitignore に .env.local を追加します。

Vue CLI で立ち上げたプロジェクトにはデフォルトで追加されているので作業は不要ですが、手動で追加する場合は下のように記述します。

.env.local

参考資料

Vue CLI公式: 環境変数について(https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)

Firebase Vue CLI Vue.js