🚀 在 VS Code 中！

連線到多個容器

目前您每個 Visual Studio Code 視窗只能連線到一個容器。但是，您可以啟動多個 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 如下所示

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

  node-app:
    image: mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm
    volumes:
      # Mount the root folder that contains .git
      - .:/workspace:cached
    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 關閉時讓容器保持執行 — 這可防止您因為關閉一個視窗而意外關閉兩個容器。

在多個 VS Code 視窗中連線到多個容器

  1. 在專案的根目錄層級開啟 VS Code 視窗。
  2. 從命令選取區 (F1) 執行開發容器：在容器中重新開啟，然後選取 Python Container。
  3. VS Code 接著會啟動兩個容器、重新載入目前視窗並連線到選取的容器。
  4. 接下來，使用檔案 > 新增視窗開啟新視窗。
  5. 在目前視窗的根目錄層級開啟您的專案。
  6. 從命令選取區 (F1) 執行開發容器：在容器中重新開啟，然後選取 Node Container。
  7. 目前的 VS Code 視窗將重新載入並連線到選取的容器。

您現在可以從不同的視窗與兩個容器互動。

在單一 VS Code 視窗中連線到多個容器

  1. 在專案的根目錄層級開啟 VS Code 視窗。
  2. 從命令選取區 (F1) 執行開發容器：在容器中重新開啟，然後選取 Python Container。
  3. VS Code 接著會啟動兩個容器、重新載入目前視窗並連線到選取的容器。
  4. 從命令選取區 (F1) 執行開發容器：切換容器，然後選取 Node Container。
  5. 目前的 VS Code 視窗將重新載入並連線到選取的容器。
  6. 您可以使用相同的命令切換回去。

連線到兩個容器時擴充 Docker Compose 檔案

如果您想要擴充您的 Docker Compose 檔案以進行開發，您應該使用單一 docker-compose.yml，它會擴充兩個服務（視需要），並在兩個 devcontainer.json 檔案中參考。

例如，請考慮以下 docker-compose.devcontainer.yml 檔案

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

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

兩個 .devcontainer.json 檔案都會如下更新

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

在啟動容器時會使用此 Compose 檔案清單，因此在每個 devcontainer.json 中參考不同的檔案可能會產生意想不到的結果。

02/06/2025