使用 VS Code 检查容器
2019 年 10 月 31 日，由 Bowden Kelly (@bowdenk7) 发布
在开发容器化应用程序时，通常会尝试使用 docker exec --it {containerID} /bin/sh 将 shell 附加到正在运行的容器来调试构建和运行时问题。
此技术允许您通过命令行检查容器环境，但它没有为您提供丰富的工具集来诊断问题。
在本文中，我们将探讨如何将 Visual Studio Code 附加到您的容器，以便您可以使用 VS Code 的全部功能（包括调试）来检查容器、找出问题所在并进行修复。
今年 5 月推出的 Dev Containers 扩展允许您将本地 VS Code 连接到容器主机，同时保留所有个性化设置、主题和按键绑定。
先决条件
本博客文章假定您已安装 Docker Desktop 和 Visual Studio Code。您还需要 Dev Containers 扩展。要安装 Dev Containers 扩展，请打开“扩展”视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，搜索 “Dev Containers”，选择安装 (Install)，并在出现提示时重新启动 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://:3000 并看到以下内容：
附加到容器
现在我们可以使用 Dev Containers 扩展附加到正在运行的容器，检查环境，并调试应用程序。
在活动栏中选择“远程资源管理器”(Remote Explorer)，以在其他容器 (Other Containers) 部分查看可以附加的正在运行的容器列表。找到我们刚刚启动的容器，其名称为“express_server_1”，然后使用连接到容器 (Connect to Container) 按钮附加到它。该容器现在应该显示在“远程资源管理器”的已附加容器 (Attached Containers) 部分。
这将启动一个新的 VS Code 窗口（实例），右下角有以下通知。
在此期间，VS Code 正在应用程序运行的容器内部安装一个 VS Code 服务器 (Server) 实例。要查看有关此安装步骤的更多详细信息和进度，您可以选择通知中显示的详细信息 (details) 链接。一旦 VS Code 服务器安装完毕，您的本地 VS Code 客户端将连接到远程 VS Code 服务器。结果是，您本地的 VS Code 实例，连同您所有的设置、主题和按键绑定，都连接到了在容器内与您的应用程序一起运行的“后端”。
连接完成后，您应该会有一个新的 VS Code 窗口，左下角有一个绿色指示器，表明此 VS Code 实例正在远程上下文中运行。如果单击该指示器，您将看到一个与当前远程上下文相关的命令下拉列表。
让我们通过选择打开文件夹 (Open Folder) 按钮并导航到 /usr/src/app 来打开我们的应用程序。请注意，“打开文件夹”对话框显示的是正在运行的容器中的文件系统，而不是本地文件系统。
打开源文件夹后，您会注意到编辑器中打开了一个名为 express-server.json 的文件。这个名称是根据您附加到的容器镜像名称派生的。在我们的示例中，docker-compose 创建了镜像名称“express_server”，该名称源自文件夹名称 express 和在 docker-compose.yml 文件中定义的服务名称 server。此文件是与您的镜像关联的配置文件，当您附加到基于此镜像的容器时，它会记住配置设置。如果您没有开启自动保存，则需要确保保存此文件。现在，在以后的会话中，当您附加到此镜像时，VS Code 将重新打开此源文件夹。
注意：您可以通过从命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 运行 Open Container Configuration File 命令来查看当前开发容器的此文件。
此时，VS Code 看起来与普通的本地 VS Code 窗口相同。
您可以执行在普通本地 VS Code 上下文中可以执行的任何操作。
例如，打开 app.js。右键单击第 8 行并执行查找所有引用 (Find All References) 以查找 usersRouter 的所有用法。任何编辑都会持久化到本地磁盘，因为我们使用 docker-compose 文件将本地文件系统挂载到了容器中。
在容器内调试
为了进一步展示开发容器与本地环境的相似性，让我们附加一个调试器。我们在 docker-compose.yaml 中使用 –inspect 参数启动了 Node 应用程序，因此我们所要做的就是将调试器附加到该进程。
在命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中，搜索并选择 Debug: Attach to Node Process。容器内可能正在运行多个 Node 进程。我们想要的是运行我们应用程序的进程，因此选择显示 bin/www 的那个。
接下来，打开 index.js 并在第 6 行设置一个断点，方法是单击行号槽或按 F9。
res.render('index', { title: 'Express' });
现在，在浏览器中访问 https://:3000，您会看到断点如期触发！
安装扩展
就像普通的 VS Code 实例一样，您可以在附加到开发容器时安装和使用扩展。
根据扩展的类型，它既可以在客户端运行，也可以在容器中的远程 VS Code 服务器上运行。主要基于 UI 的扩展（如主题和代码片段）保留在客户端，而所有其他扩展则安装在容器中。这使您可以在每个环境中只拥有所需的扩展，同时在所有环境中保持一致的 UI。
如果您打开“扩展”视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，您将看到已在本地安装的扩展列表以及已在当前容器实例中安装的扩展列表。需要安装在容器中的本地已安装扩展（如下面的 Azure Account 扩展）将显示为灰色。
让我们安装 GitLens 扩展，方法是在“扩展”视图中键入“gitlens”，然后选择在附加的容器中安装 (Install in Attached Container)。
这将提示您重新启动 VS Code，重新启动后，您将短暂地看到正在安装开发容器 (Installing Dev Container) 的通知，因为容器和 VS Code 服务器会随着我们新安装的扩展而重新启动。
您还会注意到，我们之前看到的容器配置文件再次打开，并更新了一个新属性，列出了我们希望每次附加到此镜像时安装的扩展。
{
"workspace": "/usr/src/app",
"extensions": ["eamodio.gitlens"]
}
现在打开任何文件，选择一行代码，就会注意到 GitLens 提供的内联 Git 信息！
清理
完成后，您可以从命令面板运行 Close Remote Connection 命令，或者直接关闭 VS Code 窗口以终止远程连接。
现在，在终端/命令提示符中，运行 docker-compose down 来停止正在运行的容器。这将释放内存并释放任何已使用的端口。
docker-compose down
现在，您已准备好启动另一个容器并开始另一个项目了！
后续步骤
在这篇博客文章中，我们介绍了如何使用 Dev Containers 扩展附加到现有的容器化应用程序。
您还可以创建一个 devcontainer.json 文件，它描述了您想要创建或附加的开发环境，并与您的项目一起存放，以便与团队成员共享。
其他有用的资源包括完整的 在容器内开发 文档、高级容器配置，以及我们关于使用 Dev Containers 扩展构建隔离开发环境的入门教程。
远程编码愉快！
Bowden Kelly, VS Code 项目经理 @bowdenk7