概要
GitHub ActionsでReactアプリをViteでビルドしFirebaseにデプロイしたときに経験したことやエラー内容を紹介します。
参考
英語の記事ですが分かりやすく手順が記載されています。
ほぼこの手順で進められるかと思います。
補足
基本的には参考記事を翻訳するなどして手順通り進めていけばいいですが、firebase login:ciを実行したときにターミナルにトークンが表示されるので忘れずにコピーします。
コピーしたトークンはGitHubのSettings > Secrets and variables > Actionsに移動後、New repository secretsを押下して、ペーストします。
エラー内容
参考記事の内容でymlファイルを作成すると下記のようなエラーが2箇所発生します。
エラー内容を読んで詳細のリンクに飛ぶとバージョンに関するエラーの説明があるのでymlの該当箇所のバージョンをv2からv4に上げて再度コミットをpushしましょう。
エラー内容2
私の環境ではこのままデプロイすると、環境変数に記述したsupabaseのURLとKey情報が読み込まれないためエラーが発生します。
検証モードで見てみると「Uncaught Error: supabaseUrl is required.」というエラーが出ており画面が真っ白の状態です。
こちらのエラーの解決はこちらの記事を参考にさせていただきました。
環境変数で記述していたsupabaseのURLとKey情報をGitHubに登録します。
登録の仕方は前述のFirebaseのトークンと同じです。
yml側でもenv:で環境変数を読み込む設定を追記します。
- name: Build
run: npm run build
env:
VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
まとめ
ymlファイルの記述はインデントも厳しくチェックされるので、気をつける必要があると知りました。
今回初めてGitHub ActionsでCD（継続的デプロイメント）を行い、細かい箇所まで全部理解することは難しいですが、エラーを経験しながら仕組みを理解していきたいと思いました。