個人開発を趣味で始めたいと思います。
そこで調査したことを備忘録としてまとめようと思います。
個人開発は企画からリリースまで一気通貫で行います。
そのため一連の記事をご覧いただけると、開発フローがイメージしやすく初心者の方でも開発が身近なものになるのではないかと思います。
今後の記事作成のモチベーションのためにも、いいねをいただけますと幸いです!
以下本編です。
※ なお、記事はAI生成ですが草稿は私が書いたものになっています。
この記事では、Dockerを使ってフロントエンド開発環境を構築する方法を備忘録としてまとめます。
また、docker compose
の使い方や package.json
の役割、docker
コマンドの基本、docker build
の遅さの原因と改善策についても詳しく解説します。
📌 目次
- Dockerを使ってフロントエンド開発環境を構築する理由
- Dockerfile.dev と docker-compose.dev.yml の解説
package.json
の役割と記述内容- Docker Compose と docker compose の違い
- Docker コマンドの基本
- Docker Build が遅い理由と高速化の方法
- 実際のトラブルとその解決策
- まとめ
🎯 1. Dockerを使ってフロントエンド開発環境を構築する理由
✅ Docker を使うメリット
-
環境の統一
→ 開発者全員が 同じNode.js環境 を使えるため、「動く/動かない問題」が発生しない。 -
ローカル環境を汚さない
→ Node.js をホストマシンにインストールせず、コンテナ内だけで完結できる。 -
簡単なセットアップ
→docker-compose up -d
だけで環境が整う。 -
ポート管理がしやすい
→3000:3000
のようにポートマッピングができる。
📌 2. Dockerfile.dev と docker-compose.dev.yml の解説
✅ Dockerfile.dev
の内容
この Dockerfile.dev
は Node.js 環境を作成し、フロントエンド開発用サーバーを立ち上げるためのもの です。
# 軽量な Node.js の公式イメージを使用
FROM node:18-alpine
# コンテナ内の作業ディレクトリを指定
WORKDIR /app
# package.json, package-lock.json を先にコピーしてキャッシュを活用
COPY package.json package-lock.json ./
RUN npm install
# ホスト側のコードをコンテナと同期するため COPY . . は不要(volumes を使う)
EXPOSE 3000
# 開発用サーバーを起動
CMD ["npm", "run", "dev"]
✅ docker-compose.dev.yml
の内容
この docker-compose.dev.yml
は フロントエンドの開発コンテナを管理するためのもの です。
version: "3.8"
services:
frontend:
build:
context: ../frontend # ホスト側の frontend ディレクトリを参照
dockerfile: ../.docker/frontend/Dockerfile.dev
container_name: hobby-finder-frontend
ports:
- "3000:3000"
volumes:
- ../frontend:/app # ホストとコンテナでコードを同期
- /app/node_modules # node_modules はコンテナ側に保持
environment:
- NODE_ENV=development
command: ["npm", "run", "dev"]
📌 3. package.json
の役割と記述内容
package.json
は Node.js プロジェクトの設定や依存関係を記録するファイル です。
Docker で環境を作る場合でも、このファイルがないと npm install
や npm run dev
が実行できません。
✅ package.json
の例(React の場合)
{
"name": "hobby-finder-frontend",
"version": "1.0.0",
"scripts": {
"dev": "react-scripts start"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1"
}
}
📌 4. Docker Compose と docker compose の違い
docker-compose
と docker compose
の違いは 新旧のバージョンの違い です。
コマンド | バージョン | 特徴 |
---|---|---|
docker-compose |
旧バージョン(v1系) |
docker-compose という独立したコマンド |
docker compose |
新バージョン(v2系) |
docker コマンドに統合され、より高速化 |
現在は docker compose
(スペース区切り)が推奨されています。
📌 5. Docker コマンドの基本
コマンド | 説明 |
---|---|
docker build -t <image_name> . |
Docker イメージをビルド |
docker images |
ローカルにある Docker イメージ一覧を表示 |
docker run -d -p 3000:3000 <image_name> |
コンテナをバックグラウンドで実行 |
docker ps |
実行中のコンテナを表示 |
docker ps -a |
停止中のコンテナも含めて表示 |
docker logs <container_name> |
コンテナのログを確認 |
docker exec -it <container_name> bash |
実行中のコンテナに入る |
docker rm <container_id> |
コンテナを削除 |
docker rmi <image_id> |
イメージを削除 |
📌 6. Docker Build が遅い理由と高速化の方法
💥 遅い理由
-
イメージサイズが大きい
-
node:18
などの 大きなベースイメージ を使用すると遅くなる。
-
-
キャッシュが無効になっている
-
COPY . .
を早い段階で実行すると、キャッシュが使えない。
-
-
npm install
に時間がかかる-
node_modules
のダウンロードが遅い。
-
🚀 高速化の方法
✅ 軽量なベースイメージを使う
FROM node:18-alpine # これでサイズが約1/10に!
✅ キャッシュを活用する
COPY package.json package-lock.json ./
RUN npm install
→ package.json
だけを先にコピーすることで、キャッシュが効く。
✅ マルチステージビルドを活用
FROM node:18-alpine AS builder
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "run", "dev"]
→ builder
ステージを使って無駄なファイルを減らす。
📌 7. 実際のトラブルとその解決策
✅ docker ps -a
でコンテナが Exited
なら docker logs
でログを確認
✅ package.json
が空なら npm init -y
で再作成
✅ docker-compose build
→ docker-compose up -d
で再起動
📌 8. まとめ
Dockerを使えば 環境を統一し、スムーズな開発ができる! 🚀
docker compose
を活用し、ビルドを最適化すれば、開発効率が向上! 🎉