【GitHub Actions】を使用したFirebase Hostingへの自動デプロイの設定
はじめに
現在、1時間の音声を15秒で文字起こしし自然な会話形式に自動変換する「インタビューAI」を開発中。
現在、開発環境での開発をほぼ終え、本番環境への移行中。
フロントエンドはReact、バックエンドはNode.js、データベースはMongoDBで開発。
GitHub Actionsを使用してFirebase Hostingにフロントエンドを自動デプロイするための設定手順を記載しておく。
Firebaseプロジェクトの設定
Firebaseプロジェクトの作成または選択
- Firebaseコンソールにアクセスし、新しいプロジェクトを作成するか、既存のプロジェクトを選択する。
Firebase Hostingの初期化
ローカル環境でプロジェクトディレクトリ（今回はfrontend/）に移動し、以下のコマンドを実行。
firebase init hosting
プロンプトに従って設定を完了する（例: 公開ディレクトリとして build を指定、シングルページアプリケーションとして設定など）。
１）Hosting のオプションを選択（spaceキーを押して選択したのちにEnterキー）
２） What do you want to use as your public directory? (public) →buildと入力。
Firebase Hosting の設定時に、build ディレクトリ（React でビルドした静的ファイルが入るディレクトリ）を公開ディレクトリとして指定
３）Configure as a single-page app (rewrite all urls to /index.html)?→Yes
React アプリケーションなのでYES。URL に関係なく、すべてのリクエストが index.html にリライトされ、クライアントサイドルーティングが正しく動作する。
他、下記のようにyes, noを選択していく。
無事設定が終わると、自動でSucessの画面が開く
Firebase Hosting の設定時に GitHub Actions を使った自動デプロイ のために、どの GitHub リポジトリを使用するかを指定を聞かれるので、「ユーザー名/リポジトリ」の形式で入力してEnter。
無事設定完了すると、デプロイ用のワークフローファイル として、firebase-hosting-merge.yml と firebase-hosting-pull-request.yml という2つのワークファイルが .github/workflows下に自動生成される。これはFirebase CLI が GitHub Actions のために作成したもの。以下の2つのシナリオで自動デプロイを行うための設定が含まれている。
**firebase-hosting-merge.yml：**プルリクエスト（PR）が main ブランチなどにマージされたときに自動デプロイを行う設定。
firebase-hosting-pull-request.yml：プルリクエストが作成されたときに、プレビュー用の環境にデプロイするための設定。
interview-ai/.github/workflows/firebase-hosting-merge.yml
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on merge
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
channelId: live
projectId: <your-firebase-project-id>
interview-ai/.github/workflows/firebase-hosting-pull-request.yml
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
checks: write
contents: read
pull-requests: write
jobs:
build_and_preview:
if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
projectId: <your-firebase-project-id>
これらのファイルは後ほど修正
サービスアカウントの作成とキーの取得（自動生成アップロード）
GitHub ActionsがFirebase Hostingにアクセスできるようにするために、サービスアカウントを作成する。このアカウントにFirebase Hostingへの管理者権限を与えることで、自動デプロイを実現する。
ただし、これに関しては、先ほどfirebase init hostingを行った際のログを見ると
Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT.
と記載されており、すでに FIREBASE_SERVICE_ACCOUNT というシークレット名で GitHub にサービスアカウントの JSON ファイルをアップロード済みなので、追加のサービスアカウントの作成や JSON ファイルの再ダウンロードは不要。
実際に、Githubリポジトリ→Settings→Secrets and variables→Actionsをクリックすると、GitHub SecretsにFIREBASE_SERVICE_ACCOUNTが登録済みなことがわかる。
GitHub Actionsワークフローの修正
自動作成された2つのワークフローの下記2点を修正する
- 必要な環境変数の指定
- ワーキングディレクトリをルートディレクトリではなくfrontendを指定
環境変数の管理
ローカルで本番環境をシミュレーションする場合は.env.production ファイルを作成し、必要な環境変数を定義する。ビルド時にこれらの変数が適用されるように設定する。.env.production ファイルはGitリポジトリに含めないように .gitignore に追加。
firebase関連の設定は、firebaseコンソールでアプリを作成後に、「プロジェクトの設定」→「全般」タブをスクロールすると、firebaseConfigとして表示される。
frontend/.env.production
必要な環境変数はGitHub Secretsとして追加し、ワークフロー内で安全に使用するようにする。
ワークフローファイル（例: .github/workflows/deploy-frontend.yml）内で、シークレットを環境変数として使用するように、Build frontend ステップで、必要な環境変数を env キーを使って注入する。
working-directory を ./frontend に設定
また、今回はfirebase.json （Firebaseの設定ファイル）が frontend/ ディレクトリ内にあるため、、
続きはこちらで記載しています。
Discussion