使用VS Code检查容器

2019年10月31日，作者：Bowden Kelly，@bowdenk7

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

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

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

今年五月推出的Dev Containers扩展允许您将本地的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

此应用程序有一个基于Node 10镜像的简单Dockerfile，以及一个docker-compose.yml文件，我们将使用该文件来运行镜像、暴露适当的端口并映射到本地文件系统。我们使用–inspect标志运行Node，以便我们可以像在本地运行时一样调试应用程序。在实际应用中，您可能希望为生产部署使用单独的Docker Compose文件。

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

构建和运行

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

docker-compose up

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

并且，你应该能够导航到 http://localhost:3000 并看到以下内容：

附加到容器

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

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

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

在此期间，VS Code 正在您的应用程序运行的容器内安装一个 VS Code 服务器实例。要查看有关此安装步骤的更多详细信息和进度，您可以选择通知中显示的详细信息链接。一旦 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)），搜索并选择Debug: Attach to Node Process。容器内可能运行着多个Node进程。我们需要选择运行我们应用程序的进程，因此选择显示bin/www的那个。

接下来，打开 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 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