Webアプリ
学習アプリ Docker
概要
React + Viteで作成した学習記録アプリを、Dockerを使って開発環境として構築しました。
使用技術
- ・React / Vite
- ・Node.js
- ・JSON Server
- ・Docker
主な機能
- ・Dockerによる開発環境構築
- ・JSON Serverを利用した学習記録の保存・取得・編集・削除（CRUD）
- ・Reactによる学習記録の一覧表示・管理
工夫した点 / 学んだこと
1. フロントエンドとモックAPIのコンテナ分離
React + Viteで作成した学習記録アプリとJSON Serverを、それぞれ別のコンテナとして構成しました。Docker Composeを利用し、FrontendとMock APIをまとめて起動できるようにしました。
＜学んだこと＞
コンテナにすべての処理をまとめるのではなく、役割ごとにサービスを分けて構成する考え方を学びました。
2. ボリュームとnode_modulesの扱い
開発中のソースコードをホストとコンテナ間で共有するためにボリュームを利用しました。一方で、node_modulesまでホスト側のファイルで上書きされると、コンテナ内の環境で正常に動作しなくなるため、/app/node_modulesはコンテナ側に保持する構成にしました。
＜学んだこと＞
Dockerでは、ホストとコンテナのどのデータを共有し、どのデータをコンテナ側で管理するかを考える必要があることを学びました。
3. コンテナ間通信
FrontendからMock APIへアクセスする際、コンテナ内のlocalhostではなく、Docker Composeで定義したサービス名を利用して通信しました。
＜学んだこと＞
コンテナから見たlocalhostはホストPCや別のコンテナを指すものではないため、コンテナ間のネットワークやサービス名を意識して通信先を考える必要があることを学びました。
詳細