はじめに
以前作成した「学習記録アプリ」の機能改修と、インフラ周りのアップデートを行いましたので、その過程で得られた知見を記事として残します。
なお、アプリの基本的な機能や初回リリース時の詳細については、以下の記事をご覧ください。
↓前回の記事はこちら
何をやったのか
主なアップデート内容は以下の3点です。
1. バックエンドにSupabaseを採用（データの永続化）
これまではブラウザのメモリ上でデータを管理していたため、リロードすると記録が消えてしまう状態でしたが、今回 Supabase を導入しました。
- データの永続化: サーバー上のデータベースに保存されるようになり、リロードや別端末からのアクセスでも記録が保持されます。
- CRUD機能の実装: データの登録や削除が即座にデータベースへ反映される、実用的なデータ操作を実現しました。
2. テストコードの導入
アプリケーションの品質を担保し、安全に改修を行える環境を整えました。
- Jest / React Testing Library: コンポーネント単体の挙動を検証するユニットテストを実装。
- 挙動の保証: 「削除ボタンを押すとデータが消える」といった主要な機能が期待通りに動くことをコードで保証しています。
3. CI/CDパイプラインの構築
手動デプロイによるミスを減らし、開発に集中できるワークフローを構築しました。
- GitHub Actions: プッシュをトリガーに、Lintチェック・テスト・ビルド・Firebase Hostingへのデプロイという一連の流れを完全自動化。
- リリースの安定化: テストを通過したコードのみが本番環境へ反映される、安全なリリースサイクルを実現しました。
↓主にこちらの記事を参考にCI/CD構築に挑戦しました。
以前と比べてどのように成長したのか
これまで現場の業務では、CI/CDパイプラインはすでに誰かが構築したものをそのまま使っていました。Supabaseの設定からデプロイ、CI/CD構築までをすべて自力で通して行ったのは今回初めてでした！
Lint、テスト、ビルド、デプロイという自動化のステップが裏でどう繋がり、どう動いているのか、仕組みをコードレベルで理解できました。これまでブラックボックスに感じていた領域を手探りで形にできたことに成長を感じています。今回得た知見や今後のパイプライン速度改善等も通じて、現場でもパイプライン改善などにも積極的に手を出していけそうで楽しみです！
大変だったところや工夫したところ
一番苦戦したのは、やっぱり初めてのGitHub ActionsのCICD構築ですね。
YAMLの書き方から調べ始め、特にViteの環境変数（Supabaseのキーなど）をGitHub Secrets経由でCI環境に渡し、ビルドに含める処理で何度もつまづきました。また、ジョブの設定も、エラーを出しては修正してプッシュする作業の繰り返しでした。泥臭いトライアンドエラーでしたが、コードがテストを通り、自動で本番環境へ反映されるパイプラインが動いたときは達成感がありました！
気づきなど
業務で「すでに用意されたインフラやCICD」に乗っかって開発していると、その裏側にある仕組みや苦労は案外見えませんね、、今回、テストの実行から配備までを自分の手で組んだことで、手動デプロイのリスクを減らし、安全にリリースできる環境のありがたみに気づきました！
最後に
普段CICDの構築や設定に触れる機会がないなら、個人開発で一度デプロイの自動化まで作ってみるのをお勧めします。システム全体を見る解像度が確実に上がります！
参考
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼