🚀 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",
]

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

04/03/2025