【Github Actions】PR時のFirebase Deploy previewで環境変数が読み込めずに画面が真っ白になる

はじめに

こんにちは！@nyakako13 です。

PR時の自動テストで作成してくれるDeploy previewページで環境変数が読み込まれずに困ったので対処法をまとめます。

問題

こんなワークフローを作って、作業用のブランチにpush→pull requestすると自動でテスト後、本番環境へのデプロイ前にプレビュー用のURLを作成してくれます。
(※firebase init で作ってくれたものを修正してます。)

.github/workflows/firebase-hosting-pull-request.yml

name: Deploy to Firebase Hosting on PR
on:
  pull_request:
  workflow_dispatch:
permissions:
  checks: write
  contents: read
  pull-requests: write
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - name: Build
        run: npm ci && npm run build
  test:
    name: Test
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - name: Install
        run: npm ci
      - name: Test
        run: npm run test
        env:
          VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
  preview:
    name: Deploy
    runs-on: ubuntu-latest
    needs: test
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - name: Build
        run: npm ci && npm run build
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@ac8041b3b04337509168113bf98b95879df22322
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACT_TS_SHIN_STUDY_RECORD }}
          projectId: react-ts-shin-study-record
        env:
          VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
          FIREBASE_CLI_EXPERIMENTS: webframeworks

便利！！

でもアクセスすると・・・

真っ白。。

コンソール見ると環境変数（VITE_SUPABASE_URL）が読み込まれていない！

.ymlに書いたはずなんだけどなー？？

解決方法①

env:で環境変数を読み込む記述をbuildのステップに移動することで改善しました。

.github/workflows/firebase-hosting-pull-request.yml

...省略

 preview:
    name: Deploy
    runs-on: ubuntu-latest
    needs: test
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - name: Build
        env:　//ここに移動
          VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
        run: npm ci && npm run build
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@ac8041b3b04337509168113bf98b95879df22322
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACT_TS_SHIN_STUDY_RECORD }}
          projectId: react-ts-shin-study-record
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks
          // 元々はここにあった

ちゃんとプレビューページが表示した！

原因

フロントエンドのアプリケーションでは、APIのURLや認証キーなどの設定値をビルド時に環境変数として埋め込みます。　これにより、アプリケーションが適切なAPIエンドポイントに接続できるようになるそうです。

解決方法②

ちなみに下記でも正常に動作します。（job自体にenvを設定することですべてのstepに適用される）

.github/workflows/firebase-hosting-pull-request.yml

...省略
preview:
    name: Deploy
    runs-on: ubuntu-latest
    needs: test
    env: //ここに移動
      FIREBASE_CLI_EXPERIMENTS: webframeworks
      VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
      VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - name: Build
        run: npm ci && npm run build
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@ac8041b3b04337509168113bf98b95879df22322
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACT_TS_SHIN_STUDY_RECORD }}
          projectId: react-ts-shin-study-record

解決方法③

ワークフロー全体にenvを適用することもできます。

.github/workflows/firebase-hosting-pull-request.yml

name: Deploy to Firebase Hosting on PR
on:
  pull_request:
  workflow_dispatch:
env: //ここに移動
  VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
  VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
permissions:
  checks: write
  contents: read
  pull-requests: write
jobs:

...省略

  preview:
    name: Deploy
    runs-on: ubuntu-latest
    needs: test
    env:
      FIREBASE_CLI_EXPERIMENTS: webframeworks
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - name: Build
        run: npm ci && npm run build
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@ac8041b3b04337509168113bf98b95879df22322
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACT_TS_SHIN_STUDY_RECORD }}
          projectId: react-ts-shin-study-record

感想

ブランチ切って作業する時にかなり便利になりました！
github actionsもfirebaseも使いやすい！

おわりに

よかったらX(@nyakako13)もフォローしてもらえると嬉しいです。

Qiita100投稿まで残り87！

未経験や浅経験、厳しいと言われている年代でエンジニアへの転職活動されている方、負けずにがんばりましょう！！

参考