DevContainerの基礎知識：開発環境をコードで定義する

概要

チーム開発では、メンバーごとに開発環境が異なることで「自分の環境では動くのに」という問題が発生しがちです。また、ローカル環境への直接セットアップは手順が複雑で、新メンバーのオンボーディングにも時間がかかります。

DevContainerは、開発環境をコードとして定義し、チーム全員が同じ環境で作業できる仕組みを提供します。

この記事では、DevContainerの基本的な仕組みと設定方法を紹介します。ローカル環境とクラウド環境の両方での使い方、VS CodeやGitHub Copilotとの統合方法を説明します。

DevContainerとは

DevContainerは、Dockerコンテナを使用して開発環境の構成をコードとして定義する仕組みです。
.devcontainer/devcontainer.jsonファイルに環境設定を記述することで、チーム全員が同じ開発環境を使用でき、環境構築の自動化を実現します。

2019年5月にMicrosoftがVisual Studio CodeのRemote Development拡張機能の一部として発表し、その後オープン仕様化されてDevelopment Containers Specificationとして標準化されました。

DevContainerの利点

DevContainerを活用して環境を構築することで、チーム開発の効率化と環境の一貫性を実現できます。

• チーム全員が同じ開発環境を使用
• どこでも同じ環境を再構築可能
• プロジェクトごとに独立した環境を維持
• 環境構築手順をコード化し、手動作業を排除

通常のDockerと比較したときの利点

通常のDockerでは、これらの設定を毎回手動で行うか、独自のセットアップスクリプトを作成する必要がありますが、Dockerと比較してDevContainerを使用することで以下のような利点があります。

• VS Code環境の自動構成：
  ESLint、Prettier、Tailwind CSS IntelliSenseなどの拡張機能が初回起動時に自動インストールされる
• 開発ツールの統合：
  GitHub Copilotがコンテナ内のツール・ライブラリを認識し、適切なコード補完を提供。ターミナル、IntelliSense、デバッガー、Lintがコンテナ内で自動的に動作
• 設定の一元管理：
  VS Codeの設定、拡張機能、環境変数、ポートフォワーディングなどをすべてdevcontainer.jsonで管理

DevContainerの実行環境

DevContainerは、ローカルとクラウドの両方で実行できます。同じdevcontainer.jsonをどちらの環境でも使用できるため、環境を切り替えても一貫した開発体験が得られます。

devcontainer.jsonの基本構成

.devcontainer/devcontainer.jsonは、開発環境の設定を記述するJSONファイルです。

基本的な構造

{
  "name": "プロジェクト名",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": []
    }
  },
  "forwardPorts": [3000]
}

主要なフィールド

※ image、build、dockerComposeFileのいずれか1つを指定する必要があります。

詳細な設定項目については、Development Containers Specification - JSON Referenceを参照してください。

イメージの指定方法

事前構築されたイメージを使用する場合は、公式のDevContainerイメージを指定します。

{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20"
}

カスタムDockerfileを使用する場合は、buildフィールドを使用します。

{
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  }
}

• Docker Hub
• Microsoft VS Code DevContainers

複数コンテナを使用する例

データベースを含む環境は、Docker Composeを使用します。serviceフィールドで指定したコンテナがDevContainerとして機能し、VS Codeから接続されます。

この例では、appサービスがDevContainerとなり、VS Codeはこのコンテナに接続します。dbサービスは別コンテナとして起動し、appコンテナからdb:5432でアクセスできます。

{
  "name": "Next.js with PostgreSQL",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "postCreateCommand": "npm install",
  "forwardPorts": [3000, 5432]
}

services:
  app:
    image: mcr.microsoft.com/devcontainers/typescript-node:20
    volumes:
      - ..:/workspace:cached
    command: sleep infinity
    depends_on:
      - db
  
  db:
    image: postgres:16
    ...

• 開発コンテナーの概要
• VS Code - Use Docker Compose

Next.jsの設定例

Next.js用の一般的なDevContainer設定例です。

{
  "name": "Next.js Project",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
      },
      "extensions": [
        "github.copilot",
        "github.copilot-chat",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss"
      ]
    }
  },
  "forwardPorts": [3000]
}

GitHub Codespacesでは、GitHub Copilotのサブスクリプションを持っている場合、github.copilotとgithub.copilot-chatは自動的に有効化されることがあります。

まとめ

DevContainerは、開発環境をコードで定義する仕組みとしてとても便利ですね。
ローカル環境とクラウド環境のどちらでも同じ設定を使用でき、VS CodeやGitHub Copilotなどの開発ツールとの統合もスムーズに行えるので、今後は積極的に活用していこうと思います。

参考リンク

• Development Containers Specification
• VS Code Dev Containers Documentation
• GitHub Codespaces Documentation