Github Actions でdeployすると「Uncaught Error: supabaseUrl is required.」が出て解決するまでの手順すべて

はじめに

Reactで作成したアプリをGithub Actionsを経由してFirebaseにdeployした。
だが、ターミナルでfirebase deployした時にはアプリの画面が表示されていたが、
Github Actionsを介したdeployでは画面が真っ白になった。

問題

F12を押下し、真っ白になる原因を見ると、「Uncaught Error: supabaseUrl is required.」と記載されていた。
またこいつか。親の顔よりも見たエラーな気がする。

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

解決方法

ネットで検索し解決方法は見つかった。
変数名やファイル名は異なるので、注意が必要。
ネットで検索し解決方法は見つかった。変数名やファイル名は異なるので、注意が必要。全部で下の6つ方法がある。

1. githubのRepository secrets変更、追加
2. Repository secretsで追加した内容を反映
3. Firebaseの設定段階で、webframeworksをyに変更
4. GitHub Actionsの設定変更
5. ymlの変更
6. ファイルで使用している変数の統一。バラバラだとエラー原因

githubのRepository secrets変更

Github Actionsにpushした際、supabaseのURLとPASSWORDがうまくわたっていない。
原因は、これまで.envにsupabaseのURLとPASSWORDを記載していたため。
（gitignoreに記述しているため、.envの情報は渡されていない。）
解決方法は、.envの内容をほかの方法で補う。
.envファイルの代わりにGithubのRepository secretsにsupabaseのURLとKey情報を格納する。

• GitHubの
  Settings > Secrets and variables > Actionsに移動後、New repository secretsを押す。
• 「NAME」にSUPABASE_URL（ローカル上で使用している変数名）を入力して「Secret」の部分にsupabaseのURLを入力する。
  Key情報も同様にRepository secretに登録する。

写真のようになっていたら成功

Repository secretsで追加した内容を反映

Repository secretsで追加した内容を反映する。
たとえば、supabaseを使用している箇所は以下のようになる。
人により使用している箇所は異なるため、あくまでも参考に。

変更前

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.VITE_SUPABASE_URL as string;
const SUPABASE_ANON_KEY = process.env.VITE_SUPABASE_ANON_KEY as string;

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

変更後

import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY,
);

Firebaseの設定段階で、webframeworksをyに設定

firebase initのさい、誤った設定をしていた。

firebase experiments:list

実行すると、各設定が出力される。
写真は例

webframeworksがnとなっていたら変更する。

firebase experiments:enable webfreamworks
Enabled experiment webframeworks

設定し直す。

GitHub Actionsの設定変更

• Githubのリポジトリセッティングのページへいき、左のメニューから、Actions>Generalを選択する。
• ２ページ下にスクロールして、Workflow permissionsが「Read Repository contents and packages permissions」にチェックが入っているか確認。
  もしチェックが入っていたら、その上の「Read and write permissions」にチェックを入れてSaveボタンをクリックし、変更を保存。

ymlの変更

firebase init実行時に作成されるymlの記載に「githubのRepository secrets変更」で作成した内容を反映させる。
firebase-hosting-merge.ymlの内容に追加。

firebase-hosting-merge.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
        # 以下を追加
        env:
          VITE_SUPABASE_URL: ${{secrets.VITE_SUPABASE_URL}}
          VITE_SUPABASE_ANON_KEY: ${{secrets.VITE_SUPABASE_ANON_KEY}}
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_STUDYCOUNTTIMEAPP }}
          channelId: live
          projectId: studycounttimeapp

同様にfirebase-hosting-pull-request.ymlの内容も変更する。

firebase-hosting-pull-request.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
  checks: write
  contents: read
  pull-requests: write
jobs:
  build_and_preview:
    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      # 以下を追加
        env:
          VITE_SUPABASE_URL: ${{secrets.VITE_SUPABASE_URL}}
          VITE_SUPABASE_ANON_KEY: ${{secrets.VITE_SUPABASE_ANON_KEY}}
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_STUDYCOUNTTIMEAPP }}
          projectId: studycounttimeapp

ファイルで使用している変数の統一。バラバラだとエラー原因

細かな個所だが、変数が統一されているかは確認する。
github actionsで設定したSUPABASE_URLのファイル名とymlの記載が間違っていないかなど。
ここの記載を間違えると沼ってしまうので注意。

すべてが終わればあとはfirebase deployするだけ。

おわりに

deploy完了

参考