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

安裝擴充功能

開發容器擴充功能可讓您在 Docker 容器中執行 Visual Studio Code。

安裝開發容器擴充功能

檢查安裝

安裝開發容器擴充功能後，您會在最左側看到新的狀態列項目。

「遠端」狀態列項目可以快速顯示 VS Code 目前執行的環境 (本機或遠端)，按一下該項目會顯示開發容器命令。

取得範例

若要建立 Docker 容器，我們將開啟包含 Node.js 專案的 GitHub 存放庫。

開啟命令選擇區 (F1) 以執行命令 **Dev Containers: 試用開發容器範例...**，然後從清單中選取 Node 範例。

注意：還有其他開發容器範例，例如 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，這會在容器內執行應用程式。一旦程序開始，請瀏覽至 http://localhost:3000，您應該會看到簡單的 Node.js 伺服器正在執行中！

結束容器連線

您可以結束在容器中的工作階段，然後使用 **檔案** > **關閉遠端連線** 返回在本機執行 VS Code。

運作方式

接下來的章節將更詳細地說明開發容器擴充功能如何設定和組態您的容器。

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

在我們剛才探索的範例中，專案有一個 .devcontainer 資料夾，其中包含 devcontainer.json。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: 試用開發容器範例...** 範例遇到目前環境的問題，您應該檢查您的 Docker 環境。全新安裝將具有 'default' 環境，您可以將其設定回目前的環境。

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

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