githubにpush後、ビルド〜Firebaseデプロイまでを自動化

前提

Reactで学習時間記録アプリを作成後、Firebaseでデプロイしてスマホから利用できる状態にしているところまで構築しています。
なので、GitHubへpush後、自動でFirebaseデプロイ（CI/CD）を構築する方法をまとめます。

はじめに

Makeだけでも実行するコマンドが一つ減って便利だったのに、CI/CDパイプラインを構築すればpushするだけで build〜deploy までが自動化できると聞いて、怠惰な私はやるしかありませんでした。

手順

1. Firebase CI用トークンの取得

ターミナルで以下を実行

firebase login:ci

すると以下のように出るので、YOUR_CI_TOKENをコピー

✔  Success! Use this token to login on a CI server:

YOUR_CI_TOKEN

Example: firebase deploy --token "$FIREBASE_TOKEN"

GitHubリポジトリのSecrets登録

GitHubリポジトリ > Settings > Secrets and variables > Actions > New repository secret へ移動

NAME：FIREBASE_TOKEN
Secret:先ほど取得したYOUR_CI_TOKENをペースト

これでGitHub Actions内で${{ secrets.FIREBASE_TOKEN }}として利用可能になりました。

1. .github/workflowsフォルダを作成

GitHub Actionsは.github/workflowsフォルダの中に拡張子.ymlまたは.yamlの設定ファイルを作ることで、「push時に何を自動でやるか？」を管理します。
なので、ターミナルで以下を実行

mkdir -p .github/workflows

2. GitHub Actions設定ファイルを作成

今回私はdeploy.yamlという名前のファイルを作成しました。

name: Deploy React to Firebase

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install dependencies
        run: npm ci

      - name: Build
        env:
          VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_KEY }}
        run: npm run build

      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Deploy to Firebase Hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
        run: firebase deploy --project "YOUR_PROJECT_ID" --token "$FIREBASE_TOKEN"

もしsupabaseKey is required. エラーが出たら

以下の記事を参考にしてみてください。

おわりに

昔から、"自動化"ということばにワクワクしてしまう性格なので、今後も自動化できるものは何でも自動化します。

参考