ローカルで出来たfirebase deployがGitHub Actionsでできない際に確認すべきこと

## はじめに
firebaseでの`npm run build`と`firebase deploy`をローカル環境上では通せた状況で、**GitHub Actions**を使った自動デプロイの際にfirebaseのデプロイを試みていたのですが何回も詰まってしまいました。

この記事では備忘録として、実際に起きた事例を書き起こしながら「どうすればデプロイできたか」を書いていきます。

### 今回の前提
* ローカル環境で`npm run build`と`firebase deploy`を叩いたときにPassできること
* GitHub Actions上で`npm run install`と`npm run build`の自動デプロイまではできるようになっていること 

## 最初に出たエラー / インストール周り
GitHub Actions上で`firebase deploy`の処理を回したところFailureとなりました。
エラーメッセージには以下のような文言が書かれていました。
```
/home/runner/work/_temp/0895dc39-d86e-46bb-af20-09cc466de998.sh: 
line 1: firebase: command not found
```
どうやら`firebase`のコマンドが見つからないことが原因のようです。

### エラーへの対策
※こちらの記事に記載されていた方法を参考にしました。

https://qiita.com/koffee0522/items/1dd1170268d277119e1a

コードを見返してみたところ、firebaseのインストールを経ずにいきなり`firebase deploy`をしていたことが原因でした。

そのため、上記の記事をもとにyamlファイルを次のように修正し、`firebase-tools`をインストールする工程を加えました。
```yaml:deploy.yaml
    - name: install
        run: npm install && npm install -g firebase-tools
```
すると最初に詰まっていた`firebase: command not found`のエラーは解消されました。無事にインストールは出来たようです。

## 次に出たエラー / 環境変数周り
firebaseをインストールした後にデプロイを試してみましたが再度エラーが出ました。
```
Error changing to directory firebase: Error: ENOENT: 
no such file or directory, chdir '(アプリのパス)' -> 'firebase'
```

その際の解消法として下記の記事を参考にしました。

http://zenn.dev/shoji9x9/articles/efe7dbf71fa6de

https://qiita.com/hiroyuki_0507/items/e86b8660c212e7e0cfbd

考えられる原因としては**作成したアプリでは`.env`ファイルとして設定していたfirebaseの環境変数がGitHub Actions上で反映されていない**ことのようでした。

なので、yamlファイルのbuildの段階で環境変数の記載を加えることにしました。
また、firebaseのデプロイの際にはfirebase tokenも必要なため、これらを双方加えることにしました。

```yaml:deploy.yaml
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    # 環境変数を加えた部分①
    env:
      VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
      VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
      VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
      VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
      VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
      VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
    steps:
      - name: checkout
        uses: actions/checkout@v4

      - name: setup-node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: npm

      - name: install
        run: npm install && npm install -g firebase-tools

      - name: build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
          VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}

    # 環境変数を加えた部分②
      - name: firebase deploy
        run: firebase deploy --token $FIREBASE_TOKEN
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
```
これらの環境変数を加えることで無事firebase deployもGitHub Actions上で通るようになりました。

## firebase deployに使う環境変数の取得方法
### Firebaseのconfig値系統
**①firebaseのコンソールに移動する**

**②左側の歯車ボタンの「プロジェクトの設定」を押下する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4021196/cccb434f-c028-48f5-b2b7-c928dd628b6b.png)
**③下記の部分に環境変数の値があるのでコピーする**
![スクリーンショット 2025-04-04 22.36.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4021196/9d0db1db-1b3e-460b-9e15-e2ed1668771b.png)

### firebaseのトークン
参考記事

https://qiita.com/hiroyuki_0507/items/e86b8660c212e7e0cfbd

**①ローカル環境で`firebase login:ci`を叩く**

**②Oauth連携の画面が出るのでGoogleアカウントで認証する**

**③下記の画面がローカルで出てくる。赤線部分が`FIREBASE_TOKEN`なのでGitHub上で環境変数として登録する**
![スクリーンショット 2025-04-04 22.50.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4021196/44b7662d-86f9-494e-ac21-28c36f5a44a6.png)


## まとめ
firebase deployがローカルでは通るのにGitHub Actionsでは通らないという時に見てみる事項として、
* firebaseのinstallをyaml上で実現できているか
* ローカルでも必要だったfirebaseの環境変数をyamlに記載してGitHub上で登録しているか
といった部分を見てみるとエラーによる詰まりを減らせるはz