GitHub Actionsでbuildとdeployが失敗するエラー解決法

はじめに

GitHub Actionsを使ってFirebase Hostingに自動デプロイをする際、ローカルでの deploy は問題なく動くのにCI環境で画面が真っ白になったり、ビルドエラーが出なかったりする問題に遭遇しました。この記事では、その原因と解決策をまとめます。

発生した問題

・ローカル環境ではSupabaseやFirebaseの接続が正常に動く
・GitHub Actionsでの自動ビルド＆デプロイは成功するが、公開先の画面が真っ白
・エラーは表示されないため原因がわかりにくい

原因の切り分け

環境変数が渡されていない可能性

ローカルでは .env に設定しているSupabaseのURLやANON_KEYが、GitHub Actionsの環境変数として正しく渡されていない。

Firebaseサービスアカウントの設定ミス

GitHub Actionsのデプロイで firebaseServiceAccount に渡すJSONの設定が間違っている、または権限が不足している可能性。

解決策 : 環境変数を設定

→　GitHubリポジトリ　→　Settings　→　Secrets and variables　→　Actionsへ移動

New repository secretに環境変数を設定する

supabaseを使用している場合は「env:」を使用して、GitHub Secretsに保存してある値を環境変数として注入して、ビルド時に使えるよう設定。

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - name: Install dependencies
        run: npm ci
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
      - name: Build project
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_KEY }}
          projectId: "indiegame-hub"
          channelId: "live"

まとめ

GitHub Actionsはgit上のコードを参照し自動更新を設定します。その際にsupbabaseなどで環境変数を設定している場合は、その値を読み取れるようにしなくてはなりません。
git上には「.env.*」フォルダは置くことが危険なため置くことはできません。

なのでgitHub自体に環境変数を設定しておく必要があります。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！