GitHubActionsを使ってFirebaseにCI/CDできない。Error: supabaseUrl is requiredなど

# はじめに
Reactのプロジェクトで、GitHub Actionsを使ったCI/CDでデプロイできず、かなりはまりました。
はまったポイントと解決方法を記載します。

以下の記事で、似た問題を記載しています。
Firebaseをデプロイしても、「Uncaught Error: supabaseUrl is required.」になる GitHub Actions, React
https://qiita.com/like-mountain/items/202af2a80c459620be82

# 問題
Error: supabaseUrl is requiredが出て、画面が表示できない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/4557b373-ee61-2031-9a85-c08748b20c7c.png)

Firebase Hosting Setup Complete(こちらの画面も出ていたので、念のため記載)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/17f9e413-3623-a85c-b06c-48192b0ba27a.png)

# 解決方法
GitHub Actionsの設定、firebase.json、supabase.js、ymlファイルの、
それぞれで誤った記述があり、デプロイできなかったので、はまったポイントを記述します。


### GitHub Actionsの設定
以下記事の形で、GitHubのSettingからActions > Generalを開き、
Workflow permissionsをRead and write permissionsに変更する必要がありました。

参考記事：
Error: supabaseUrl is required.が出た時に確認すること
https://qiita.com/acu8/items/df1c4bcef455a805b15e


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/dc61195b-1e54-c234-3a22-1b30a054c421.png)


### supabase.jsの環境変数の呼び方の設定
supabase.js
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;

vite.configにdefine: { 'process.env': process.env }が定義されていると、process.env.VITE_SUPABASE_URL;で環境変数を取得できる

### firebase.jsonのhostingの中のディレクトリの記載方法
distディレクトリを指定する。
distディレクトリは、ビルドプロセスの結果として生成されるファイルを格納するためのディレクトリ。
プロジェクトのソースコードをビルドして、デプロイ可能な形式に変換したファイルがこのディレクトリに配置される。

```firebase.json
{
    "hosting": {
      "public": "dist", //動いた
```

```firebase.json
{
    "hosting": {
      "source":".", //動かなかった
```
```firebase.json
{
    "hosting": {
      "source":"dist", //動かなかった
```


### GitHub Actionsのエラーで、Directory 'dist' for Hosting does not exist.が出る
```
Run ./node_modules/.bin/firebase deploy
⚠  Authenticating with `FIREBASE_TOKEN` is deprecated and will be removed in a future major version of `firebase-tools`. Instead, use a service account key with `GOOGLE_APPLICATION_CREDENTIALS`: https://cloud.google.com/docs/authentication/getting-started

=== Deploying to '***'...

i  deploying hosting
i  hosting[***]: beginning deploy...

Error: Directory 'dist' for Hosting does not exist.
Error: Process completed with exit code 1.
```

distディレクトリがないので、エラーになった。
以下のように、CI/CDで生成する必要がある。
ただ、GitHubには反映されない。(理由をChatGptに聞いたら、ソースコードと生成物の分離、バージョン管理の効率化、CI/CDパイプラインの役割、一貫性の確保、と出た)

GitHub action用のジョブに、以下を含める
```.yml
jobs:
  build:
# buildに以下を含める
    - name: Upload build artifacts
      uses: actions/upload-artifact@v4
      with:
        name: build-artifacts
        path: dist
```
```.yml
  deploy:
# deployに以下を含める
      - name: Download build artifacts
        uses: actions/download-artifact@v4
        with:
          name: build-artifacts
          path: dist
```



## Firebaseの初期設定の段階で、webframeworksをyに設定できていなかった

% firebase experiments:list

webframeworksがnになっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/071952ef-dce8-34f4-e62e-89219325aa7d.png)


設定し直す(このコマンドではなくfirebase init hostingのコマンドから設定した可能性がある)
% firebase experiments:enable webframeworks
Enabled experiment webframeworks

webframeworksをyに変更

# 完成ファイル
参考までに、完成ファイルを記載。

<details><summary>firebase.json</summary>

```firebase.json
{
    "hosting": {
      "public": "dist",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
}
```
</details>

<details><summary>build-deploy.yml</summary>

```build-deploy.yml
name: Firebase Deploy

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Check environment variables  # 環境変数が設定されているか確認
        run: |
          if [ -z "${{ secrets.VITE_SUPABASE_URL }}" ]; then echo "VITE_SUPABASE_URL is not set"; else echo "VITE_SUPABASE_URL is set"; fi
          if [ -z "${{ secrets.VITE_SUPABASE_ANON_KEY }}" ]; then echo "VITE_SUPABASE_ANON_KEY is not set"; else echo "VITE_SUPABASE_ANON_KEY is set"; fi
      - name: Run build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
      - name: Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: build-artifacts
          path: dist

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: "npm"
      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools
      - name: Decode Firebase service account key
      - name: Set up 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: Download build artifacts
        uses: actions/download-artifact@v4
        with:
          name: build-artifacts
          path: dist
      - 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_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FIREBASE_CLI_EXPERIMENTS: webframeworks
      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}
```
</details>

# おわりに
2週間くらいはまりました。
ドキュメントを読んだりもしたので、勉強になりました。
ただ、ドキュメントを読んだだけではわからないので、
他ツールとの連携をするには、経験値、考える力を上げていく必要があると思いました。

# 参考
Next.jsとGithubActionsでFirebaseのCI/CDする
https://zenn.dev/jinwatanabe/articles/4026d373383739

Error: supabaseUrl is required.が出た時に確認すること
https://qiita.com/acu8/items/df1c4bcef455a805b15e

Firebaseでデプロイしよう！
https://qiita.com/hiroki-harada/items/ca22ac177db68e3c3796

【React】GitHub ActionsでFirebase Hostingに自動デプロイしてみた
https://zenn.dev/kazhack/articles/21ea0ba46f3fce

webpackのdistとsrcフォルダの違い。dist配下のファイルはいつ作成されるか
https://qiita.com/shizen-shin/items/bd67e2e566c2b047c0f8