⛳

Windows環境での個人開発：Docker Composeで快適な開発環境を構築

に公開
Next.js
Windows
docker-compose
FastAPI
tech

はじめに

個人開発で複数のサービス（フロントエンド、バックエンドなど）を扱う場合、環境構築が面倒だと感じたことはありませんか？特にWindows環境では、様々な依存関係の設定に時間を取られがちです。

今回は、自分のlanguage-converterプロジェクトを例に、Docker Composeを使った効率的な開発環境構築について紹介します。

プロジェクト概要

language-converterは、中国語のテキストを日本語（ひらがな/カタカナ）とローマ字に変換するWebアプリケーションです。

  • フロントエンド: Next.js (TypeScript)
  • バックエンド: FastAPI (Python)
  • データベース: なし（シンプルな変換機能のみ）

Docker環境の準備

まずはDocker Desktopのインストールから始めましょう。

Docker Desktopのインストール

Docker Desktop for Windowsからインストーラーをダウンロードして実行します。

インストール後、PowerShellで以下のコマンドを実行して動作確認します：

docker --version
docker-compose --version

プロジェクト構造

プロジェクトのディレクトリ構造は以下のようになっています：

language-converter/
├── docker-compose.yml
├── backend-fastapi/
│   ├── Dockerfile
│   ├── requirements.txt
│   └── app/
│       ├── main.py
│       └── name_mapping.py
└── frontend/
    ├── Dockerfile
    ├── package.json
    └── src/
        └── app/
            └── page.tsx

Dockerfileの実装

バックエンドのrequirements.txt

backend-fastapi/requirements.txt
fastapi
uvicorn[standard]
python-multipart
fugashi
unidic-lite
romkan
deep_translator
requests

バックエンドのDockerfile

backend-fastapi/Dockerfile
FROM python:3.11-slim

WORKDIR /app

RUN apt-get update && apt-get install -y --no-install-recommends \
    gcc \
    g++ \
    make \
    curl \
    git \
    mecab \
    libmecab-dev \
    mecab-ipadic \
    && rm -rf /var/lib/apt/lists/*

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

RUN python -c "import unidic_lite; print('Unidic-lite initialized successfully')"


COPY . .


ENV MECABRC=""
ENV MECAB_DICDIR="/usr/lib/x86_64-linux-gnu/mecab/dic/ipadic"

CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000", "--log-level", "debug"]

フロントエンドのDockerfile

frontend/Dockerfile
# Stage 1: Build the Next.js application
FROM node:18-alpine AS builder
WORKDIR /app

# Copy package.json and package-lock.json first to leverage Docker cache
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy the rest of the application code
COPY . .

# Build the application
RUN npm run build

# Stage 2: Serve the application with a lightweight web server
FROM node:18-alpine AS runner
WORKDIR /app

# Copy built files and node_modules from builder stage
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package*.json ./

# Set environment variables
ENV NODE_ENV=production
ENV NEXT_PUBLIC_API_URL=http://backend:8000

# Expose port 3000
EXPOSE 3000

# Start the Next.js application
CMD ["npm", "start"]

docker-compose.ymlの設定

プロジェクトのルートにdocker-compose.ymlファイルを作成します：

docker-compose.yml
version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_API_URL=http://backend:8000
    depends_on:
      - backend

  backend:
    build: ./backend-fastapi
    ports:
      - "8000:8000"
    environment:
      - PYTHONUNBUFFERED=1
    healthcheck:
      test: ["CMD", "curl", "--fail", "http://localhost:8000/docs", "||", "exit", "1"]
      interval: 30s
      timeout: 10s
      retries: 3

アプリケーションコード

バックエンド（FastAPI）

backend-fastapi/app/main.py

フロントエンド（Next.js）

frontend/src/app/page.tsx

アプリケーションの実行

プロジェクトのルートディレクトリで以下のコマンドを実行します：

# コンテナのビルドと起動
docker-compose up --build

# バックグラウンドで実行する場合
docker-compose up -d

# ログの確認
docker-compose logs -f

# サービスの停止
docker-compose down

起動後、以下のURLでアプリケーションにアクセスできます：

Docker Composeを使うメリット

1. 環境の統一

開発者ごとの環境差異を解消できます。Dockerfileに必要な依存関係を定義しておくことで、どのマシンでも同じ環境で開発できます。

2. 依存関係の管理

バックエンドのPythonパッケージやフロントエンドのnpmパッケージをコンテナ内で管理できるため、ホストマシンをクリーンに保てます。

3. サービスの連携

depends_onを使ってサービスの起動順序を制御できます。例えば、フロントエンドがバックエンドの起動を待ってから起動するように設定できます。

4. ホットリロードの対応

ボリュームマウントを使うことで、ソースコードの変更をリアルタイムで反映できます。開発中の効率が大幅に向上します。

開発時の便利なコマンド

# 特定のサービスのみ再ビルド
docker-compose build frontend

# 実行中のコンテナに入る
docker-compose exec backend bash

おわりに

Docker Composeを使うことで、Windows環境での個人開発が格段に楽になります。環境構築の手間が減り、本質的なコーディングに集中できるようになります。

特に複数のサービスを扱うプロジェクトでは、その効果を実感できるでしょう。ぜひ自分のプロジェクトでも試してみてください。

参考リンク

この記事が、WindowsでのDocker開発の参考になれば幸いです。初心者なので！何か質問があれば、コメントでお知らせください！

Discussion