開發容器教程

本教程將引導你透過使用 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 將建立一個容器並將示例倉庫克隆到一個隔離的 容器卷 中。這可能需要一些時間，並且進度通知將提供狀態更新。幸運的是，下次你開啟該資料夾時不需要此步驟，因為容器將已存在。

容器構建完成後，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。

檢視其他遠端開發擴充套件。

• 遠端 - SSH
• WSL

或者透過安裝遠端開發擴充套件包獲取所有這些擴充套件。

故障排除

驗證 Docker 上下文

如果你沒有使用全新的 Docker 安裝，並且 Dev Containers: Try a Dev Container Sample... 示例在當前上下文中遇到問題，則應檢查你的 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