开发容器教程

本教程将引导你使用开发容器扩展在 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

安装此扩展

开发容器扩展允许你在 Docker 容器内运行 Visual Studio Code。

安装开发容器扩展

检查安装

安装开发容器扩展后，你将在最左侧看到一个新的状态栏项。

“远程”状态栏项可以快速显示 VS Code 正在哪个上下文中运行（本地或远程），单击该项将显示开发容器命令。

获取示例

要创建 Docker 容器，我们将打开一个包含 Node.js 项目的 GitHub 存储库。

打开命令面板 (F1) 以运行命令开发容器: 尝试开发容器示例...，然后从列表中选择 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，这将在容器内运行应用程序。进程启动后，导航到 https://127.0.0.1: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 服务器。

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

或者通过安装远程开发扩展包来获取所有这些扩展。

故障排除

验证 Docker 上下文

如果你未使用全新的 Docker 安装，并且开发容器: 尝试开发容器示例... 示例遇到当前上下文的问题，你应该检查你的 Docker 上下文。全新安装将具有“默认”上下文，你可以将其设置回当前上下文。

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

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