今更ながらFirebaseの開発環境を用意して、実行環境によってアプリケーションとの接続を切り替えるようにしたので、メモ代わりに書きました。
開発環境のFirebaseを構築し、アプリケーション側を設定してきます。今回の目的として、ローカルでは開発環境のFirebaseに接続するようにし、本番では本番環境のFirebaseに接続するようにします。
実行環境によってFirebaseとの接続を切り替えるアプリケーション側の設定
CSR・SSRどちらでも利用したいものはpublicで、サーバーサイドのみ利用するものはprivateで環境変数をセットします。今回はSSGで、CSRでも利用するためにpublicで設定しています。
ここでは本番環境の値を定義しています。
・nuxt.config.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ... runtimeConfig: { public: { fbApiKey: 'xxxxxxxxxxxx', fbAuthDomain: 'xxxxxxxxxxxx', fbProjectId: 'xxxxxxxxxxxx', fbStorageBucket: 'xxxxxxxxxxxx', fbMessagingSenderId: 'xxxxxxxxxxxx', fbAppId: 'xxxxxxxxxxxx', fbMesurementId: 'xxxxxxxxxxxx' } }, ... |
ローカル用の環境変数を用意して、そこに開発環境用のFirebase接続情報を定義しています。
NUXT_という接頭辞をつけると、ランタイム構成の環境変数を上書きできます。今回はpublic配下の環境変数を上書きするのNUXT_PUBLIC_の接頭辞をつけています。
・.env.local
1 2 3 4 5 6 | NUXT_PUBLIC_FB_API_KEY=xxxxxxxxxxxx NUXT_PUBLIC_FB_AUTH_DOMAIN=xxxxxxxxxxxx NUXT_PUBLIC_FB_PROJECT_ID=xxxxxxxxxxxx NUXT_PUBLIC_FB_STORAGE_BUCKET=xxxxxxxxxxxx NUXT_PUBLIC_FB_MESSAGING_SENDER_ID=xxxxxxxxxxxx NUXT_PUBLIC_FB_APP_ID=xxxxxxxxxxxx |
最後にpackage.jsonの実行コマンドに–dotenvで.env.localを読み込むようにして完了です。こうすることで、.env.localの値が上書きされて、ローカル起動時にFirebaseの開発環境に接続して開発することができます。
・package.json
1 2 3 4 5 6 7 | ... "scripts": { "dev": "nuxi dev --dotenv .env.local" }, ... |
参考：
