に参加して、VS Code の AI 支援開発について学びましょう。

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

現在、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 で異なるファイルを参照すると予期しない結果になる可能性があります。

© . This site is unofficial and not affiliated with Microsoft.