【React × Supabase × Firebase × GitHub Actions】自動デプロイ時に発生した「Uncaught Error: supabaseUrl is required.」というエラーの解決方法

はじめに

現在JISOUというコミュニティで【React × Supabase × Firebase × GitHub Actions】の技術を使用して自動デプロイの学習をしています。
GitHubActionsでのデプロイには成功するものの、デプロイ先のページを確認すると「Uncaught Error: supabaseUrl is required.」というエラーが発生して画面が真っ白になったため、その解決方法を記事にします。

エラー時のソースコード

エラーが発生したときのソースコード

main.yml

name: React Deploy

on:
  push:
    branches: ["main"]
  workflow_dispatch:

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: npm

      - name: Install dependencies
        run: npm install

      - 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: Install firebase-tools
        run: npm install --save-dev firebase-tools

      # 必要な認証情報の準備
      - name: Decode service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      # Firebaseのスペースを指定する
      - name: Change Firebase space
        run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}

      # Deployする
      # FIREBASE_CLI_EXPERIMENTS: webframeworksを設定しないとDeployできない
      - name: deploy
        run: ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_KEY: ${{ secrets.FIREBASE_KEY}}
          FIREBASE_CLI_EXPERIMENTS: webframeworks

      # 認証情報を削除してセキュリティ性を高める
      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

試してみたこと

1. まずは認証に用いる値が正常に保存されているか確認しました。
   GitHubActionsのsecretsに保存しているsupabaseの認証キーの値を吐き出させてみました。（※1）

debug.yml

 echo  secrets "${{ secrets.VITE_SUPABASE_URL }}"" | sed 's/./& /g'
 echo  secrets "${{ secrets.VITE_SUPABASE_ANON_KEY }}"" | sed 's/./
 >> h t t p s : / / (設定した値がマスク無しで表示される) . s u p a b a s e . c o m

結果、値は正常に設定されていることがわかりました。次のステップに進みます。
※1　GitHub Secretsをデバッグする

２． 次に検索上位に出てきたJISOUメンバーが書いてくれていた記事(※２)を確認すると「GitHubActionsのWorkflow permissions」の設定が「Read Repository contents and packages permissions」に選択されている必要があるとのことなので、そのように設定しました。
設定後確認するも変わらず同様のエラーが出ていました。
上記の設定方法はこちらの記事をご参照ください！
※2 Error: supabaseUrl is required.が出た時に確認すること　

３. 別のJISOUメンバーの方の記事(※3)を参考にしたところ、supabaseの値を読み込む場所をbuild直下にすると解消されたとありました。実際にsupabaseの値を読み込む場所をbuild直下に変更してみると、無事に動作するようになりました。
※3 【Supabase✕Firebase✕Github Actions】Github Actionsでのデプロイ時に「Error: supabaseUrl is required.」がブラウザのコンソールに表示

解決方法

エラー発生時は下記コードのようにビルドする際にsupabaseの情報をenvとして渡していました。

deploy.yml(修正前)

     - name: Run build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

記事の通り、build直下に移動することで無事にsupabaseの情報が読み込まれて正常に動作し始めました！

deploy.yml(修正後)

build:
    name: build
    runs-on: ubuntu-latest
    env:
      VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
      VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

おわりに

最近は学習の習慣がついてきたのか、勉強していないときもプログラミングしたい！と思うようになってきました。
恥ずかしながら子どものときから自主学習をする習慣がなく、高専の講義もほぼ流し聞き程度で集中する体力もなかったのですが、最近ようやっと机に向かって椅子に座る体力がついた気がします。

（余談）広島市も酷暑日が続き、15分程度歩いただけでも汗と喉の渇きがひどいです。みなさんも熱中症にお気をつけて！