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 執行後，您可以開啟「新」終端機視窗並輸入命令來確認一切正常運作

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: 嘗試 Dev Container 範例...」命令，然後從清單中選取 Node 範例。

「注意」：還有其他 dev container 範例，例如 vscode-remote-try-python 或 vscode-remote-try-java，但本教學課程將使用 vscode-remote-try-node。

等待容器建置

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

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

檢查容器

容器執行中且您連線後，您應該會在狀態列的左下方看到遠端內容變更

檢查您的環境

在容器中開發的其中一個實用之處是，您可以使用應用程式所需的特定相依性版本，而不會影響您的本機開發環境。

本教學課程的特定容器已安裝 Node.js v18，您可以開啟新的終端機「終端機」>「新增終端機」(⌃⇧` (Windows、Linux Ctrl+Shift+`)) 並輸入來檢查

node --version; npm --version

這應該會顯示下列版本

執行應用程式

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

結束您的容器連線

您可以在容器中結束工作階段，並使用「檔案」>「關閉遠端連線」返回在本機執行 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 中的某些設定建立並啟動容器。最後，根據 devcontainer.json 中的設定，再次安裝和組態您的 Visual Studio Code 環境。例如，本範例中的開發容器會安裝 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 內容

如果您未使用全新的 Docker 安裝，且「Dev Containers: 嘗試 Dev Container 範例...」範例遇到目前內容的問題，您應該檢查您的 Docker 內容。全新安裝將具有「預設」內容，您可以將其設定回目前內容。

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

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