Dockerコンテナの中で直接コードを編集したり、デバッグしたりできたら便利だと思いませんか？VS Codeの「Dev Containers」拡張機能を使えば、コンテナ内の環境にVS Codeから直接接続して、まるでローカルで作業しているかのように開発ができます。この記事では、その設定方法と使い方をステップバイステップで解説します。

管理人

Dev Containersを使うと、コンテナの中をVS Codeで直接操作できるので、ターミナルで<code>docker exec</code>する手間がなくなります。開発効率が一気に上がりますよ！

前提条件

この記事の手順を進めるには、以下が必要です。

DockerやDocker Desktopのインストールがまだの方は、先にインストールを済ませておいてください。

Dev Containers拡張機能とは

Dev Containers（旧称: Remote – Containers）は、Microsoftが提供するVS Codeの拡張機能です。この拡張機能を使うと、Dockerコンテナの内部をVS Codeのワークスペースとして開くことができます。

主な特徴は以下の通りです。

• コンテナ内のファイルをVS Codeで直接編集できる
• コンテナ内のターミナルをVS Code上で使える
• コンテナ内にVS Codeの拡張機能をインストールできる
• コンテナを「開発環境」として定義・共有できる

Dev Containers拡張機能のインストール

1. 拡張機能をインストール

1. VS Codeを起動します
2. サイドバーの拡張機能アイコン（四角が4つ並んだマーク）をクリックするか、Ctrl + Shift + X を押します
3. 検索バーに「Dev Containers」と入力します
4. Microsoft製の「Dev Containers」拡張機能を見つけて「Install」をクリックします

インストールが完了すると、VS Codeの左下に緑色のアイコン（><のようなマーク）が表示されます。これがリモート接続のステータスインジケーターです。

2. Docker Desktopの起動確認

Dev Containersを使うには、Docker Desktopが起動している必要があります。タスクバー（Windows）またはメニューバー（macOS）にDockerのクジラアイコンが表示され、「Engine running」の状態であることを確認してください。

実行中のコンテナに接続する方法

すでに docker run や docker compose up で起動しているコンテナに、VS Codeから接続する方法です。

1. コンテナを起動する

まず、接続先のコンテナを起動します。例として、Ubuntuコンテナをバックグラウンドで起動します。

docker run -dit --name my-dev-container ubuntu:22.04

Docker Composeを使っている場合は、以下のように起動します。

docker compose up -d

2. VS Codeからコンテナに接続する

1. VS Codeの左下にある緑色のアイコンをクリックします
2. 表示されるメニューから「Attach to Running Container…」を選択します
3. 実行中のコンテナの一覧が表示されるので、接続したいコンテナを選択します
4. 新しいVS Codeウィンドウが開き、コンテナ内の環境に接続されます

接続が完了すると、VS Codeの左下のインジケーターに「Container <コンテナ名>」と表示されます。

3. フォルダを開く

接続後、VS Codeの「File」→「Open Folder…」でコンテナ内の任意のディレクトリを開けます。例えば /root や /app などを開くと、コンテナ内のファイルを直接編集できます。

devcontainer.jsonを使った開発環境の定義

プロジェクトごとに開発用のコンテナ環境を定義しておくと、チームメンバー全員が同じ環境で開発できます。これを実現するのが devcontainer.json ファイルです。

1. 設定ファイルの作成

プロジェクトのルートディレクトリに .devcontainer フォルダを作成し、その中に devcontainer.json ファイルを配置します。

your-project/
├── .devcontainer/
│   └── devcontainer.json
├── src/
│   └── ...
└── ...

2. devcontainer.jsonの記述例

既存のDockerイメージを使う場合

{
  "name": "My Dev Environment",
  "image": "mcr.microsoft.com/devcontainers/python:3.12",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.pylint"
      ],
      "settings": {
        "python.defaultInterpreterPath": "/usr/local/bin/python"
      }
    }
  },
  "postCreateCommand": "pip install -r requirements.txt"
}

Dockerfileを使う場合

{
  "name": "Custom Dev Environment",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "forwardPorts": [3000],
  "postCreateCommand": "npm install"
}

Docker Composeを使う場合

{
  "name": "Docker Compose Dev",
  "dockerComposeFile": "../compose.yml",
  "service": "web",
  "workspaceFolder": "/app",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python"
      ]
    }
  }
}

3. 主要な設定項目の解説

4. Dev Containerを起動する

1. VS Codeでプロジェクトフォルダを開きます
2. Ctrl + Shift + P（macOSの場合は Cmd + Shift + P）でコマンドパレットを開きます
3. 「Dev Containers: Reopen in Container」を選択します
4. コンテナのビルドと起動が自動的に行われ、完了するとコンテナ内の環境でVS Codeが開きます

よく使う操作

コンテナ内でターミナルを使う

VS Code内でターミナルを開くと、自動的にコンテナ内のシェルが起動します。

Ctrl + ` （バッククォート）

ターミナル上でコンテナ内のコマンドを直接実行できます。

ポートフォワーディング

コンテナ内で起動したWebサーバーなどに、ホスト側のブラウザからアクセスするには、ポートフォワーディングを設定します。

1. VS Codeのポートパネル（Ctrl + Shift + P → 「Ports: Focus on Ports View」）を開きます
2. 「Forward a Port」をクリックし、転送するポート番号を入力します
3. ブラウザで http://localhost:<ポート番号> にアクセスできるようになります

devcontainer.json の forwardPorts に記述しておけば、自動的に転送されます。

コンテナから切断する

コンテナ内での作業を終了する場合は、以下の方法で切断します。

1. Ctrl + Shift + P でコマンドパレットを開く
2. 「Remote: Close Remote Connection」を選択する
3. または、VS Codeのウィンドウを閉じる

コンテナ自体は切断後も動作し続けます。停止したい場合は別途 docker stop コマンドを実行してください。

トラブルシューティング

「Docker is not running」と表示される

Docker Desktopが起動していません。Docker Desktopを起動し、エンジンが「running」状態になるまで待ってから再試行してください。

コンテナへの接続が遅い

初回接続時は、VS Code Serverのインストールが行われるため時間がかかる場合があります。2回目以降はキャッシュが使われるため高速になります。

拡張機能がコンテナ内で動作しない

一部の拡張機能はローカル専用で、コンテナ内では動作しません。devcontainer.json の customizations.vscode.extensions に拡張機能のIDを追加して、コンテナ内にインストールする必要があります。

拡張機能のIDは、VS Codeの拡張機能ページで確認できます（例: ms-python.python）。

ファイルの権限エラーが発生する

コンテナ内のユーザーとホスト側のユーザーのUID/GIDが異なる場合に発生することがあります。devcontainer.json で remoteUser を指定して対処します。

{
  "remoteUser": "vscode"
}

まとめ

• VS CodeのDev Containers拡張機能を使うと、Dockerコンテナ内で直接開発ができる
• 実行中のコンテナには「Attach to Running Container」で接続できる
• devcontainer.json を作成すると、チームで統一された開発環境を共有できる
• コンテナ内でもVS Codeの拡張機能やターミナルがそのまま使える
• ポートフォワーディングを設定すれば、コンテナ内のサーバーにホストからアクセス可能

管理人

Dev Containersを使いこなすと「環境構築で半日つぶれた…」なんてことがなくなります。devcontainer.jsonをプロジェクトに含めておけば、新メンバーもすぐに開発を始められますよ！

最後までお読みいただき、ありがとうございました！