Firebaseでデプロイ時に発生した「Uncaught Error: supabaseUrl is required.」というエラーの対処法について

はじめに

GithubActionsを使用してfirebaseでデプロイをした際に画面が真っ白になってしまい苦戦したので、
対処法についてまとめます。

エラーの原因

• GithubActionsに登録したシークレットの名前と.envで設定した環境変数名が一致していなかったから
  ⇒環境変数の名前が違うと全く別のものと認識されてうまく渡せない

• envで定義していた環境変数名とymlファイルで環境変数の読み込みを行っているところで使用している環境変数名が一致していないから

エラーが発生する原因になっている箇所

.yml

- name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks
          VITE_SUPABASE_URL: ${{ secrets.VITE_NEXT_PUBLIC_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY }}
      - name: delete GOOGLE_APPLICATION_CREDENTIAL
        run: export -n $GOOGLE_APPLICATION_CREDENTIAL
        if: ${{ always() }}

.env

VITE_NEXT_PUBLIC_SUPABASE_URL=
VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY=

解決方法

• 環境変数名とシークレット名を一致させた
• 環境変数を定義しているところと環境変数の読み込みを行っているところでの名前を一致させた。

.yml

 - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks
          VITE_NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.VITE_NEXT_PUBLIC_SUPABASE_URL }}
          VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY }}
      - name: delete GOOGLE_APPLICATION_CREDENTIAL
        run: export -n $GOOGLE_APPLICATION_CREDENTIAL
        if: ${{ always() }}

.env

VITE_NEXT_PUBLIC_SUPABASE_URL=
VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY=

おわりに
今回環境変数の定義にNEXT_PUBLICを使用していましたが、next.jsで使用するものなのでreact×ViteではNEXT_PUBLICは不要ということが今回のエラーに対処するときに知りました。
⇒VITE_環境変数名とすれば良いです。