はじめに
FirebaseにホスティングしているReactアプリをGitHub Actionsを使って自動でFirebaseにデプロイ出来るように設定しました。
デプロイは成功したものの、画面が真っ白になってしまい直すのに時間が掛かったので解決方法をまとめます。
前提と開発環境
FirebaseにホスティングしたReactアプリを前提に話を進めます。
ホスティングしているReactアプリの構成と開発環境は以下です。
- React 19.2.8
- Vite 8.3.0
- Node.js 24.22.0
- Firebase 12.19.0
- @supabase/supabase-js 2.117.1
画面が真っ白になった原因
データベースとして利用しているSupabaseの環境変数ファイルに記述していたプロジェクトのURLが取得できていませんでした。そのためエラーで処理が止まってしまい、アプリにアクセスすると真っ白な画面が表示されました。
ブラウザのコンソールには以下のエラー出ていました。
Error: supabaseUrl is required.
SupabaseのプロジェクトのURLとAPIキーは.envファイルに記述しています。記述内容的にリモートリポジトリにpush出来ないので.gitignoreでGitから除外していました。
そのため、GitHub Actionsのランナー（仮想環境）に.envファイルが無い状態となり、アプリからSupabaseに接続出来なくなっていました。
解決方法
Repository Secrets
GitHubのRepository SecretsにSupabaseのプロジェクトのURLとAPIキーを追加しました。
Repository Secrets（リポジトリシークレット）には、APIキー、パスワード、トークンなどの機密情報を登録できます。Repository Secretsの設定画面には以下の手順で移動します。
- 対象のリポジトリ画面を開いた状態で「Setting」タブをクリック
- サイドバーにある「Secrets and variables」をクリック
- 「Actions」が出てくるのでクリック
- 「Actions secrets and variables」へ移動
「Actions secrets and variables」の「Repository secrets」をクリックしてSupabaseのプロジェクトのURLとAPIキーを登録します。
NameにそれぞれVITE_SUPABASE_URLとVITE_SUPABASE_PUBLISHABLE_KEYを入力し、SecretにSupabaseのURLとAPIキーを登録しました。
登録が完了すると一覧画面に表示されます。Secretの中身は登録後に確認できないのでご注意ください。
ワークフローからRepository secretsを参照する
Repository Secretsに登録したVITE_SUPABASE_URLとVITE_SUPABASE_PUBLISHABLE_KEYを参照します。
env:
VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
envはワークフローのジョブのステップ内で参照できる環境変数です。
Repository Secretsに登録したVITE_SUPABASE_URLとVITE_SUPABASE_PUBLISHABLE_KEYをワークフロー内で変数とすることでビルド時にSupabaseのプロジェクトのURLとAPIキーを渡すことができます。
私はビルドとデプロイのジョブを分けて書いているため、ビルドのジョブを以下のように修正しました。
jobs:
build: # ビルド時の処理
name: build
runs-on: ubuntu-latest
env: # Repository Secretsに登録したSupabaseのアクセス情報を環境変数として宣言
VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
steps:
- name: Checkout code
uses: actions/checkout@v7
- name: Setup Node.js
uses: actions/setup-node@v7
with:
node-version-file: "package.json"
- name: Install dependencies
run: npm install
- name: Run build
run: npm run build
- name: Upload build-artifacts
uses: actions/upload-artifact@v7
with:
name: build-artifacts
path: dist
envをステップの前に書くことでステップ内から変数として参照出来ます。ビルドの後にenvを書くとビルドするファイルに環境変数が渡されず、デプロイが成功してもSupabaseとの接続がエラーとなってしまいます。
長くなるので省きますが、Supabaseのアクセス情報を反映したdistディレクトリをactions/upload-artifactでデプロイジョブに渡してFirebaseへデプロイされれば完了です。
おわりに
実行環境が異なるので思わぬところに原因があってエラーが出てしまいました。
GitHub Actions中々難しい。。。