月: 2023年12月

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

実行環境によってFirebase環境の接続を切り替える