はじめに
GitHub Actionsを利用してFirebase Hostingに学習記録アプリのCI/CDを行いました。
デプロイ自体は完了したのですが、画面が真っ白の状態になり、解決に手間取ったため、備忘録を兼ねてまとめます。
事象
発端
- GitHub Actionsでのデプロイ時、
Directory 'dist' for Hosting does not exist.というエラーが出て失敗する - このエラーは下記の記事で解消
エラーは解消したが……
- GitHub Actionsでのdeploy自体は成功
- しかし画面は真っ白で何も表示されず
- 開発者ツールを開くと以下のエラーが表示される
MIME タイプ (“text/jsx”) が許可されていないため、“https://example.web.app/src/main.jsx” からのモジュールの読み込みがブロックされました。
これに対して、下記の記事を参考に解消を試みましたが、うまくいきませんでした。
とりあえず、main.jsxがそのままデプロイされていることが原因のエラーであることは共通しているはずですが、記事に従ってjob間でdistディレクトリを共有してもエラーが解消せず、ハマりました。
解決方法
私が取った解決法は以下の通りです。
-
firebase.jsonの記述を修正する - buildとdeployを同じjobにする
1. firebase.jsonの記述を修正する
firebase.jsonの記述を見直したところ、修正が誤っていたことが判明しました。
{
"hosting": {
"public":".", //正しくは"source":"."
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
この記述ではプロジェクトルートが公開ディレクトリになってしまうため、余計なファイルまでアップロードされてしまい、結果としていつまでもエラーが解消しなかったのでした。
ところで、この部分を変更したのは発端で発生したエラー解消のためでしたが、そもそもリポジトリにdistディレクトリがなかったとしても、build時に生成されているはずです。
しかし、job間での成果物の共有がなされていなかったため、deploy時にFirebase Hostingにアップロードがされず、大元のエラーが出たと考えられます。
なので、buildとdeployを同じjobにするか、成果物の共有がなされていれば、本来この部分の変更は必要ないはずです。
そのため、firebase.jsonの記述をデフォルトに戻します。
{
"hosting": {
- "public":".",
+ "public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
2. buildとdeployを同じjobにする
前項の修正でエラー自体は解決するのですが、ワークフローを見直しているとbuidとdeployで重複している部分があるのがどうしても気になりました。
そのため、buildとdeployで別れていたjobをこの機会に統合することにしました。
これによりartifactを使用する意味もなくなったため、その部分も除去します。
GitHub Actionsでは1つのJobごとに1つのRunner(=コンテナ実行環境)が用意される、ということなので、buidとdeployでjobを分ける必要性が薄いのでは？という気がしたのも一因です。
ただ、失敗したときのre-runを考慮するとbuildとdeployは分けたほうがいいようなので、この判断が正しいのかどうかは自信ないです。どなたか詳しい方教えてください。
おわりに
直接の原因は非常にしょうもない記述ミスなのですが、そこにたどり着くまでの過程の調べ物でGitHub ActionsやFirebase Hostingの仕組みについて少し理解が進んだので、元は取れたかな、という気はしています。