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 のロールを追加します。

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

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

cloud build 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)経由で行う

参考


Related #firebase

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Firebase Extensions

Functionsを実装する際の参考になる

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる