GitHub Actionsを利用したFirebaseへの自動デプロイについて

　開発中GitHub Actionsを利用したFirebaseへの自動デプロイを実装中躓いたため共有させていただきます。
自動デプロイするためfirebase-deploy.ymlに設定を記述する必要があるのですが、知らぬ間にgit管理ディレクトリを2階層で開発を行ってしまっており、今回working-derectoryの指定が必要になりました。通常であればworking-derectoryの指定は不要だと思います。

また自動デプロイは成功するもののアプリが起動しないことから、検証ツールで確認するとローカルで記述したsupabaseとの認証ができていない旨のメッセージが表示されていました。
.envファイルにsupabaseとの認証に関するURLとKeyを記述しており.gitignoreで.envファイルを管理していたため、GitHubにpushしても.envファイルはpushされないことから、認証が成立しない症状になっておりました。
そこでGitHubのActions secrets and variablesでURLとkeyを設定し、ymlファイルで環境変数を読み込み.envファイルを作成する記述を追加することで自動デプロイに成功することができました。
　今回の実装でymlをそもそもそんなに書いたことが無かったため、1つ1つの意味を調べることでとても学びの多い実装となりました。

firebase-deploy.yml

name: Build and Deploy to Firebase # 名前 何でもよい

on:
  push:
    branches:
      - main  # mainブランチにpushされたときに実行

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest # 使用するOS

    steps:
      # sample-vite ディレクトリのみをチェックアウト
      - name: Checkout repository (sample-vite only)
        uses: actions/checkout@v3
        with:
           path: sample-vite # すべてのファイルをsample-viteディレクトリにチェックアウトするようにしています。

      # Node.jsをセットアップ
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18.16.0'

      # 依存パッケージのインストール 環境変数を注入し、ビルド
      - name: Inject environment variables and build
      # .envファイルを.gitignoreで管理しているためURL,KEYをGitHubに登録した内容を代入しそれを新規作成の.envへ上書きする設定
      # npm と yarn のバージョンを指定（すでに同じバージョンならスキップ）
        run: |
          npm list -g npm@9.5.1 || npm install -g npm@9.5.1
          yarn --version | grep 1.22.22 || npm install -g yarn@1.22.22
          echo "VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}" > .env
          echo "VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}" >> .env
          npm install
          npm run build
        working-directory: ./sample-vite # sample-viteの階層で実行

      # Firebase CLIを使ってデプロイ
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          channelId: live
          projectId: jisou-study-record-app3
          entryPoint: ./sample-vite

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼