开发容器教程

Name: Visual Studio Code
Author: Microsoft

本教程将指导您在Docker容器中运行Visual Studio Code开发容器扩展。完成本教程不需要任何Docker的先验知识。

在Docker容器内运行VS Code有很多好处，但在本指南中，我们将重点介绍使用Docker容器来设置一个与本地环境分开的开发环境。

先决条件

您需要Visual Studio Code已安装。

安装Docker

Docker 用于创建和管理您的容器。

Docker 桌面

下载并安装 Docker Desktop，或一个替代的Docker选项，比如远程主机上的Docker或兼容的CLI。

启动Docker

运行Docker Desktop应用程序以启动Docker。如果您查看活动托盘并看到Docker鲸鱼图标，则表示它正在运行。

Docker 可能需要几分钟才能启动。如果鲸鱼图标是动画的，它可能仍在启动过程中。您可以点击图标查看状态。

Docker 状态

检查Docker

一旦Docker开始运行，你可以通过打开一个新的终端Windows并输入命令来确认一切正常：

docker --version
# Docker 版本 18.09.2，构建 6247962

安装扩展

Dev Containers 扩展允许您在 Docker 容器内运行 Visual Studio Code。

安装 Dev Containers 扩展

开发容器扩展

检查安装

安装了Dev Containers扩展后，您将在最左侧看到一个新的状态栏项目。

远程状态栏项目

远程状态栏项目可以快速显示 VS Code 正在本地还是远程运行，并且点击该项目将显示开发容器命令。

开发容器命令

获取样本

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

打开命令面板 (F1) 运行命令 开发容器：尝试开发容器示例... 并从列表中选择 Node 示例。

从列表中选择一个样本

注意：还有其他开发容器示例，例如 vscode-远程-尝试-Python或vscode-远程-试用-Java，但是这个教程将会使用vscode-远程-尝试-Node输入：.

等待容器构建

Windows将然后重新加载，但由于容器尚不存在，VS Code 将创建一个并克隆示例存储库到一个隔离的容器卷中。这可能需要一些时间，并且进度通知将提供状态更新。幸运的是，下次打开该文件夹时不需要此步骤，因为容器将已经存在。

开发容器进度通知

容器构建完成后，VS Code 会自动连接到它，并将本地文件系统中的项目文件夹映射到容器中。

检查容器

一旦容器运行并连接，您应该在状态栏的左下角看到您的远程上下文更改：

构建镜像

检查您的环境

在容器中开发的一个有用之处是，您可以使用应用程序所需的特定版本的依赖项，而不会影响您的本地开发环境。

本教程使用的具体容器已安装Node.js v18，您可以通过打开新的终端终端 > 新终端 (⌃⇧` (Windows, Linux Ctrl+Shift+`)) 并输入：

节点 --版本; npm --版本

这应该显示以下版本：

Node.js 版本检查

运行应用程序

我们现在可以按F5，这将在容器内运行应用程序。一旦进程启动，请导航到http://localhost:3000，您应该会看到简单的Node.js服务器正在运行！

运行应用程序

结束您的容器连接

你可以在容器中结束你的会话，并返回在本地运行 VS Code，通过文件 > 关闭远程连接。

它是如何运作的

接下来的部分更详细地描述了Dev Containers扩展如何设置和配置您的容器。

开发容器扩展使用文件在.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. 最后，根据设置再次安装和配置了你的 Visual Studio Code 环境devcontainer.json例如，这个示例中的开发容器安装了街道边软件.代码拼写检查器扩展。

注意： 额外的配置将根据基础镜像中的内容添加到容器中。例如，我们看到 街道边软件.代码拼写检查器扩展部分上，并且容器也将包括"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"

  // "远程用户": "root"
}

上面的例子提取自vscode-远程-尝试-Node我们在教程中使用的代码库。

选项	描述
`图像`	容器注册表（Docker Hub、GitHub Container Registry、Azure Container Registry）中图像的名称，VS Code 应该用来创建开发容器。
`Dockerfile`	与其引用一个`图像`, 你也可以使用`Dockerfile`属性，这是相对路径到一个`Dockerfile`你想要用作图像的。
`功能`	一个开发容器功能的ID和相关选项将被添加。
`定制`	配置工具特定属性，例如`设置`和`扩展`VS Code 的属性。
`设置`	添加默认`settings.json`将值输入到容器/机器特定的设置文件中，例如`"terminal.integrated.defaultProfile.linux": "bash"`输入：.
`扩展`	一个数组，用于指定在创建容器时应安装在容器内的扩展ID。
`转发端口`	列出容器内可用的本地端口。
`端口属性`	为特定转发端口设置默认属性。
`创建命令后`	在容器创建后要运行的命令字符串或命令参数列表。
`远程用户`	覆盖 VS Code 在容器中运行的用户（以及子进程）。默认为`容器用户`输入：.

您可以查看完整列表的devcontainer.json选项。

恭喜

恭喜你，你已经成功完成这个教程！

这是一些使用 dev containers 可以实现的功能的简要概述。作为下一步，我们建议查看如何在容器中打开机器上的现有文件夹或在容器中打开 GitHub 仓库或 PR。

查看其他远程开发扩展。

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

故障排除

验证Docker上下文

如果您不是使用新的Docker安装，并且开发容器：尝试一个开发容器示例...示例遇到当前上下文的问题，您应该检查您的Docker上下文。新的安装将有一个“默认”的上下文，您可以将其重新设置为当前上下文。

# 显示上下文列表，'*' 表示当前上下文
docker context list

# 切换列表到'默认'上下文
docker 上下文 使用 默认