Dev Container & Docker操作完全手順書

はじめに

この記事では、Dev Container（Development Containers）とDockerを使った開発環境の構築から削除まで、実際の操作手順を詳しく解説します。複数のコンテナ環境を管理する方法や、トラブルシューティングも含めた完全ガイドです。

---

目次

1. Dev Containerとは
2. プロジェクトの準備
3. 複数コンテナ設定の作成
4. コンテナの起動・切り替え
5. コンテナの停止・削除
6. トラブルシューティング

---

1. Dev Containerとは {#devcontainer}

Dev Containers（Development Containers）は、開発環境をDockerコンテナで標準化する仕組みです。VSCodeと連携して、プロジェクトごとに独立した開発環境を提供します。

主な利点

利点	説明
環境分離	プロジェクトごとに完全に独立した環境
再現性	チーム全体で同一環境での開発が可能
切り替え	VSCodeで瞬時に異なる環境に切り替え
標準化	設定ファイルによる環境のコード化

従来の開発環境との違い

従来の方法:

• ローカルにNode.js、Python、Rubyなど複数インストール
• バージョン管理ツール（nvm、pyenv等）で切り替え
• プロジェクト間でのライブラリ競合

Dev Containers:

• プロジェクトごとに完全分離されたコンテナ環境
• 設定ファイル（devcontainer.json）で環境を定義
• チーム全体で同一環境の保証

---

2. プロジェクトの準備 {#prepare}

2.1 前提条件

以下がインストール済みであることを確認してください：

• ✅ Docker Desktop for Windows または WSL2 + Docker
• ✅ Visual Studio Code
• ✅ Dev Containers拡張機能 (ms-vscode-remote.remote-containers)

2.2 基本的なプロジェクト構造

your-project/
├── .devcontainer/
│   ├── devcontainer.json    # 必須設定ファイル
│   ├── docker-compose.yml   # 複数コンテナ用（オプション）
│   └── Dockerfile          # カスタムイメージ用（オプション）
├── src/                     # ソースコード
├── package.json            # Node.jsプロジェクトの場合
└── README.md

2.3 最初の設定ファイル作成

プロジェクトルートに .devcontainer フォルダを作成：

mkdir .devcontainer
cd .devcontainer

---

3. 複数コンテナ設定の作成 {#multiple}

3.1 設定方法の選択

複数の開発環境を管理する方法は主に2つあります：

方法1: プロジェクトごとに分離（推奨）

projects/
├── react-map-app/
│   └── .devcontainer/
│       └── devcontainer.json    # React用設定
├── rails-api/
│   └── .devcontainer/
│       └── devcontainer.json    # Rails用設定
└── python-research/
    └── .devcontainer/
        └── devcontainer.json    # Python用設定

方法2: 同一プロジェクト内で複数設定

my-project/
├── .devcontainer/
│   ├── devcontainer.json        # デフォルト設定
│   ├── frontend/
│   │   └── devcontainer.json    # フロントエンド専用
│   ├── backend/
│   │   └── devcontainer.json    # バックエンド専用
│   └── fullstack/
│       ├── devcontainer.json    # フルスタック
│       └── docker-compose.yml

3.2 React開発環境の設定例

.devcontainer/devcontainer.json

{
  "name": "React Development Environment",
  "image": "node:18",
  "workspaceFolder": "/workspace",
  "forwardPorts": [3000],
  "postCreateCommand": "npm install",
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind"
  ],
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "terminal.integrated.defaultProfile.linux": "bash",
        "editor.formatOnSave": true
      }
    }
  }
}

3.3 フルスタック環境（React + Rails + PostgreSQL）

.devcontainer/fullstack/devcontainer.json

{
  "name": "React + Rails + PostgreSQL",
  "dockerComposeFile": "docker-compose.yml",
  "service": "frontend",
  "workspaceFolder": "/workspace",
  "forwardPorts": [3000, 3001, 5432],
  "postCreateCommand": "npm install"
}

.devcontainer/fullstack/docker-compose.yml

version: '3.8'

services:
  frontend:
    image: node:18
    working_dir: /workspace
    ports:
      - "3000:3000"
    volumes:
      - ../..:/workspace
    command: sleep infinity

  backend:
    image: ruby:3.2
    working_dir: /workspace/api
    ports:
      - "3001:3001"
    depends_on:
      - postgres
    environment:
      - DATABASE_URL=postgresql://postgres:postgres@postgres:5432/myapp_development

  postgres:
    image: postgis/postgis:15-3.3
    restart: unless-stopped
    environment:
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_DB=myapp_development
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

3.4 Python + Jupyter環境

.devcontainer/python/devcontainer.json

{
  "name": "Python Research Environment",
  "image": "python:3.11",
  "workspaceFolder": "/workspace",
  "forwardPorts": [8888],
  "postCreateCommand": "pip install jupyter pandas numpy matplotlib biopython",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-toolsai.jupyter"
      ]
    }
  }
}

---

4. コンテナの起動・切り替え {#start}

4.1 基本的な起動手順

ステップ1: プロジェクトをVSCodeで開く

code /path/to/your/project

ステップ2: Dev Containerを起動

1. Ctrl+Shift+P でコマンドパレットを開く
2. 「Dev Containers: Reopen in Container」を選択
3. 初回はコンテナのビルド処理が実行される（数分かかる場合があります）

4.2 複数設定がある場合の選択

複数のdevcontainer.json設定がある場合、以下のダイアログが表示されます：

選択肢	説明	推奨度
定義済み構成（workspace）	既存のdevcontainer.json設定を使用	⭐⭐⭐
定義済みテンプレート	VSCode内蔵テンプレートを使用	⭐⭐
Dockerfileから	プロジェクト内のDockerfileを使用	⭐
docker-compose.yamlから	docker-compose設定を使用	⭐⭐

💡 推奨: 「定義済み構成 (workspace [関連コンテナー: プロジェクト名])」を選択

4.3 異なる環境への切り替え

1. Ctrl+Shift+P
2. 「Dev Containers: Open Folder in Container…」
3. 使用したい設定のフォルダを選択：

• .devcontainer/frontend/
• .devcontainer/backend/
• .devcontainer/fullstack/

4.4 起動後の確認

コンテナが正常に起動したら：

# Node.jsの場合
node --version
npm --version

# Pythonの場合
python --version
pip --version

# 開発サーバー起動
npm start  # または python app.py

---

5. コンテナの停止・削除 {#stop}

5.1 停止と削除の違い

操作	停止（Stop）	削除（Remove）
コンテナ状態	残存している	完全に削除される
データ・設定	保持される	消失する
インストールしたパッケージ	保持される	消失する
再起動	可能（高速起動）	新規作成が必要
用途	一時的な作業中断	クリーンな再開・設定変更時
起動時間	数秒	数分（再ビルド）

5.2 VSCode内での操作

方法1: コマンドパレット（推奨）

停止:

Ctrl+Shift+P → "Dev Containers: Reopen Folder Locally"

削除・再構築:

Ctrl+Shift+P → "Dev Containers: Rebuild Container"

方法2: Docker拡張機能

1. VSCode左サイドバーのDocker拡張アイコンをクリック
2. Containersセクションでコンテナを右クリック
3. StopまたはRemoveを選択

5.3 コマンドライン操作

現在動作中のコンテナ確認

# 起動中コンテナ一覧
docker ps

# 全コンテナ一覧（停止中含む）
docker ps -a

個別コンテナ操作

# 特定コンテナの停止
docker stop <CONTAINER_ID>

# 特定コンテナの削除（停止後）
docker rm <CONTAINER_ID>

# 停止と削除を同時実行
docker rm -f <CONTAINER_ID>

一括操作

# 全コンテナ停止
docker stop $(docker ps -q)

# 停止中コンテナを全削除
docker rm $(docker ps -aq)

# 未使用イメージ削除
docker image prune

# 完全クリーンアップ（注意: 全データ削除）
docker system prune -a --volumes

5.4 使い分けの指針

停止を選ぶ場面

• ✅ 昼休みや一時的な作業中断
• ✅ 他のプロジェクトに切り替える時
• ✅ 環境設定やパッケージを保持したい
• ✅ 明日また同じ環境で作業予定

削除を選ぶ場面

• ✅ devcontainer.jsonの設定を変更した
• ✅ 環境に問題が発生した
• ✅ クリーンな状態で再開したい
• ✅ 不要なパッケージを削除したい

---

6. トラブルシューティング {#trouble}

6.1 よくある問題と解決法

問題	症状	解決法
コンテナビルドエラー	「Build failed」エラー	devcontainer.jsonの構文確認、Rebuild Container
VSCode接続エラー	「Cannot connect to container」	VSCode完全終了→Docker再起動→VSCode再起動
ポート競合	「Port already in use」	他のプロセス停止、またはポート番号変更
権限エラー	「Permission denied」	Dockerグループ追加: sudo usermod -aG docker $USER
メモリ不足	コンテナが頻繁に停止	Docker Desktopのメモリ制限を増加
ネットワークエラー	インターネット接続不可	Docker Desktopのネットワーク設定確認

6.2 詳細なトラブルシューティング

Docker権限問題（WSL2）

# 現在のユーザーをdockerグループに追加
sudo usermod -aG docker $USER

# WSL再起動
wsl --shutdown
# WSLを再起動後

# 動作確認
docker ps

VSCodeエラーの解決

# 1. VSCodeプロセス確認・終了
pkill -f "Code"

# 2. Docker完全再起動
docker stop $(docker ps -q)
docker system prune

# 3. VSCode再起動
code .

ポート競合の確認・解決

# ポート使用状況確認
netstat -tulpn | grep :3000

# プロセス終了
kill -9 <PID>

# または devcontainer.json でポート変更
"forwardPorts": [3001]  # 3000 → 3001

6.3 完全リセット手順

環境を完全にリセットする場合：

# 1. 全コンテナ停止・削除
docker stop $(docker ps -q)
docker rm $(docker ps -aq)

# 2. 全イメージ削除
docker rmi $(docker images -q)

# 3. ボリューム・ネットワーク削除
docker system prune -a --volumes

# 4. Docker Desktop再起動
# → Docker Desktopを完全終了・再起動

# 5. VSCode拡張機能再インストール
# → Dev Containers拡張を無効化→有効化

6.4 パフォーマンス最適化

Dockerリソース設定

Docker Desktop設定：

• メモリ: 8GB以上（推奨）
• CPU: 4コア以上
• ディスク容量: 50GB以上

devcontainer.json最適化

{
  "name": "Optimized Container",
  "image": "node:18-alpine",  // Alpine版で軽量化
  "postCreateCommand": "npm ci",  // npm install より高速
  "mounts": [
    "source=node_modules,target=/workspace/node_modules,type=volume"
    // node_modulesをボリュームマウントで高速化
  ]
}

---

まとめ

Dev Containersを活用することで、以下のメリットを享受できます：

✅ 開発環境の標準化

• チーム全体で同一環境
• 新メンバーのオンボーディング高速化
• 「動かない」問題の根絶

✅ プロジェクト管理の簡素化

• 環境切り替えが瞬時
• バージョン競合の回避
• クリーンな環境での検証

✅ 効率的な学習環境

• 異なる技術スタックを並行学習
• 実験的な設定での試行錯誤
• 本番環境に近い構成での開発

この手順書で紹介した操作方法を活用し、適切な停止・削除の使い分けにより、効率的な開発環境管理を実現してください。

Dev Containersは現代的な開発手法として、多くのプロジェクトで採用されています。一度慣れてしまえば、従来のローカル環境での開発には戻れないほど便利です。

---

📝 関連記事

• Docker入門ガイド
• VSCode開発環境構築
• React開発環境設定

🏷️ タグ

DevContainer #Docker #VSCode #開発環境 #環境構築