使用 VS Code 检查容器

2019 年 10 月 31 日，Bowden Kelly，@bowdenk7

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

此技术允许您通过命令行检查容器环境，但它没有为您提供一套丰富的工具来诊断问题。

在这篇文章中，我们将了解如何将 Visual Studio Code 附加到您的容器，以便您可以使用 VS Code 的全部功能（包括调试）来检查容器，找出问题所在并修复它。

Dev Containers 扩展于今年 5 月发布，它允许您将本地 VS Code 连接到容器主机，同时保留所有个性化设置、主题和键盘快捷键。

先决条件

这篇博客文章假定您已安装 Docker Desktop 和 Visual Studio Code。您还需要 Dev Containers 扩展。要安装 Dev Containers 扩展，请打开扩展视图 (⇧⌘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

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

并且，您应该能够导航到 https://127.0.0.1:3000 并看到以下内容

附加到容器

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

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

这将启动一个新的 VS Code 窗口（实例），并在右下角显示以下通知。

在此期间，VS Code 正在容器内（您的应用程序正在运行的位置）安装 VS Code Server 的实例。要查看有关此安装步骤的更多详细信息和进度，您可以选择通知中显示的详细信息链接。一旦 VS Code 服务器安装完成，您的本地 VS Code 客户端将连接到远程 VS Code 服务器。结果是您的本地 VS Code 实例，具有您的所有设置、主题和键盘快捷键，都连接到在容器内与您的应用程序并行运行的“后端”。

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

让我们继续操作，通过选择打开文件夹按钮并导航到 /usr/src/app 来打开我们的应用程序。请注意，“打开文件夹”对话框显示的是来自正在运行的容器的文件系统，而不是本地文件系统。

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

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

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

您可以执行在普通本地 VS Code 上下文中所做的任何操作。

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

在容器内调试

为了进一步展示开发容器与本地环境的相似之处，让我们附加一个调试器。我们在 docker-compose.yaml 中使用 –inspect 参数启动了 Node 应用程序，因此我们所要做的就是将调试器附加到该进程。

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

接下来，打开 index.js 并在第 6 行上设置断点，方法是单击装订线或按 F9

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

现在转到浏览器中的 https://127.0.0.1:3000，您会看到断点如预期触发！

安装扩展

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

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

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

让我们通过在扩展视图中键入“gitlens”并选择安装到附加的容器来安装 GitLens 扩展。

这将提示您重启 VS Code，执行此操作后，您将短暂看到正在安装开发容器通知，因为容器和 VS Code 服务器已使用我们新安装的扩展重启。

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

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

现在打开任何文件，选择一行代码，您会注意到 GitLens 提供的内联 Git 信息！

清理

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

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

docker-compose down

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

后续步骤

在这篇博客文章中，我们介绍了如何使用 Dev Containers 扩展来附加到您现有的容器化应用程序。

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

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

远程编码愉快！

Bowden Kelly，VS Code 项目经理 @bowdenk7