「GithubActions」ビルド時に環境変数を渡した際に「Uncaught Error: supabaseUrl is required.」というエラーが発生するときの解決法

この記事を書こうと考えた背景について

• GithubActionsを使用してfirebaseでデプロイをするときに今までデプロイ時に環境変数を渡していました。
  ⇒デプロイは成功していました。
  しかしビルド時に環境変数を読み込むように変更しようとして画面が表示されなくなり苦戦したため記事にまとめようと考えました。

原因

• デプロイ時に環境変数を渡していなかったため
  ⇒ビルドとデプロイは違う場所で行われている為再度デプロイをするときに環境変数を渡す必要がある
  ⇒ビルドとデプロイ時の両方で環境変数を読み込む記述をしている必要がある。

エラーが発生する原因になっている箇所

• ビルド時にしか環境変数を読み込んでいない

.yml

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps: 
        - name: Checkout code
          uses: actions/checkout@v4
        - name: Setup Node.js
          uses: actions/setup-node@v4
          with:
            node-version: "20"
        - name: Install dependencies
          run: npm install
        - name: Run build
          run: |
            npm run build
          env:
            VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
            VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

.yml

- name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks
      - name: delete GOOGLE_APPLICATION_CREDENTIAL
        run: export -n $GOOGLE_APPLICATION_CREDENTIAL
        if: ${{ always() }}

解決方法

• ビルドとデプロイ時の両方に環境変数を読み込む記述をした

.yml

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps: 
        - name: Checkout code
          uses: actions/checkout@v4
        - name: Setup Node.js
          uses: actions/setup-node@v4
          with:
            node-version: "20"
        - name: Install dependencies
          run: npm install
        - name: Run build
          run: |
            npm run build
          env:
            VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
            VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

• 下記の.は途中で省略の為記述しました。

.yml

      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools
      - name: Webframework Enable
        run: ./node_modules/.bin/firebase experiments:enable webframeworks
                ．
                ．
                ．
      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
            VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
            VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
      - name: delete GOOGLE_APPLICATION_CREDENTIAL
        run: export -n $GOOGLE_APPLICATION_CREDENTIAL
        if: ${{ always() }}