Firebase Hosting + Supabaseでエラーメッセージ「supabaseUrl is required」が出る原因と解決方法

はじめに

簡単な学習記録アプリを作成しています。
CI/CDでデプロイした際にFirebaseのデプロイ先で画面が表示されず苦戦したため、原因と解決方法をまとめます。

問題

デプロイ先の画面が真っ白になってしまい、表示されない。
Uncaught Error: supabaseUrl is required.

解決方法

以下の3つの名称を完全一致させる

• GitHub Repository secretsのSecrets名
  

• YAMLのenv

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

• コードの参照名

supabase.js

import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

原因

• 参照名が一致していなかったため、環境変数がundefinedのままビルドされていた

終わりに

どこが誤っているの確認する箇所があやふやだったため解決に時間がかかりましたが、命名があっているかひとつひとつ確認することエラーを解消し、デプロイ先でも画面を表示させることができました。
同じようなエラーで困っている方の参考になりましたら幸いです。

参考