Github Actions でデプロイすると「Uncaught Error: supabaseUrl is required.」というエラー

はじめに

Reactで作成したアプリをGithub Actionsを経由してFirebaseにdeployしました。
しかしターミナルでfirebase deployした時にはアプリの画面が表示されていましたが、Github Actionsを介したdeployでは画面が真っ白になりました。
.github/workflowsディレクトリの直下に作成したymlファイルが、怪しいと思って調べていたのですがなかなか解決できませんでした。

前提としてバックエンドサービスとしてsupabaseを使用しています。

問題点

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "20"

      - name: Install dependencies
        run: npm install

      - name: Run build
        run: npm run build

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

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

こちらが間違っているコードです。
このコードをymlファイルに記述してコミット→プッシュをすると、Github Actionsでは正しくデプロイできています。
しかしFirebaseからアプリのフロント画面を確認しても画面は真っ白です。
コンソール画面を確認すると「Uncaught Error: supabaseUrl is required.」というメッセージが表示されています。

解決策

どうやらGithub Actionsにpushした際、supabaseのURLとKey情報がうまく渡っていないようです。
今回supabaseのURLとKey情報は.envファイルに記述していました。
そしてgitignoreファイルに.envファイルを記述していたため、Githubに情報が渡っていなかったようです。（gitignoreに記述されている情報はセキュリティのためGithubに渡されない仕様）

これを解決するために行ったことは以下のとおりです。

• .envファイルの代わりにGithubのRepository secretsにsupabaseのURLとKey情報を格納
  • Githubのプロジェクト選択
  • 「Settings」をクリック
  • サイドバーにある「Secret and aariables」をクリック
  • 「Actions」をクリック
  • 「New repository secret」をクリック
  • 「NAME」にSUPABASE_URL（ローカル上で使用している変数名）を入力して「Secret」の部分にsupabaseのURLを入力
  • Key情報も同様にRepository secretに登録します。
• ymlファイルに記述されているコードを以下のように修正

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    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
        env:
          VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
          VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}

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

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

追加したのは以下の部分です。

VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}

このコードを記述することでRepository secretに登録されたSUPABASE_URLとSUPABASE_ANON_KEYの値を、デプロイする際にVITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYに渡すことができます。
上記の作業を行うことによって「Uncaught Error: supabaseUrl is required.」というエラーを消して、正常に表示することができました！

終わりに

初めてGithub Actionを使用してデプロイしましたがymlに記述する内容も難しかったですが、それよりも何をしているのかが全くわかりませんでした...
この流れを理解するのに1日以上費やしてしまいましたが、また同じ箇所で躓かないためにも基本の理解は大切ですね！
まだ完全に理解するには至っていないので、さらに理解を深めていきます！