Next.js を Firebase App Hosting デプロイするときの環境変数の設定
Shohei大まかな流れ
- Next.js の環境変数 (.env) を設定
- Firebase App Hosting を設定しデプロイ
- Google Cloud の Secret Manager でシークレットを作成
- AppHosting がシークレットにアクセスできるよう設定
- Next.js に firebase.json, apphosting.yaml を作成
- ロールアウトを作成 (再度デプロイ) し、環境変数が反映されたことを確認
Shohei1. Next.js の環境変数 (.env) を設定
Next.js 初心者なので知らなかったが、クライアント側で参照する環境変数の場合は NEXT_PUBLIC_ という prefix を付けるお作法があると。
今回はサーバーサイドで使うので prefix なしで良さそう。
API_KEY="abc123"
2. Firebase App Hosting を設定しデプロイ
この説明は公式ドキュメントに譲る
ここでデプロイすると失敗するはず。一旦これでよし。
Shohei3. Google Cloud の Secret Manager でシークレットを作成
ビルドの ID をクリックすると Google Cloud のコンソールに飛べる。
Firebase AppHosting は要するに Google Cloud の Cloud Build を使った仕組みらしい。
Firebase のプロジェクトと同じプロジェクトが選択されているかを今一度確認する。
Secret と検索する。
Secret Manager を選択してジャンプ。
シークレットを作成 をクリック
名前に環境変数の key 名を、シークレットの値の欄に環境変数の value を入力して作成
シークレットの詳細に入って、バージョンのリソースをコピーする
コピーしたテキストはこんな感じ
projects/000000000000/secrets/API_KEY/versions/1
Shohei4. App Hosting がシークレットにアクセスできるよう設定
Firebase App Hosting が、いま作成したシークレットにアクセスできるよう権限を与える必要がある。
iam で検索して、 IAM と管理 を選択
IAM の権限編集
Firebase App Hosting の権限を編集する。
ロールを追加する。ここでは Secret Manager で作成したシークレットへのアクセスを許可するロールを選択して保存。
シークレットの準備が完了。
Shohei5. Next.js に firebase.json, apphosting.yaml を作成
Next.js のプロジェクトのルートディレクトリに firebase.json と apposting.yaml を作成する。
firebase.json はとりあえずかなりライトな仕様にした。
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
apphosting.yaml には環境変数の key 名を variable にして、value として Secret Manager で作成してコピーしたシークレットのリソース名をコピーする。
env:
- variable: API_KEY
secret: projects/000000000000/secrets/API_KEY/versions/1
キー名でいけるらしいけど、これをやっているときは調べが足りず version 名でしかうまく反映されなかった
Shohei