Firebaseをデプロイすると「Uncaught Error: supabaseUrl is required.」になる(GitHub Actions、React)

問題

• GitHub Actionsのログでエラーがないのに、ページが真っ白になる
• GitHub Actionsを通して、Firebaseをデプロイすると、workflowはパスする
• ローカルでは問題なく動く
• GitHubのsecretキーは設定済
• GitHub Actionsのymlファイルは前回のものを踏襲

上記にも関わらず、ブラウザの検証ツールでコンソールを確認すると、「Uncaught Error: supabaseUrl is required.」のエラーが出る。

解決方法

firebase.jsonの設定漏れでした。

firebase.json

firebase.json

// ※念の為ですが、jsonファイルではコメントアウトできません

{
    "hosting": {
    // Firebase Hosting にデプロイするディレクトリを指定
      "public": "dist",
      "ignore": [
        "firebase.json",
    // 先頭がピリオドのファイルはシステムから隠す
        "**/.*",
    // サイトの作成に使用されるが、実行はされない依存関係が含まれる
        "**/node_modules/**"
      ],
    //   特定のURLパスを別のパスにリダイレクトするために使用される
      "rewrites": [
        {
    // リダイレクトの対象となるURLパターンを指定する
    // "**"はワイルドカードで、すべてのURLパスにマッチ
          "source": "**",
    // SPAでは、すべてのURLリクエストを/index.htmlにリダイレクトすることで、クライアントサイドのルーティングが正しく機能する
          "destination": "/index.html"
        }
      ]
    }
}

Firebaseのドキュメントを改めてみたところ、GitHubアクション時のデプロイの方法がありました。
前回から修正したファイルも記載します。

cicd.yml

cicd.yml

name: CICD

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    env :
      VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
      VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
    steps:
      - name: Checkout repository
        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: Run Prettier
        run: npx prettier --write .
      - name: Run tests
        run: npm run test
      - name: Build project
        run: npm run build
      - 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 repository
        uses: actions/checkout@v4
      - name: Download build artifacts
        uses: actions/download-artifact@v4
        with:
          name: build-artifacts
          path: dist
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          projectId: "${{ secrets.FIREBASE_PROJECT_ID }}"
          channelId: live

おわりに

2ヶ月前に自分で記事を書いていました。
https://qiita.com/like-mountain/items/292f219eef4ce14b161b#%E5%AE%8C%E6%88%90%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB

前回と同じように、ymlファイルと vite.config.tsを設定しているのに、デプロイできずに困りました。
理解が浅いと応用が効かないことを学びました。

次回は対応できるようにします。

参考

ホスティング動作を構成する(ドキュメント)
https://firebase.google.com/docs/hosting/full-config?hl=ja
GitHubActionsを使ってFirebaseにCI/CDできない。Error: supabaseUrl is requiredなど
https://qiita.com/like-mountain/items/292f219eef4ce14b161b#%E5%AE%8C%E6%88%90%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB