Next.js を Firebase Hosting でデプロイして GitHub Actions も設定する際に必要なこと
はじめに
Vercel や Cloudflare Pages などのサービスを使うことで、Next.js アプリケーションを簡単にデプロイすることができますが、実は Firebase Hosting でも Next.js アプリケーションをデプロイすることができたので試してみました。
Firebase CLI で 様々な設定ができますが、その中で GitHub Actions も設定できます。
firebase init hosting:github
が、これだけではデプロイができませんでした。
追加でいくつか設定をする必要があったので、その際に必要なことをまとめます。
結論
2024/10/12 時点では以下を設定する必要がありました。
- Google Cloud のプロジェクトでの API の有効化
- IAM の設定
-
https://console.cloud.google.com/iam-admin/iam
- GitHub Actions が使うサービスアカウントに
Cloud Functions 管理者とサービス アカウント ユーザーのロールを付与
- GitHub Actions が使うサービスアカウントに
-
https://console.cloud.google.com/iam-admin/iam
各エラーについて
GitHub Actions を実行し、Error の下の方に書いてあることを実行し、次のエラーが出る。ということを複数回繰り返しました。
以下が今回出てきたエラーです。
Permissions denied enabling artifactregistry.googleapis.com.
Permissions denied enabling artifactregistry.googleapis.com.
Please ask a project owner to visit the following URL to enable this service:
https://console.cloud.google.com/apis/library/artifactregistry.googleapis.com?project={__project_id__}
Artifact Registry API を使うそう
Cloud Functions deployment requires the Cloud Build API to be enabled. The current credentials do not have permission to enable APIs for project {__project_id__}.
Error: Cloud Functions deployment requires the Cloud Build API to be enabled. The current credentials do not have permission to enable APIs for project {__project_id__}.
Please ask a project owner to visit the following URL to enable Cloud Build:
https://console.cloud.google.com/apis/library/cloudbuild.googleapis.com?project={__project_id__}
Cloud Build API を使うそう
Permissions denied enabling run.googleapis.com.
Error: Permissions denied enabling run.googleapis.com.
Please ask a project owner to visit the following URL to enable this service:
https://console.cloud.google.com/apis/library/run.googleapis.com?project={__project_id__}
Cloud Run Admin API を使うそう
Permissions denied enabling eventarc.googleapis.com.
Error: Permissions denied enabling eventarc.googleapis.com.
Please ask a project owner to visit the following URL to enable this service:
https://console.cloud.google.com/apis/library/eventarc.googleapis.com?project={__project_id__}
Eventarc API を使うそう
Missing required permission on project {__project_id__} to deploy new HTTPS functions. The permission cloudfunctions.functions.setIamPolicy is required to deploy the following functions:
Error: Missing required permission on project {__project_id__} to deploy new HTTPS functions. The permission cloudfunctions.functions.setIamPolicy is required to deploy the following functions:
- {__function_name__}
To address this error, please ask a project Owner to assign your account the "Cloud Functions Admin" role at the following URL:
https://console.cloud.google.com/iam-admin/iam?project={__project_id__}
GitHub Actions のサービスアカウントに Cloud Functions Admin のロールを付与する必要があるそう。
元々は Cloud Functions Developer がついていたはず。
Caller is missing permission 'iam.serviceaccounts.actAs' on service account
"HTTP Error: 403, Caller is missing permission 'iam.serviceaccounts.actAs' on service account projects/-/serviceAccounts/{__hoge_compute__}.gserviceaccount.com.
Grant the role 'roles/iam.serviceAccountUser' to the caller on the service account projects/-/serviceAccounts/{__hoge_compute__}.gserviceaccount.com.
You can do that by running 'gcloud iam service-accounts add-iam-policy-binding projects/-/serviceAccounts/{__hoge_compute__}.gserviceaccount.com --member MEMBER --role roles/iam.serviceAccountUser'where MEMBER has a prefix like 'user:' or 'serviceAccount:'.
Details and instructions for the Cloud Console can be found at https://cloud.google.com/functions/docs/reference/iam/roles#additional-configuration.
GitHub Actions のサービスアカウントに サービス アカウント ユーザー のロールを付与する必要があるそう。
こちらのサイトを参考にさせていただきました。
おわりに
CLI で簡単に設定ができるのはありがたいのですが、デプロイしようとして初めて気が付く設定が多い（しかも一つずつ潰していくことになる）のは難点ですね。
公式ドキュメントにもそれらしいことは書いていないので、何かミスをしていたのかも...?
同じエラーに遭遇した人の参考になれば幸いです。
Firebase App Hosting について
Firebase App Hosting というものも最近追加されたようです。
が、色々と試しているうちに無料枠で使える枠がなくなり詰んでしまったので、今回は Firebase Hosting の webframeworks 機能を使っています。
（無料で一つ、バックエンドだったか何かを作れるのですが、削除しても枠が戻りませんでした 😭）
Discussion