【GitHub Actions エラー】CDした時に出たエラーその4 "Uncaught Error: supabaseUrl is required."

はじめに

GitHub ActionsでFirebaseにデプロイした時の遭遇した複数のエラーについて書いていきます。

その1の記事はこちら
GitHub ActionsでCDした時に出たエラーその1 "Error: firebase use must be run from a Firebase project directory."

その2の記事はこちら
GitHub ActionsでCDした時に出たエラーその2 "Error: Assertion failed: resolving hosting target of a site with no site name or target name. This should have caused an error earlier"など

その3の記事はこちら
GitHub ActionsでCDした時に出たエラーその3 "Error: Cannot deploy a web framework from source because the experiment webframeworks is not enabled. To enable webframeworks run firebase experiments:enable webframeworks"

問題

pushした際に、SupabaseのURLとKEY情報を設定していなかったのが原因らしいです。
詳細は参考記事を見ていただくとより理解が深まります。

consoleでのエラーメッセージ

Uncaught Error: supabaseUrl is required.

main.yml

name: Scheduled deploy

on:
  push:
  workflow_dispatch:

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install firebase-tools
        run: npm 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
        env:
          GOOGLE_APPLICATION_CREDENTIALS: ${{ github.workspace }}/firebase-key.json
          FIREBASE_CLI_EXPERIMENTS: webframeworks
          run: |
          ./node_modules/.bin/firebase deploy
      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

解決方法

1.SupabaseのURLとKEY情報を GitHub のRepository secretsに登録する
※登録方法については参考記事に詳しく解説されているので参考にしてみてください。

2. .ymlファイルに以下のコードのようにVITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYを書く

これでRepository secretに登録されたSUPABASE_URLとSUPABASE_ANON_KEYの値を、デプロイする際にVITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYに渡すことができます。

main.yml

name: Scheduled deploy

on:
  push:
  workflow_dispatch:

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install firebase-tools
        run: npm 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
        env:
          GOOGLE_APPLICATION_CREDENTIALS: ${{ github.workspace }}/firebase-key.json
          FIREBASE_CLI_EXPERIMENTS: webframeworks
+         VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+         VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
        run: |
          ./node_modules/.bin/firebase deploy
      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

おわりに

今回のエラーでは、GitHub Actionsではデプロイの成功マークが出ていたので、やっとデプロイできたぁ〜！と思ったのも束の間、画面が真っ白でえっ？となりました。
こういうこともあるんだなと思いました。

参考