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

はじめに

以前対応したことだったのに、対応できなかったです。
前回と同じように、ymlファイル、viteconfig.tsを設定しているのに、デプロイできずに困りました。

問題

• ローカルでは問題なく動く
• GitHub Actionsを通して、Firebaseをデプロイすると、workflowはパスする
• GitHub Actionsのログでエラーがないのに、ページが真っ白になる
• 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: # GitHub Actions の UI から手動で実行するためのトリガー

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 # 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 # buildでアップロードしたアーティファクトの名前
          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

解決できなかったのが悔しいです。
理解が浅いと、応用が効かないので、理解を深めます。
次回は対応できるようにします。

参考

ホスティング動作を構成する(ドキュメント)
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