GitHub Actionsでsupabaseデプロイで画面が真っ白になりました。

はじめに

前回の記事で意気揚々とデプロイしたら画面真っ白でした。

悲しい。

原因

Supabaseの環境変数追加を忘れていました。

解決

ローカル環境では .env に Supabase の URL や API Key を設定していたため問題なく動いていましたが、GitHub Actions 上ではその .env ファイルは存在しません。
そのため、ビルド時に必要な環境変数を GitHub Actions に渡す必要があります。

1.GitHub の Secrets に Supabase の環境変数を追加する

GitHub の対象リポジトリを開きます。

Settings
↓
Secrets and variables
↓
Actions
↓
New repository secret

ここに追加

2.GitHub Actions の workflow に環境変数を渡す

env:
  VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
  VITE_SUPABASE_KEY: ${{ secrets.VITE_SUPABASE_KEY }}

私はトップレベルに置きました。

最後に

ローカルで動くのにデプロイ後だけ真っ白になる場合は、環境変数の設定漏れがよくある。
google mapとかよくやりがちだったので気づけてよかった。

参考

ありがとうございました！