VS Codeのエージェントモードを拡張するには、を試してください！

複数のコンテナーに接続する

現在、Visual Studio Code ウィンドウあたり1つのコンテナにのみ接続できます。ただし、複数のVS Codeウィンドウを立ち上げてそれらにアタッチすることは可能です。

代わりにdevcontainer.jsonを使用したい場合で、Docker Composeを使用している場合は、ソースツリー内の各サービスに対して個別のdevcontainer.jsonファイルを作成し、それぞれが共通のdocker-compose.ymlを指すようにすることができます。

これがどのように機能するかを見るために、この例のソースツリーを考えてみましょう。

📁 project-root
    📁 .git
    📁 .devcontainer
      📁 python-container
        📄 devcontainer.json
      📁 node-container
        📄 devcontainer.json
    📁 python-src
        📄 hello.py
    📁 node-src
        📄 hello.js
    📄 docker-compose.yml

.gitフォルダーの場所は重要です。なぜなら、ソース管理が正しく機能するためには、コンテナがこのパスを見ることができるようにする必要があるからです。

次に、ルートにあるdocker-compose.ymlが以下のようになっていると仮定します。

services:
  python-api:
    image: mcr.microsoft.com/devcontainers/python:1-3.12-bookworm
    volumes:
      # Mount the root folder that contains .git
      - .:/workspace
    command: sleep infinity
    # ...

  node-app:
    image: mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm
    volumes:
      # Mount the root folder that contains .git
      - .:/workspace
    command: sleep infinity
    # ...

次に、Python開発のために./devcontainer/python-container/devcontainer.jsonを次のように設定できます。

{
  "name": "Python Container",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "python-api",
  "shutdownAction": "none",
  "workspaceFolder": "/workspace/python-src"
}

次に、workspaceFolderを変更することで、Node.js開発のために./devcontainer/node-container/devcontainer.jsonを設定できます。

{
  "name": "Node Container",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "node-app",
  "shutdownAction": "none",
  "workspaceFolder": "/workspace/node-src"
}

devcontainer.jsonファイルの"shutdownAction": "none"はオプションですが、VS Codeが閉じてもコンテナを起動したままにします。これにより、1つのウィンドウを閉じることで両方のコンテナを誤ってシャットダウンすることを防ぎます。

複数のVS Codeウィンドウで複数のコンテナに接続する

  1. プロジェクトのルートレベルでVS Codeウィンドウを開きます。
  2. コマンドパレット（F1）からDev Containers: Reopen in Containerを実行し、Python Containerを選択します。
  3. VS Codeは両方のコンテナを起動し、現在のウィンドウを再読み込みして、選択したコンテナに接続します。
  4. 次に、ファイル > 新しいウィンドウを使用して新しいウィンドウを開きます。
  5. 現在のウィンドウでプロジェクトをルートレベルで開きます。
  6. コマンドパレット（F1）からDev Containers: Reopen in Containerを実行し、Node Containerを選択します。
  7. 現在のVS Codeウィンドウが再読み込みされ、選択したコンテナに接続されます。

これで、別々のウィンドウから両方のコンテナと対話できます。

単一のVS Codeウィンドウで複数のコンテナに接続する

  1. プロジェクトのルートレベルでVS Codeウィンドウを開きます。
  2. コマンドパレット（F1）からDev Containers: Reopen in Containerを実行し、Python Containerを選択します。
  3. VS Codeは両方のコンテナを起動し、現在のウィンドウを再読み込みして、選択したコンテナに接続します。
  4. コマンドパレット（F1）からDev Containers: Switch Containerを実行し、Node Containerを選択します。
  5. 現在のVS Codeウィンドウが再読み込みされ、選択したコンテナに接続されます。
  6. 同じコマンドで元に戻すことができます。

2つのコンテナに接続する際のDocker Composeファイルの拡張

開発用にDocker Composeファイルを拡張する場合は、両方のサービス（必要に応じて）を拡張し、両方のdevcontainer.jsonファイルで参照される単一のdocker-compose.ymlを使用する必要があります。

例えば、このdocker-compose.devcontainer.ymlファイルを考えてみましょう。

services:
  python-api:
    volumes:
      - ~:~/local-home-folder # Additional bind mount
    # ...

  node-app:
    volumes:
      - ~/some-folder:~/some-folder # Additional bind mount
    # ...

両方の.devcontainer.jsonファイルは次のように更新されます。

"dockerComposeFile": [
  "../../docker-compose.yml",
  "../../docker-compose.devcontainer.yml",
]

このComposeファイルのリストはコンテナの起動時に使用されるため、各devcontainer.jsonで異なるファイルを参照すると予期しない結果が生じる可能性があります。

08/07/2025