はじめに
前回作成した「学習記録アプリ」を拡張して、ビルドツールとしてviteを導入し、バックエンドにはsupabaseを利用しました。
そして、作成したアプリのCI/CDをGitHub Actionsで設定したので、そちらの感想を共有したいと思います。
（前回の記事）
開発環境
開発環境は以下の通りです。
| 言語・フレームワーク | バージョン |
|---|---|
| supabase | 2.45.3 |
| Node.js | 18.17.1 |
| React | 18.3.1 |
| vite | 5.4.1 |
| firebase | 10.13.0 |
アプリの機能
- 学習内容と学習時間の入力欄に値を入力すると、直下にその内容が表示される
- 学習内容と学習時間の両項目に値を入力して、登録ボタンを押下するとリスト形式で末尾に登録した内容が追加される
- 学習内容、学習時間のいずれか未入力であれば、登録が実行されずにエラーメッセージが表示される
- 削除ボタンを押下すると対象の学習内容が削除される
- 登録されている学習時間の合計時間が算出される
追加した機能
- 開発速度を向上させるために導入
viteを導入 - 登録したデータを
supabaseで管理 - ビルド、テスト、firebaseにデプロイまでを
GitHub Actionsで一元管理
viteについては以下の記事を参考にしました。
共有事項
今回初めての作業が、Firebaseへのデプロイという作業、テストの作成、CI/CDの設定でした。
まず、Firebaseへのデプロイ設定は対話形式で設定を行う箇所があり、一度間違えると面倒なことになりそうだったので、以下の記事を参考にしました。
こちらは意外とスムーズに出来ました。
次にテストはJestとTesting LibraryのドキュメントやGPTさんに確認しながら、実装できました。
気づきとしては、fireEventよりはuserEventを使用した方が、実際のブラウザの挙動に近いらしい。
ということで、こちらを参考にしました。
そして、最後がGitHub ActionsでのCI/CDの設定です。
ここが本当に苦労しました、、、
そもそもCI/CDやGitHub Actionsという単語すら知らなかったこと、yamlファイルは見たことはあれど作成したことはありませんでした。
GitHub Actionsについては、以下の記事がわかりやすかったです。
またCI/CDの設定中でpushした際に、様々なエラーに遭遇しました。
以下がそのエラーの一覧です。
-
dist' for Hosting does not exist.（distフォルダがないよー） -
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.（jsxファイルは読み込めないよー） -
supabaseUrl is required.（supabaseのurlとanon keyが見当たらないよー）
１つエラーが解消されたら、次は他のエラーという流れで沼にハマりました。
まだまだ理解したというレベルではないですが、エラー解決法についても今後まとめてみたいと思います！
感想
今回はエラーの連続で、正直なところ途中で何度も心が折れそうになりました。
特に、解決までに時間がかかった箇所では、モチベーションが下がる瞬間も少なくなかったです。
それでも、粘り強く対処方法を学び、他の方の記事を参考にして進めた結果、少しずつ前に進んでいる感覚が得られてきました。
この経験は間違いなく今後に生きると思います！
そして、何よりも 実際にエラーが解消できたときの開放感や達成感はたまりません！！
ただ、一つ反省点を挙げるとすれば、自己解決しようとするあまり、結果として時間を無駄にしてしまったことです。
特に、エラー内容を 言語化 して他の人に共有するのが面倒に感じてしまい、その手間を省こうとした結果、効率が悪くなってしまいました。
実際には、エラーを言語化して他の人に伝えることが、問題解決の大事なステップ なんですよね。
次回からはもっと柔軟に、効率的に問題に取り組めるように心がけたいと思います！
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします👇