Run Docker

Docker 環境実行スキル

Docker Compose を使って開発・本番環境を管理します。

起動コマンド

# 開発モード（ホットリロード）
docker compose up

# 開発モード（バックグラウンド）
docker compose up -d

# 本番モード（最適化ビルド）
docker compose -f docker-compose.yml up

スクリプトも使用可能:

./scripts/docker-dev.sh   # 開発モード
./scripts/docker-prod.sh  # 本番モード

モードの違い

ポート一覧（開発モード）

よく使うコマンド

# ログ確認
docker compose logs -f
docker compose logs -f frontend
docker compose logs -f backend

# 特定サービスを再ビルド
docker compose build backend
docker compose build frontend

# 停止・削除
docker compose down

# 停止・ボリューム削除（DB リセット）
docker compose down -v

設定ファイル構成

project-root/
├── docker-compose.yml           # ベース設定（本番相当）
├── docker-compose.override.yml  # 開発用オーバーライド（自動適用）
└── nginx.conf                   # リバースプロキシ設定

なぜ Nginx?: NEXT_PUBLIC_API_URL はビルド時にバンドルされるため、Docker 内部ホスト名（http://backend:8080）はブラウザから解決できない。Nginx を挟むことで単一アクセスポイントを提供し、CORS 問題も解消。

環境変数設定

frontend/.env.local を使用（開発モードで自動マウント）:

cp frontend/.env.local.example frontend/.env.local
vim frontend/.env.local

優先度（高→低）:

1. docker-compose.override.yml
2. .env.local
3. docker-compose.yml

注意: NEXT_PUBLIC_* 変数はビルド時に埋め込まれるため、変更後は docker compose build frontend が必要。

npm パッケージの追加

# 1. package.json を編集
# 2. 実行中コンテナ内でインストール（再ビルド不要）
docker exec sandbox-frontend pnpm install

トラブルシューティング

Source: nagashima-toru/sandbox-claude-code — distributed by TomeVault.