Nuxt + Firebase + heroku で環境変数がセットできず、firebaseでinvalid-api-keyが発生する

はじめに

表題の環境で、Firebase Authenticationを使おうと設定したら、ローカルでは動くもののherokuへのデプロイ後のproduction環境では動作しなかった。

デバッグしていくと、ログインダイアログを表示させる際に

{code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."}

というエラーが表示されていた。

クリックした瞬間、通信も発生せずに出ているようなのでAPI Keyがそもそもセットできていない疑いがあった。

dotenvを使い環境変数をセットしていた。

原因

plugins/firebase.jsというファイルを作り、process.env.API_KEY を読んでKEYをセットしていたが、これではビルド後には正しくデータを読まないらしい。

(参考) API: env プロパティ - Nuxt.js https://ja.nuxtjs.org/api/configuration-env/

対策

nuxt.config.jsにenvプロパティとして、以下のようにセットした。

env: {
    FIREBASE_APIKEY: process.env.FIREBASE_APIKEY,
    FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
    FIREBASE_DB_URL: process.env.FIREBASE_DB_URL,
    FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
    FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID
  }

環境変数を使う部分は変更なし。 process.env.***でそのまま呼び出せる。

補足

ローカル環境で、npm build しても問題なく動いた。SSR特有の問題なのかもしれない。よくわからない。