试用 VS Code 中的

使用 VS Code 检查容器

2019 年 10 月 31 日,作者:Bowden Kelly, @bowdenk7

在开发容器化应用程序时,通常会通过使用 docker exec --it {containerID} /bin/sh 命令将 shell 附加到正在运行的容器来调试构建和运行时问题。

Running docker exec command

这种技术允许您通过命令行检查容器环境,但它不能提供丰富的工具来诊断问题。

在本文中,我们将探讨如何将 Visual Studio Code 附加到您的容器,以便您可以利用 VS Code 的全部功能(包括调试)来检查容器、找出问题所在并修复它。

今年 5 月发布的 开发容器 扩展允许您将本地 VS Code 连接到容器主机,同时保留所有个性化设置、主题和键盘绑定。

先决条件

本博客文章假定您已安装 Docker DesktopVisual Studio Code。您还需要 开发容器 扩展。要安装开发容器扩展,请打开“扩展”视图(⇧⌘X (Windows, Linux Ctrl+Shift+X)),搜索“Dev Containers”,选择 安装,如果出现提示,请重启 VS Code。

应用程序

我们首先需要一个可以在容器中运行的应用程序。如果您有,太好了!您可以跳过此步骤。如果没有,您可以克隆这个简单的 Node.js Express 应用程序。

注意:您无需在本地安装 Node.js,我们将在容器中运行此应用程序!

git clone https://github.com/microsoft/vscode-express-sample.git

此应用程序有一个简单的 Dockerfile,它基于 Node 10 镜像,还有一个 docker-compose.yml 文件,我们将用它来运行镜像、公开相应的端口,并映射本地文件系统。我们使用 –inspect 标志运行 Node,以便我们可以像在本地运行一样调试应用程序。在实际应用程序中,您可能需要一个单独的 Docker Compose 文件用于生产部署。

注意:您不需要 Docker Compose 文件,您也可以附加到使用单个 Dockerfile 创建的容器。

构建并运行

要构建和运行应用程序,我们首先安装依赖项,然后从终端/命令提示符运行 docker-compose up。这将下载 Node 基础镜像,复制依赖项,并启动容器

docker-compose up

如果一切正常,您应该会看到如下输出

docker-compose up output

并且,您应该能够导航到 http://localhost:3000 并看到以下内容

Welcome to Express web page

附加到容器

现在我们可以使用开发容器扩展来附加到我们正在运行的容器,检查环境,并调试应用程序。

在活动栏中选择“远程资源管理器”,以在“其他容器”部分中查看可附加的正在运行的容器列表。找到我们刚刚启动的容器,它的名称是“express_server_1”,然后使用“连接到容器”按钮附加到它。该容器现在应该显示在“远程资源管理器”的“已附加容器”部分中。

Attached Containers in the Remote Explorer

这将启动一个新的 VS Code 窗口(实例),右下角会显示以下通知。

Installing Dev Container notification

在此期间,VS Code 会在您的应用程序运行的容器内安装一个 VS Code 服务器实例。要查看此安装步骤的更多详细信息和进度,您可以选择通知中显示的“详细信息”链接。一旦 VS Code 服务器安装完成,您的本地 VS Code 客户端将连接到远程 VS Code 服务器。结果是您的本地 VS Code 实例,带着您的所有设置、主题和键盘绑定,连接到了一个与您的应用程序一起在容器内运行的“后端”。

Dev Containers architecture diagram

连接完成后,您应该会看到一个新的 VS Code 窗口,左下角有一个绿色指示器,表明此 VS Code 实例正在远程上下文中运行。如果您点击该指示器,您将看到一个与当前远程上下文相关的命令下拉列表。

Remote context shown in the Status bar

让我们点击“打开文件夹”按钮并导航到 /usr/src/app 来打开我们的应用程序。请注意,“打开文件夹”对话框显示的是正在运行的容器的文件系统,而不是本地文件系统

Open Folder dialog show container file system

打开源文件夹后,您会注意到编辑器中打开了一个文件,文件名为 express-server.json。此名称派生自您已附加的容器镜像名称。在我们的示例中,docker-compose 创建的镜像名称是“express_server”,它派生自文件夹名 expressdocker-compose.yml 文件中定义的服‍务名 server。此文件是与您的镜像关联的配置文件,当您附加到基于此镜像的容器时,它会记住配置设置。如果您没有开启自动保存,则需要确保保存此文件。现在,在未来的会话中,当您附加到此镜像时,VS Code 将重新打开此源文件夹。

注意:您可以通过从命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P))运行命令 打开容器配置文件 来查看当前开发容器的此文件。

express-server.json file contents

此时,VS Code 看起来与普通的本地 VS Code 窗口相同。

VS Code running in a container

您可以在正常的本地 VS Code 上下文中执行任何操作。

例如,打开 app.js。右键单击第 8 行,执行 查找所有引用 以查找 usersRouter 的所有用法。任何编辑都会保留到本地磁盘,因为我们使用 docker-compose 文件将本地文件系统挂载到了容器中。

在容器内调试

为了进一步展示开发容器与本地环境的相似性,让我们附加一个调试器。我们在 docker-compose.yaml 中使用 –inspect 参数启动了 Node 应用程序,所以我们只需将调试器附加到该进程即可。

在命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P))中,搜索并选择 调试:附加到 Node 进程。容器内可能运行着多个 Node 进程。我们需要运行我们应用程序的进程,所以选择显示 bin/www 的那个。

Node process picker list

接下来,打开 index.js,通过点击边栏或按下 F9 在第 6 行设置断点。

res.render('index', { title: 'Express' });

现在在浏览器中访问 http://localhost:3000,您将看到断点按预期触发!

安装扩展

就像普通的 VS Code 实例一样,当您附加到开发容器时,可以安装和使用扩展。

根据扩展类型,它可以在客户端运行,也可以在远程 VS Code 服务器上的容器中运行。主要基于 UI 的扩展(如主题和代码片段)保留在客户端,而所有其他扩展都安装在容器中。这使您在每个环境中工作时都只拥有所需的扩展,同时在所有环境中保持一致的 UI。

如果您打开“扩展”视图(⇧⌘X (Windows, Linux Ctrl+Shift+X)),您将看到本地已安装的扩展以及在当前容器实例中安装的扩展列表。需要在容器中安装的本地已安装扩展(如下面的 Azure 帐户扩展)将显示为灰色。

Remote Extensions view

让我们在“扩展”视图中输入“gitlens”,然后选择 在已附加容器中安装 来安装 GitLens 扩展。

Search for GitLens

这将提示您重启 VS Code,重启后,您将短暂看到“正在安装开发容器”通知,因为容器和 VS Code 服务器会随着我们新安装的扩展一起重启。

您还会注意到我们之前看到的容器配置文件再次打开,并更新了一个新属性,列出了每次我们附加到此镜像时要安装的扩展。

{
  "workspace": "/usr/src/app",
  "extensions": ["eamodio.gitlens"]
}

现在打开任何文件,选择一行代码,您会注意到 GitLens 提供了行内 Git 信息!

GitLens information shown in the editor

清理

完成后,您可以从命令面板运行 关闭远程连接 命令,或者直接关闭 VS Code 窗口以终止远程连接。

现在从终端/命令提示符运行 docker-compose down 来停止正在运行的容器。这将释放内存并释放所有已使用的端口。

docker-compose down

现在您已准备好启动另一个容器并处理另一个项目了!

下一步

在本博客文章中,我们介绍了如何使用开发容器扩展附加到您现有的容器化应用程序。

您还可以创建一个 devcontainer.json 文件,该文件描述了您想要创建或附加到的开发环境,并与您的项目一起保存,以便与团队成员共享。

其他有用的资源包括完整的 在容器中开发 文档、高级容器配置,以及我们关于使用开发容器扩展构建隔离开发环境的 入门教程

祝您远程编码愉快,

Bowden Kelly,VS Code 项目经理 @bowdenk7