使用 VS Code 检查容器
2019年10月31日，由 Bowden Kelly (@bowdenk7) 撰写
在开发容器化应用程序时，通常会通过 docker exec --it {containerID} /bin/sh 将 shell 附加到正在运行的容器来调试构建和运行时问题。
这种技术允许您通过命令行检查容器环境，但它没有为您提供一套丰富的工具来诊断问题。
在这篇文章中，我们将探讨如何将 Visual Studio Code 附加到您的容器，以便您可以使用 VS Code 的全部功能（包括调试）来检查容器，找出问题所在，并进行修复。
开发容器扩展于今年五月发布，它允许您将本地的 VS Code 连接到容器主机，同时保留所有个性化设置、主题和快捷键。
先决条件
本博客文章假设您已经安装了 Docker Desktop 和 Visual Studio Code。您还需要开发容器扩展。要安装开发容器扩展，请打开扩展视图 (⇧⌘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
此应用程序有一个基于 Node 10 镜像的简单 Dockerfile，以及一个我们将用来运行镜像、暴露适当端口和映射本地文件系统的 docker-compose.yml 文件。我们使用 –inspect 标志运行 Node，这样我们就可以像在本地运行时一样调试应用程序。在实际应用中，您可能需要一个单独的 Docker Compose 文件用于生产部署。
注意：您不需要 Docker Compose 文件，也可以附加到使用单个 Dockerfile 创建的容器。
构建和运行
要构建和运行应用程序，我们首先要安装依赖项，然后在终端/命令提示符中运行 docker-compose up。这将下载 Node 基础镜像，复制依赖项，并启动容器。
docker-compose up
如果一切顺利，您应该看到如下输出：
并且，您应该能够导航到 https://:3000 并看到以下内容：
附加到容器
我们现在可以使用开发容器扩展附加到正在运行的容器，检查环境，并调试应用程序。
在活动栏中选择远程资源管理器，以在其他容器部分查看可以附加的正在运行的容器列表。找到我们刚刚启动的容器，它的名称是 '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））中，搜索并选择调试：附加到 Node 进程。容器内可能运行着多个 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'，然后选择在附加的容器中安装。
这将提示您重新启动 VS Code，重新启动后，您会短暂地看到正在安装开发容器的通知，因为容器和 VS Code 服务器正在用我们新安装的扩展重新启动。
您还会注意到，我们之前看到的容器配置文件再次打开，并更新了一个新属性，列出了我们希望每次附加到此镜像时都安装的扩展。
{
"workspace": "/usr/src/app",
"extensions": ["eamodio.gitlens"]
}
现在打开任何文件，选择一行代码，您会注意到 GitLens 提供了内联的 Git 信息！
清理
完成后，您可以从命令面板运行关闭远程连接命令，或者直接关闭 VS Code 窗口来终止远程连接。
现在从终端/命令提示符运行 docker-compose down 来停止正在运行的容器。这将释放内存和任何已使用的端口。
docker-compose down
现在您已准备好启动另一个容器并开始另一个项目了！
后续步骤
在这篇博文中，我们介绍了如何使用开发容器扩展来附加到您现有的容器化应用程序。
您还可以创建一个 devcontainer.json 文件，它描述了您想要创建或附加到的开发环境，并与您的项目一起存放，以便与您的团队成员共享。
其他有用的资源包括完整的在容器内开发文档、高级容器配置，以及我们关于使用开发容器扩展构建隔离开发环境的入门教程。
远程编码愉快！
Bowden Kelly，VS Code 项目经理 @bowdenk7