Dev Containers 教程
本教程将引导您使用 Docker 容器和 Dev Containers 扩展在 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 扩展后,您将在最左侧看到一个新的状态栏项目。
“远程”状态栏项目可以快速显示 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 文件夹,其中包含 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
存储库中提取的。
选项 | 描述 |
---|---|
映像 |
容器注册表(Docker Hub、GitHub Container Registry、Azure Container Registry)中 VS Code 应用于创建开发容器的映像名称。 |
dockerfile |
您可以不引用 image ,而是使用 dockerfile 属性,它是要用作映像的 Dockerfile 的相对路径。 |
功能 |
要添加的 Dev Container 功能 ID 和相关选项的对象。 |
自定义项 |
配置特定于工具的属性,例如 VS Code 的 settings 和 extensions 属性。 |
设置 |
将默认 settings.json 值添加到容器/计算机特定的设置文件中,例如 "terminal.integrated.defaultProfile.linux": "bash" 。 |
扩展 |
扩展 ID 数组,用于指定在创建容器时应在容器内部安装的扩展。 |
转发端口 |
使容器内部的端口列表在本地可用。 |
端口属性 |
为特定转发端口设置默认属性。 |
postCreateCommand |
在创建容器后运行的命令字符串或命令参数列表。 |
remoteUser |
覆盖 VS Code 在容器中(以及子进程)运行时所使用的用户。默认为 containerUser 。 |
您可以查看 devcontainer.json 选项的完整列表。
恭喜
恭喜,您已成功完成本教程!
这只是对使用开发容器的可能性进行的简要概述。作为下一步,我们建议您查看如何从计算机上的容器中打开现有文件夹,或在容器中打开 GitHub 存储库或 PR。
查看其他远程开发扩展。
或者通过安装 远程开发扩展包来获取所有这些扩展。
故障排除
验证 Docker 上下文
如果您没有使用全新的 Docker 安装,并且“Dev Containers: 尝试 Dev Container 示例...”示例遇到当前上下文的问题,则应检查您的 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