Dev Containers 教學課程

本教學將引導您使用 Dev Containers 擴充功能，在 Docker 容器中執行 Visual Studio Code。完成本教學無需具備 Docker 的先備知識。

在 Docker 容器內部執行 VS Code 有許多好處，但在本教學中，我們將專注於如何利用 Docker 容器來設定一個與您本地環境隔離的開發環境。

先決條件

您需要安裝 Visual Studio Code。

安裝 Docker

建立及管理容器需要用到 Docker。

Docker Desktop

下載並安裝 Docker Desktop，或選擇其他 Docker 選項，例如遠端主機上的 Docker 或相容 Docker 的 CLI。

啟動 Docker

執行 Docker Desktop 應用程式以啟動 Docker。若在活動匣（系統列）中看到 Docker 鯨魚圖示，即代表它已在執行中。

Docker 可能需要幾分鐘時間啟動。如果鯨魚圖示正在動畫化，它可能仍在啟動過程中。您可以點擊圖示來查看狀態。

檢查 Docker

一旦 Docker 啟動，您可以打開新的終端機視窗並輸入以下指令，以確認一切運作正常：

docker --version
# Docker version 18.09.2, build 6247962

安裝擴充功能

Dev Containers 擴充功能讓您可以在 Docker 容器內執行 Visual Studio Code。

安裝 Dev Containers 擴充功能

檢查安裝

安裝 Dev Containers 擴充功能後，您會在左下角看到一個新的狀態列項目。

遠端狀態列項目可讓您快速查看 VS Code 目前在哪個環境（本地或遠端）中執行，點擊該項目則會帶出 Dev Containers 的相關指令。

取得範例

為了建立 Docker 容器，我們將開啟一個包含 Node.js 專案的 GitHub 儲存庫。

開啟指令選擇區（F1）並執行 Dev Containers: Try a Dev Container Sample... 指令，然後從列表中選擇 Node 範例。

注意：還有其他開發容器範例，例如 vscode-remote-try-python 或 vscode-remote-try-java，但本教學將使用 vscode-remote-try-node。

等待容器建置

視窗隨後會重新載入，但由於容器尚未存在，VS Code 會建立一個容器並將範例儲存庫複製到隔離的 容器磁碟區 (container volume) 中。這可能需要一些時間，進度通知會提供狀態更新。幸運的是，下次開啟該資料夾時就不需要執行此步驟，因為容器已經存在。

容器建置完成後，VS Code 會自動連線到該容器，並將本地檔案系統中的專案資料夾對應到容器內部。

檢查容器

當容器執行中且您已連線時，您應該會看到左下角狀態列的遠端環境已變更。

檢查您的環境

在容器中開發的好處之一，就是您可以使用應用程式所需的特定版本相依套件，而不會影響您的本地開發環境。

本教學的特定容器已安裝 Node.js v18，您可以開啟新的終端機 Terminal > New Terminal (⌃⇧` (Windows, Linux Ctrl+Shift+`)) 並輸入以下指令來檢查：

node --version; npm --version

這應該會顯示以下版本資訊：

執行應用程式

現在我們可以按下 F5，這會在容器內執行應用程式。程序啟動後，瀏覽至 https://:3000，您應該就能看到簡單的 Node.js 伺服器正在運作！

結束容器連線

您可以透過 File > Close Remote Connection 結束容器中的工作階段，並回到在本地執行 VS Code。

運作原理

下一節將更詳細說明 Dev Containers 擴充功能如何設定與配置您的容器。

Dev Containers 擴充功能使用 .devcontainer 資料夾中的檔案（即 devcontainer.json，以及選用的 Dockerfile 或 docker-compose.yml）來建立開發容器。

在我們剛才探索的範例中，專案有一個包含 devcontainer.json 的 .devcontainer 資料夾。devcontainer.json 使用了 mcr.microsoft.com/devcontainers/javascript-node:0-18 這個映像檔。您可以在 devcontainers/images 儲存庫中進一步了解此映像檔的詳細資訊。

首先，您的映像檔會根據所提供的 Dockerfile 或映像檔名稱（在本例中為 mcr.microsoft.com/devcontainers/javascript-node:0-18）進行建置。接著，系統會根據 devcontainer.json 中的某些設定來建立並啟動容器。最後，您的 Visual Studio Code 環境會根據 devcontainer.json 中的設定再次安裝並配置。例如，本例中的開發容器會安裝 streetsidesoftware.code-spell-checker 擴充功能。

注意：其他配置會根據基礎映像檔中的內容自動新增至容器。例如，我們在上方看到 streetsidesoftware.code-spell-checker 擴充功能，而容器也會包含 "dbaeumer.vscode-eslint"，因為它是 mcr.microsoft.com/devcontainers/typescript-node 的一部分。當使用 devcontainer.json 進行預先建置時，這會自動發生，您可以從 預先建置章節 閱讀更多相關資訊。

完成這些步驟後，您本地的 Visual Studio Code 會連線到執行於新開發容器內部的 Visual Studio Code Server。

devcontainer.json

devcontainer.json 本質上是一個設定檔，決定了開發容器如何建置及啟動。

//devcontainer.json
{
  "name": "Node.js",

  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  },

  // "forwardPorts": [3000],

  "portsAttributes": {
    "3000": {
      "label": "Hello Remote World",
      "onAutoForward": "notify"
    }
  },

  "postCreateCommand": "yarn install"

  // "remoteUser": "root"
}

上述範例摘自我們在教學課程中使用的 vscode-remote-try-node 儲存庫。

您可以檢閱 devcontainer.json 選項的 完整列表。

恭喜

恭喜，您已成功完成本教學！

以上是使用開發容器可能實現功能的簡要概述。作為下一步，我們建議您了解如何 從您的機器開啟現有的資料夾到容器中，或是 在隔離的容器磁碟區中開啟 GitHub 儲存庫或 PR。

查看其他遠端開發擴充功能。

• Remote - SSH
• WSL

或者，您可以直接安裝 Remote Development 擴充套件組合，一次取得所有功能。

疑難排解

驗證 Docker 環境 (context)

如果您不是使用全新的 Docker 安裝，且 Dev Containers: Try a Dev Container Sample... 範例在目前環境下遇到問題，您應該檢查您的 Docker 環境 (context)。全新安裝會有一個 'default' 環境，您可以將其設定回目前的環境。

# Displays the list of contexts, '*' denotes the current context
docker context list

# Switches the list to the 'default' context
docker context use default