3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Firebase App HostingでNextJSのホスティングができるようになったけど、ハマった

Last updated at Posted at 2024-07-18

Firebase で NextJSのホスティングができる機能となる App Hosting が使えるようになっていたので、触ってみた。

いくつか詰まった箇所があったので記事に残しておく

1. NextJSのバージョン

App HostingではNextJSのバージョンは13.0.0以上である必要があった。
公式ドキュメントでは見つけられなかったが、ビルドを実行したところ、以下のエラーが発生していた。

WARNING: Unsupported version of next: 12.2.5
WARNING: Update the next dependencies to >=13.0.0

いじっていたNextJSが古すぎたので、最新のNextJSに更新することでビルドできるようになった。

2. 環境変数の定義(Cloud Buildが実行されるサービスアカウントの問題)

App Hostingではビルドは、GCPのCloud Build機能を使ってビルドされる。
そのため環境変数は apphosting.yaml を使う必要がある。
ここまではApp Hostingのページにも記載がありドキュメントも存在していた。
image.png

ドキュメントに沿い、環境変数の定義を行い、GCPのシークレットマネージャーに環境変数と紐づける情報を設定し、ビルドを実行したところ、ビルドに失敗するようになった。

設定していた環境変数

# apphosting.yaml
# Environment variables and secrets
env:
  - variable: FIREBASE_PROJECT_ID
    secret: APP_FIREBASE_PROJECT_ID
    availability:
      - BUILD
      - RUNTIME

  - variable: FIREBASE_PRIVATE_KEY
    secret: APP_FIREBASE_PRIVATE_KEY
    availability:
      - BUILD
      - RUNTIME

  - variable: FIREBASE_CLIENT_EMAIL
    secret: APP_FIREBASE_CLIENT_EMAIL
    availability:
      - BUILD
      - RUNTIME

エラーの内容

Step #1: 2024/07/17 23:46:36 pinning secrets in apphosting.yaml: 
calling GetSecretVersion with name=projects/~~~~/secrets/APP_FIREBASE_PROJECT_ID/versions/latest: 
getting secret version: rpc error: code = PermissionDenied desc = Permission 'secretmanager.versions.get' denied for resource
'projects/~~~~/secrets/APP_FIREBASE_PROJECT_ID/versions/latest' (or it may not exist).

ざっくり纏めるとSecretManagerに定義した値へアクセス権がないというものであった。

Cloud Buildで実行されているため、Cloud BuildのサービスアカウントをCloud Buildの設定画面で確認し、IAM機能で、対象のサービスアカウントへ「Secret Managerのシークレットアクセサー権限」を設定しビルドするが同じエラーとなってしまった。
スクリーンショット 2024-07-18 14.31.12.png

結論

  • サービスアカウントへ設定する権限は、 secretmanager.versions.get を使う場合は、Secret Manager Viewerのロールが必要であった
  • App Hostingでビルドする場合は、Cloud Buildのサービスアカウントではなく、 firebase-app-hosting-compute のサービスアカウント使用されていた

とくに2番目のCloud Buildのサービスアカウントではないという箇所にハマった。

どのサービスアカウントでCloud Buildが実行されているかは、ビルドの詳細画面へアクセスし、
ビルドの概要→実行の詳細にて確認することができる

ここに行き着くまでにかなりの時間を要したので、誰かの参考になると幸いだ。
スクリーンショット 2024-07-18 14.31.12.png

所管

us-centralのリージョンしかまだないが、これは正式リリースされればリージョンは増えるだろう。
最初のシークレットマーネージャーの部分には詰まったが、一度やってしまえば慣れてしまえばリリースは簡単。
SSRやSSGは試さなかったが、APIの機能はきちんと動いていることも確認できた。

vercelと比較して機能は少ないが、複数人で開発してサーバーレスでNextJSをホスティングしたいがコストは抑えたいというケースや、すでにFirebaseを使っているユーザーにとっては良い選択肢となりそうである。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?