supabaseUrl is required. の解決法

はじめに

githubにpush後、ビルド〜Firebaseデプロイまでを自動化する(CI/CDの構築)過程で、本番環境の画面に何も表示されない問題が発生しました。

問題

GitHub Actions上で全て緑マークが出ているので、CI/CDによるFirebaseデプロイは成功していると推定。
しかし、画面は真っ白な上、コンソールを確認すると以下のエラーが出ている。

Uncaught Error: supabaseUrl is required.

解決方法

GitHubリポジトリの Secrets に、SupabaseのURLやKEYを追加

GitHubリポジトリ > Settings > Secrets and variables > Actions > New repository secret へ移動後、以下のように2つ登録

Name*: SUPABASE_URL Secret*: Supabase URL
Name*: SUPABASE_KEY Secret*: Supabase KEY

すでに.envファイルがあれば、VITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYの値をコピペしてください。

.github/workflows/deploy.ymlのBuildステップを下記のように修正

- name: Build
  env:
    VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
    VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_KEY }}
  run: npm run build

VITE_SUPABASE_ANON_KEY:
のように、ANONをつけないと supabaseKey is required. エラーが出ます。
私はこのエラーと30分格闘しました。もう友達です。

おわりに

当たり前ですが、大文字小文字、インデント（階層）など、気を付けることがたくさんありますが、エラーが何となく教えてくれるので調べれば何とかなりますね！