【Supabase✕Firebase✕Github Actions】Github Actionsでのデプロイ時に「Error: supabaseUrl is required.」がブラウザのコンソールに表示

はじめに

Github Actionsを用いてFirebaseにデプロイを行った際、デプロイ自体は成功するが、
いざアプリを開くと以下のエラーがブラウザ上のコンソールに表示される（画面は真っ白）。

Error: supabaseUrl is required.

問題

ymlファイルの設定は以下の通り。
supabaseへの接続のための環境変数はymlに設定していたが、読み込めていない様子。
※secretsの変数については各々Github上に登録済。

autoDeploy.yml（中略）

      - name: Run build
        run: bun run build
        env:
          VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
          VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}

autoDeploy.yml（全体）

autoDeploy.yml

name: Automatic Deploy

on: push

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      GOOGLE_APPLICATION_CREDENTIALS: ./service-account.json
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: oven-sh/setup-bun@v2

      - name: Install dependencies
        run: bun install

      - name: Run build
        run: bun run build
        env:
          VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
          VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}

      - name: Install firebase-tools
        run: bun install --save-dev firebase-tools

      - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      - name: change space
        run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}

      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks

      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

解決方法

ビルドの時点で環境変数を設定していたためエラーとなった。
環境変数の定義位置をjobs直下に設定することでプログラムからの読み取りが成功する。

autoDeploy.yml（中略）

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
      VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}

autoDeploy.yml（全体）

autoDeploy.yml

name: Auto Deploy

on: push

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
      VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: oven-sh/setup-bun@v2

      - name: Install dependencies
        run: bun install

      - name: Run build
        run: bun run build

      - name: Install firebase-tools
        run: bun install --save-dev firebase-tools

      - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      - name: change space
        run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}

      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks

      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}
        

おわりに

envの適用はstep単位やjob単位などフレキシブルに出来るようです。
それはそうとGithubActions難しい…

参考