学習記録アプリの自動デプロイの対応

firebaseにデプロイ後画面が表示されない

ローカル環境では表示がされるのに、デプロイした環境ではなぜか表示がされなかった。
確認した結果下記設定が必要だった。

・ワークフローファイルに下記の記載漏れ

'on':
  push:
    branches:
      - main
        with:
          channelId: 本番環境の指定
          projectId: your-project-id
  build_and_preview:
    if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/main' }}

→上記記載をすることで初めて、本番環境へpushをした場合と指定したブランチが変更されるたびに自動的にデプロイが行われる。
※インデントの位置などでもエラーが発生するため書き方に注意が必要

・Uncaught Error: 関数名 is required.エラーの対処

1.環境変数の設定
ターミナルで下記例のようなコマンドを実施

firebase functions:config:set supabase.url="YOUR_SUPABASE_URL
firebase functions:config:set supabase.anon_key="YOUR_SUPBASE_KEY"

2.ワークフローファイルに下記を記載

- name: Setup env file
  run: |
    echo "VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}" >> .env
    echo "VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}" >> .env

3.Firebaseトークンの確認してトークンをコピーしておく

firebase login:ci

4.githubのリポジトリにアクセスして、ヘッダーのsettingsを選択

5.サイドバーのSecrets and variables > Actions を選択

6.New repository secretを押下

7.Nameに環境変数名,Secret欄にキー名を記載してAdd secretを押下

例
Name：FIREBASE_SERVICE_ACCOUNT, Secret：トークン名
Name：VITE_SUPABASE_ANON_KEY, Secret：firebase Project API keysからコピーName：VITE_SUPABASE_URL, Secret：firebase Project URLからコピー

・Failed to construct 'URL': Invalid URL エラーの対処
こちらについては恐らくGitHub Secretsで設定したURLと.envの環境変数のURLが一致していなかったため発生したエラーだと思われます。
GitHub Secretsのsecretの値を再設定することで解決しました。

所感

エラーが複数回発生したり、ローカルとデプロイ時で大きく表示されるエラーや状態が異なり大変戸惑いました。エラーログを確認したり、デベロッパーツールから情報を取得するなどがより大事だと実感しました。