エラーメッセージ「Uncaught Error: supabaseUrl is required.」が出て画面が表示されない

はじめに

簡単な学習記録アプリを作成しています。

作成したアプリにCI/CDの設定したところ、以下の問題に直面したため問題点と解決策をまとめます。

問題

ローカルで画面が真っ白になってしまい、表示されない。
Uncaught Error: supabaseUrl is required.

修正前のコード

supabase.js

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

export const supabase = createClient(
 process.env.VITE_PUBLIC_SUPABASE_URL,
 process.env.VITE_PUBLIC_SUPABASE_ANON_KEY
);

修正後のコード

supabase.js

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

export const supabase = createClient(
  import.meta.env.VITE_PUBLIC_SUPABASE_URL,
  import.meta.env.VITE_PUBLIC_SUPABASE_ANON_KEY
);

エラーの原因と理由

• ローカルの開発環境では.envファイルを直接Viteが読み込んでいた
• サーバーやGitHub ActionsなどのCI/CD環境には、ローカルの.envファイルが存在しない
• その結果、import.meta.env.VITE_PUBLIC_SUPABASE_URLやVITE_PUBLIC_SUPABASE_ANON_KEYがundefinedになり、エラーになった
• process.envはNode用
• import.meta.env.VITEはVite用

つまり、デプロイ環境に環境変数を渡していない のが原因。

おわりに

CI/CDの導入が初めてのため、エラーの原因に辿り着くまでに時間がかかりました。
CI/CDは業務ではすでに導入されていることが多かったため、今回自分で導入を経験することができ、必要性とやり方を学ぶことができてよかったです。