今更ながらFirebaseの開発環境を用意して、実行環境によってアプリケーションとの接続を切り替えるようにしたので、メモ代わりに書きました。
開発環境のFirebaseを構築し、アプリケーション側を設定してきます。今回の目的として、ローカルでは開発環境のFirebaseに接続するようにし、本番では本番環境のFirebaseに接続するようにします。
実行環境によってFirebaseとの接続を切り替えるアプリケーション側の設定
CSR・SSRどちらでも利用したいものはpublicで、サーバーサイドのみ利用するものはprivateで環境変数をセットします。今回はSSGで、CSRでも利用するためにpublicで設定しています。
ここでは本番環境の値を定義しています。
・nuxt.config.ts
ローカル用の環境変数を用意して、そこに開発環境用のFirebase接続情報を定義しています。
NUXT_という接頭辞をつけると、ランタイム構成の環境変数を上書きできます。今回はpublic配下の環境変数を上書きするのNUXT_PUBLIC_の接頭辞をつけています。
・.env.local
最後にpackage.jsonの実行コマンドに–dotenvで.env.localを読み込むようにして完了です。こうすることで、.env.localの値が上書きされて、ローカル起動時にFirebaseの開発環境に接続して開発することができます。
・package.json
参考：
