GitHub ActionsからFirebase Hostingへデプロイするようにしてみた

プライベート用のReactアプリをたまに手直しすることがあるのですが、いい加減CI/CDでデプロイを楽できるようにしとかなきゃなぁと思い、先日GitHub Actions用の設定を追加しました。

構成

詳細は割愛しますが大まかには以下の構成を実現しました。

• React.jsで記述
• Firebase Hostingでホスティング
• mainブランチにマージされたらGitHub ActionsでFirebase Hostingにデプロイする

前提条件

• Firebase Hostingで既にReactアプリがデプロイされている状態

GitHub Actionsの環境構築

GCPでデプロイ用のサービスアカウントを作成する

サービス アカウントの作成と管理  |  IAM のドキュメント  |  Google Cloud 辺りを参考にして、CI用のサービスアカウントを追加します。

今回ロールには「Firebase Develop 管理者」を設定しました。

サービスアカウントのキーを生成する

サービス アカウント キーの作成と管理  |  IAM のドキュメント  |  Google Cloud 辺りを参考にキーを作成してJSON形式でDLします。（DLしたキーは後で使います。）

GitHubのRepository secretsにサービスアカウントのキーを登録する

GitHubリポジトリのSettings -> Secrets and variables -> ActionsからRepository secretsを追加します。 NameにはGCP_SERVICE_ACCOUNT_KEYを指定し、Secretには前のフェーズでDLしたJSON文字列をコピペすればOKです。

GitHub Actionsの設定ファイルを追加する

Reactアプリに.github/workflows/github-actions.ymlを追加して、以下のように記述してあげます。

.github/workflows/github-actions.yml

name: GitHub Actions
on:
  push:
    branches:
      - "main"
jobs:
  deploy-firebase-hosting:
    runs-on: ubuntu-22.04
    permissions:
      contents: "read"
      id-token: "write"
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - id: "auth"
        name: "Authenticate to Google Cloud"
        uses: "google-github-actions/auth@v1"
        with:
          credentials_json: "${{ secrets.GCP_SERVICE_ACCOUNT_KEY }}"
          access_token_lifetime: 1200s
      - name: Build
        run: 
          # {任意のビルド処理などを記述}
      - name: Deploy Firebase Hosting
        run: |
          npm install -g firebase-tools
          firebase deploy --project={GCPのプロジェクトID} --only=hosting

GitHub ActionsでのFirebaseの認証はgoogle-github-actions/auth@v1で実施しています。 （GitHub - google-github-actions/auth: A GitHub Action for authenticating to Google Cloud.）

credentials_jsonに対して${{ secrets.GCP_SERVICE_ACCOUNT_KEY }}を指定することで、Repository secretsに追加したsecretsを参照してくれます。

ファイルが追加できたらmainブランチにマージして動作するかどうか確認しましょう。