GitHubActionsを使ってFirebaseにCI/CDできない。Error: supabaseUrl is requiredなど

はじめに

Reactのプロジェクトで、GitHub Actionsを使ったCI/CDでデプロイできず、かなりはまりました。
はまったポイントと解決方法を記載します。

問題

Error: supabaseUrl is requiredが出て、画面が表示できない。

Firebase Hosting Setup Complete(こちらの画面も出ていたので、念のため記載)

解決方法

GitHub Actionsの設定、firebase.json、supabase.js、ymlファイルの、
それぞれで誤った記述があり、デプロイできなかったので、はまったポイントを記述します。

GitHub Actionsの設定

以下記事の形で、GitHubのSettingからActions > Generalを開き、
Workflow permissionsをRead and write permissionsに変更する必要がありました。

Error: supabaseUrl is required.が出た時に確認すること
https://qiita.com/acu8/items/df1c4bcef455a805b15e

supabase.jsの環境変数の呼び方の設定

supabase.js
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;

// vite.configにdefine: { 'process.env': process.env }が定義されていると、process.env.VITE_SUPABASE_URL;で環境変数を取得できる

firebase.jsonのhostingの中のディレクトリの記載方法

firebase.json
動いた

{
        "hosting": {
          "public": "dist",

動かなかった

{
        "hosting": {
          "source":".",
          "ignore": [

{
        "hosting": {
          "source":"dist",
          "ignore": [

GitHub Actionsのエラーで、Directory 'dist' for Hosting does not exist.が出る

Run ./node_modules/.bin/firebase deploy
⚠  Authenticating with `FIREBASE_TOKEN` is deprecated and will be removed in a future major version of `firebase-tools`. Instead, use a service account key with `GOOGLE_APPLICATION_CREDENTIALS`: https://cloud.google.com/docs/authentication/getting-started

=== Deploying to '***'...

i  deploying hosting
i  hosting[***]: beginning deploy...

Error: Directory 'dist' for Hosting does not exist.
Error: Process completed with exit code 1.

distディレクトリがないので、エラーになった。
以下のように、CI/CDで生成する必要がある。
ただ、GitHubには反映されない。(理由をChatGptに聞いたら、ソースコードと生成物の分離、バージョン管理の効率化、CI/CDパイプラインの役割、一貫性の確保、と出た)

GitHub action用のジョブに、以下を含める

jobs:
  build:
buildに以下を含める
    - name: Upload build artifacts
      uses: actions/upload-artifact@v4
      with:
        name: build-artifacts
        path: dist

  deploy:
deployに以下を含める
    - name: Deploy to Firebase
      run: ./node_modules/.bin/firebase deploy --only hosting
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Firebaseの初期設定の段階で、webframeworksをyに設定できていなかった

% firebase experiments:list

webframeworksがnになっている

設定し直す(このコマンドではなくfirebase init hostingのコマンドから設定した可能性がある)
% firebase experiments:enable webframeworks
Enabled experiment webframeworks

webframeworksをyに変更

完成ファイル

参考までに、完成ファイルを記載。

firebase.json

{
        "hosting": {
          "public": "dist",
          "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
          ],
          "rewrites": [
            {
              "source": "**",
              "destination": "/index.html"
            }
          ]
        }
}

build-deploy.yml

name: Firebase Deploy

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Check environment variables  # 環境変数が設定されているか確認
        run: |
          if [ -z "${{ secrets.VITE_SUPABASE_URL }}" ]; then echo "VITE_SUPABASE_URL is not set"; else echo "VITE_SUPABASE_URL is set"; fi
          if [ -z "${{ secrets.VITE_SUPABASE_ANON_KEY }}" ]; then echo "VITE_SUPABASE_ANON_KEY is not set"; else echo "VITE_SUPABASE_ANON_KEY is set"; fi
      - name: Run build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
      - name: Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: build-artifacts
          path: dist

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: "npm"
      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools
      - name: Decode Firebase service account key
      - name: Set up Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      - name: Download build artifacts
        uses: actions/download-artifact@v4
        with:
          name: build-artifacts
          path: dist
      - name: change space
        run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}
      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FIREBASE_CLI_EXPERIMENTS: webframeworks
      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

おわりに

2週間くらいはまりました。
ドキュメントを読んだりもしたので、勉強になりました。
ただ、ドキュメントを読んだだけではわからないので、
他ツールとの連携をするには、経験値、考える力を上げていく必要があると思いました。

参考

Next.jsとGithubActionsでFirebaseのCI/CDする
https://zenn.dev/jinwatanabe/articles/4026d373383739

Error: supabaseUrl is required.が出た時に確認すること
https://qiita.com/acu8/items/df1c4bcef455a805b15e

Firebaseでデプロイしよう！
https://qiita.com/hiroki-harada/items/ca22ac177db68e3c3796

【React】GitHub ActionsでFirebase Hostingに自動デプロイしてみた
https://zenn.dev/kazhack/articles/21ea0ba46f3fce

webpackのdistとsrcフォルダの違い。dist配下のファイルはいつ作成されるか
https://qiita.com/shizen-shin/items/bd67e2e566c2b047c0f8