Dev Containersで開発環境を統一する - 環境構築の悩みを解決

はじめに

「このプロジェクト、私のマシンでは動かないんです...」「新しいメンバーの環境構築に丸一日かかりました」このような経験はありませんか？開発チームが抱える環境構築の課題を解決する強力なツールがDev Containersです。

Dev Containersは、開発環境をDockerコンテナ内で統一し、チーム全体で同じ環境を共有できる仕組みです。Visual Studio CodeやGitHub Codespacesと組み合わせることで、誰でも簡単に一貫した開発環境を構築できます。

Dev Containersとは

Dev Containers（Development Containers）は、開発環境をコンテナ化する仕様です。プロジェクトのルートディレクトリに.devcontainerフォルダを配置し、その中で環境の設定を定義します。

主な特徴

環境の統一: チーム全員が同じ開発環境で作業できます。OSやツールのバージョン違いによる問題を回避できます。

簡単なセットアップ: 新しいメンバーは、リポジトリをクローンしてコンテナを起動するだけで開発を始められます。

分離された環境: プロジェクトごとに独立した環境を持てるため、他のプロジェクトとの干渉を防げます。

クラウド対応: GitHub CodespacesやGitpodなどのクラウド開発環境でも同じ設定を使用できます。

基本的な構成

Dev Containersの設定は.devcontainerディレクトリ内のdevcontainer.jsonファイルで行います。

project-root/
├── .devcontainer/
│   ├── devcontainer.json
│   └── Dockerfile (オプション)
├── src/
└── README.md

devcontainer.jsonの基本構造

{
  "name": "My Project",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "forwardPorts": [3000],
  "postCreateCommand": "npm install"
}

実践的な設定例

Node.js開発環境

{
  "name": "Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss",
        "ms-vscode.vscode-json"
      ],
      "settings": {
        "typescript.preferences.quoteStyle": "single",
        "editor.formatOnSave": true
      }
    }
  },
  "forwardPorts": [3000, 5000],
  "postCreateCommand": "npm install && npm run build",
  "remoteUser": "node"
}

Python開発環境

{
  "name": "Python Development",
  "image": "mcr.microsoft.com/devcontainers/python:3.11",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.pylint",
        "ms-python.black-formatter",
        "ms-toolsai.jupyter"
      ]
    }
  },
  "postCreateCommand": "pip install -r requirements.txt",
  "remoteUser": "vscode"
}

カスタムDockerfileを使用した環境

複雑な環境が必要な場合は、カスタムDockerfileを作成できます。

FROM mcr.microsoft.com/devcontainers/base:ubuntu

# 必要なパッケージをインストール
RUN apt-get update && apt-get install -y \
    build-essential \
    curl \
    git \
    && rm -rf /var/lib/apt/lists/*

# Node.jsをインストール
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
    && apt-get install -y nodejs

# Pythonをインストール
RUN apt-get update && apt-get install -y python3 python3-pip

USER vscode

対応するdevcontainer.json:

{
  "name": "Custom Environment",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "features": {
    "ghcr.io/devcontainers/features/git:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "ms-python.python"
      ]
    }
  },
  "postCreateCommand": "npm install && pip install -r requirements.txt"
}

Featuresの活用

Dev Container Featuresは、環境に追加機能を簡単にインストールできる仕組みです。

よく使用されるFeatures

{
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/aws-cli:1": {},
    "ghcr.io/devcontainers/features/terraform:1": {
      "version": "1.5"
    },
    "ghcr.io/devcontainers/features/kubectl-helm-minikube:1": {}
  }
}

Docker Composeとの組み合わせ

複数のサービスが必要なプロジェクトでは、Docker Composeと組み合わせて使用できます。

docker-compose.yml

version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ..:/workspaces:cached
    command: sleep infinity
    depends_on:
      - db
      - redis

  db:
    image: postgres:15
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    volumes:
      - postgres-data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine

volumes:
  postgres-data:

devcontainer.json

{
  "name": "Full Stack Development",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspaces",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "ms-python.python"
      ]
    }
  },
  "forwardPorts": [3000, 5432, 6379],
  "postCreateCommand": "npm install"
}

VS Codeでの使用方法

拡張機能のインストール

Dev Container拡張機能をインストールします：

拡張機能タブで「Dev Containers」を検索
Microsoftが提供する「Dev Containers」拡張機能をインストール

コンテナでの開発開始

プロジェクトをVS Codeで開く
コマンドパレット（Ctrl+Shift+P）を開く
「Dev Containers: Reopen in Container」を実行
コンテナがビルドされ、コンテナ内でVS Codeが開く

リモートでの開発

{
  "remoteUser": "vscode",
  "workspaceFolder": "/workspace",
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached"
  ]
}

最適化のテクニック

ビルド時間の短縮

{
  "build": {
    "dockerfile": "Dockerfile",
    "context": "..",
    "args": {
      "BUILDKIT_INLINE_CACHE": "1"
    }
  },
  "mounts": [
    "source=devcontainer-cache,target=/var/cache,type=volume"
  ]
}

環境変数の設定

{
  "containerEnv": {
    "NODE_ENV": "development",
    "DEBUG": "app:*"
  },
  "remoteEnv": {
    "PATH": "${containerEnv:PATH}:/usr/local/bin"
  }
}

パフォーマンス向上

{
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",
    "source=node_modules,target=/workspace/node_modules,type=volume"
  ],
  "runArgs": ["--cpus=2", "--memory=4g"]
}

チーム運用のベストプラクティス

バージョン管理

devcontainer.jsonはバージョン管理に含めて、チーム全体で同じ設定を共有します。

{
  "name": "Project v2.1",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:18-bullseye",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {
      "version": "2.40"
    }
  }
}

ドキュメント化

READMEファイルに環境構築手順を記載します：

## 開発環境セットアップ

1. VS CodeのDev Containers拡張機能をインストール
2. このリポジトリをクローン
3. VS Codeで開き、「Reopen in Container」を実行
4. `npm start`で開発サーバーを起動

CI/CDとの統合

# .github/workflows/test.yml
name: Test
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Build Dev Container
        uses: devcontainers/ci@v0.3
        with:
          imageName: my-project-dev
          runCmd: npm test

トラブルシューティング

よくある問題と解決方法

コンテナが起動しない

Dockerが正しく動作しているか確認
.devcontainer/devcontainer.jsonの構文エラーをチェック
イメージの存在確認

拡張機能が動作しない

customizations.vscode.extensionsに適切に記載されているか確認
拡張機能の依存関係を確認

ファイルの変更が反映されない

マウント設定を確認
ファイル監視の制限を確認

デバッグ設定

{
  "customizations": {
    "vscode": {
      "launch": {
        "version": "0.2.0",
        "configurations": [
          {
            "name": "Debug Node.js",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/src/index.js",
            "env": {
              "NODE_ENV": "development"
            }
          }
        ]
      }
    }
  }
}

まとめ

Dev Containersは、開発環境の統一と効率化を実現する強力なツールです。適切に設定することで、チーム全体の生産性向上とオンボーディングの簡素化を実現できます。

小さなプロジェクトから始めて、徐々に設定を充実させていくことをお勧めします。チーム内で設定を共有し、継続的に改善していくことで、より良い開発体験を構築できるでしょう。

Dev Containersを活用して、「環境構築で困る」ことのない、スムーズな開発フローを実現してください。