Cloud BuildでFirebase Hostingのデプロイを行う

Firebase公式GitHub Actionsを使うと、リポジトリへのpushをトリガーにFirebase Hostingへのデプロイができる。

シンプルなサイトであればこれで十分なのだが、今回はリポジトリへのpush以外をトリガーにしてデプロイを行いたかったので、Cloud BuildでFirebase Hostingのデプロイを行うことにした。

Cloud Buildドキュメントに「Firebase へのデプロイ」が用意されているので、この手順に沿ってデプロイ設定を行った。

IAM権限

xxx@cloudbuild.gserviceaccount.com に必要な権限は↓と記載されていたが、 API Keys Admin のロールは見つからなかったので設定しなかった。

必要な IAM 権限

Cloud Build Service Account、Firebase Admin、API Keys Admin のロールを追加します。

Firebase へのデプロイ  |  Cloud Build のドキュメント  |  Google Cloud

もともとCloud Runでも利用しているアカウントだったので、 Firebase 管理者 の権限のみ設定した。

最終的なIAM権限は↓となった。

firebase cli実行コンテナの作成

「firebase コミュニティ ビルダーの使用」の手順に沿って、firebaseコマンド実行コンテナを自分のGCPプロジェクトに追加。

デプロイ対象リポジトリでcloudbuild.yamlを設定

今回はNext.jsで静的ジェネレートしたサイトをFirebase Hostingにデプロイしたかったので、↓のように cloudbuild.yaml を設定した。

# cloudbuild.yaml
steps:
  - name: 'node:14-slim'
    entrypoint: yarn
    args: ['install']
  - name: 'node:14-slim'
    entrypoint: yarn
    args: ['build']
    env:
      - 'NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=xxxx'
      - 'NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxx.firebaseapp.com'
      - 'NEXT_PUBLIC_FIREBASE_PROJECT_ID=xxx'
      - 'NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=xxx.appspot.com'
      - 'NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxx'
      - 'NEXT_PUBLIC_FIREBASE_APP_ID=xxx'
      - 'NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=xxx'
  - name: 'gcr.io/$PROJECT_ID/firebase'
    args: ['deploy', '--only=hosting']

これでCloud BuildでFirebase Hostingのデプロイができるようになった。

次回はWebhookトリガーの設定方法についてまとめる。

=> Firebase HostingのデプロイをWebhook(API)経由で行う

参考

• Firebase デプロイに Cloud Build を使う - Qiita
• Firebase へのデプロイ  |  Google Cloud
• Node.js アプリケーションのビルド  |  Cloud Build のドキュメント  |  Google Cloud