如何在容器中实现远程开发

1

1

早在今年1月的 VS Code Day 大会上，最让我印象深刻的就是使用多个容器进行多项目并行开发的场景了。近日随着 VS Code September 2021 (version 1.61)的发布，也上新了一系列基于容器开发的文档，于是赶紧尝鲜，来和大家一起学习。

我们从《在容器中做远程开发》一文开始，因为这篇教程并不需要Docker知识就能开始学习。如果是《一起学docker》这个系列的忠实读者的话，这个教程对您来说一定是信手拈来了。整篇教程会带您过一遍，如何使用 Remote - Containers 插件，在一个 Docker 容器中运行 VS Code 的过程。

为什么要在容器中开发？

其实 Remote - Containers 插件的描述已经大致回答了这个问题。 Remote - Containers 插件可以帮你把 Docker 容器变成一个全功能的开发环境。无论你是否部署容器，容器都是一个非常不错的开发环境，原因如下：

1、开发环境可以实现与部署的操作系统，有一致的，易于重现的工具链。在什么操作系统上开发，与在什么系统上部署，可以完全分离，互相毫无制约，做到“所开即所布”。

2、快速切换不同的，独立的开发环境。丝毫不用担心对本地机器的影响，就能够安全地对项目做各种更新。

3、对于新的团队成员或贡献者来说，能够快速上手一致的开发环境。

4、在不影响本地配置的情况下，尝试新技术，或克隆代码库。

虽然好处非常多，不过这篇教程的注意力，会主要放在使用 Docker 容器来建立一个与本地环境完全隔离的开发环境。

前置条件是 VS Code、Docker 和 Docker Desktop 都已经安装好了，有问题的小伙伴可以评论区留言或给我发私信。

启动 Docker

运行 Docker Desktop 应用来启动 Docker 。看到右下角的鲸鱼图标不动了，那就说明 Docker Desktop 启动成功了。

检查 Docker

Docker 运行之后，可以打开终端窗口，输入以下命令，看看是否一切正常：

docker –version

因为这篇教程主要是基于 VS Code 的，所以我就直接调起 VS Code 的集成终端来运行命令了。

找不到菜单的同学，可以直接使用快捷键 Ctrl + ` 来调起集成终端。

安装插件

Remote - Containers 插件让你能够在 Docker 容器中运行 VS Code。

点击 插件 按钮，搜索 remote containers ，找到第一个选项就是我们今天的主角了。

检查安装情况

安装了 Remote - Containers 插件之后，在 VS Code 的左下角能看到一个新的图标：

Remote Status 状态栏图标能够让你快速识别 VS Code 工作环境，是在本地工作还是在远程工作。点击状态栏图标还能够唤起 Remote - Containers 命令。

获取范例

我们来打开一个 Node.js 项目的 GitHub 仓库，从而创建一个 Docker 容器。

从上一步列出的 Remote Container 命令中，选择 Try a Development Container Sample… ，然后选择 Node 。

从列表中还可以看到 vscode-remote-try-python和vscode-remote-try-java 等等项目可以尝试，不过这个教程用的是 vscode-remote-try-node。

等待容器构建

VS Code 窗口会重新加载，不过因为容器还不存在，VS Code 会先创建一个，然后把范例仓库克隆到独立的容器卷中。这个操作会花一些时间，最好还是带点科学来连网，顺利启动的可能性更大。进度提示会告诉你状态的更新情况。幸运的是，这一步在下次打开文件夹时，就用不着了，因为下一次，容器已经存在了。

容器构建之后，VS Code 会自动连接容器，并且把本地文件系统的项目文件夹映射成容器中的项目文件夹。

检查容器

等你连接上运行起来的容器之后，可以看到状态栏左下角，远端环境已经改变了。

检查你的环境

在容器中开发的一个好处是，你可以使用应用所需要的，指定版本的依赖，而不会影响本地开发环境。

教程中所指定的容器自带了 Node.js v16 版本，你可以通过打开一个新终端（菜单 Terminal > New Terminal 或者 Ctrl + Shift + `），输入以下命令来查看版本：

node –version; npm –version

运行应用

我们可以点击 F5 ，在容器内部运行应用。进程开始后，网页浏览器浏览 localhost:3000 ，就能够看到一个简单的Node.js服务器在运行了！

结束容器连接

通过 File菜单 > Close Remote Connection 来结束与容器的连接会话，并回到本地运行中的 VS Code 。

原理

远程容器插件使用了 .devcontainer 文件夹中的文件 —— devcontainer.json 以及可选的 Dockerfile 或 docker-compose.yml 文件，来创建你的开发容器。

首先，你的镜像会根据所提供的 Dockerfile 或 镜像名称进行构建。然后会使用 devcontainer.json 中的一些设置来创建并启动容器。最后，会安装 VS Code 环境并根据 devcontainer.json 中的设置进行配置。

所有都搞定之后，本地的 VS Code 会连接新建的开发容器中的 VS Code Server。

devcontainer.json

devcontainer.json 基本上就是一个配置文件，决定了你的开发容器如何构建及启动。

拿教程中的 devcontainer.json 为例。

dockerfile

用来构建镜像的 Dockerfile 的相对路径

settings

把 settings.json 的默认值分别添加到 容器或机器 的指定设置文件中。

extensions

插件ID构成的数组，指定了容器被创建时，需要在容器内部安装的插件。

forwardPorts

本地可用的容器内部的端口列表。

postCreateCommand

命令字符串或命令参数列表，这些都是在容器创建之后，需要运行的命令。

remoteUser

覆盖 VS Code 在容器内部以什么用户身份以及子进程运行。默认的是 containerUser 。

devcontainer.json 的完整选项列表请参看官方文档。

恭喜！

恭喜恭喜，你已经成功完成了这个教程！

这篇教程对于使用开发容器能够做什么，只是一个简单的介绍。下一步，可以看看如何在机器上，打开容器中的文件夹，或者是如何在容器中，打开 GitHub 仓库 或 提交 Pull Request。

还可以看看其它远程开发插件：

Remote - SSH 和 Remote - WSL

或者是安装远程开发插件包来获取全部插件。

排错

如果你使用的并不是全新的 Docker 安装，而运行 Try a Development Container Sample… 又在当前环境中遇到了问题，就应该检查一下 docker 上下文。新安装 docker 的，会有一个 default 上下文，你可以将其重新设成当前上下文。