🚀 Dockerでフロントエンド開発環境を構築する

個人開発を趣味で始めたいと思います。
そこで調査したことを備忘録としてまとめようと思います。

個人開発は企画からリリースまで一気通貫で行います。
そのため一連の記事をご覧いただけると、開発フローがイメージしやすく初心者の方でも開発が身近なものになるのではないかと思います。

今後の記事作成のモチベーションのためにも、いいねをいただけますと幸いです！
以下本編です。

※ なお、記事はAI生成ですが草稿は私が書いたものになっています。

この記事では、Dockerを使ってフロントエンド開発環境を構築する方法を備忘録としてまとめます。
また、docker compose の使い方や package.json の役割、docker コマンドの基本、docker build の遅さの原因と改善策についても詳しく解説します。

---

📌 目次

1. Dockerを使ってフロントエンド開発環境を構築する理由
2. Dockerfile.dev と docker-compose.dev.yml の解説
3. package.json の役割と記述内容
4. Docker Compose と docker compose の違い
5. Docker コマンドの基本
6. Docker Build が遅い理由と高速化の方法
7. 実際のトラブルとその解決策
8. まとめ

---

🎯 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 が遅い理由と高速化の方法

💥 遅い理由

1. イメージサイズが大きい
   • node:18 などの 大きなベースイメージ を使用すると遅くなる。
2. キャッシュが無効になっている
   • COPY . . を早い段階で実行すると、キャッシュが使えない。
3. 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 を活用し、ビルドを最適化すれば、開発効率が向上！ 🎉