教育中的开发容器:讲师指南
2020 年 7 月 27 日,作者:Brigit Murtaugh,@BrigitMurtaugh
我们从许多教育工作者那里了解到,学期开始的头几天或几周可能会因为为学生配置正确的环境而浪费掉。即便如此,学生最终仍可能获得低质量的开发体验或作业评分不足。
“为我的学生设置环境通常需要五个课堂周期。我们需要处理不同版本的 Python。这很复杂。遗憾的是,解决这种复杂性耗费了大量时间和金钱。” -[美国社区大学 CS 101 教授]
“我更喜欢一个预先设置好 Python 安装的 VS Code 版本……” -[文理学院助理教授]
Visual Studio Code 中的开发容器可以成为教育中的一个极好工具,以确保学生拥有一个一致的编码环境。它们负责设置工作,以便学生和讲师可以快速跳过配置,转而专注于真正重要的事情:学习和编写出色的代码!
开发容器
那么,什么是开发容器呢?容器是打包代码及其运行所需的所有依赖项(包括运行时、工具、库和设置)的软件组件。容器最初是作为一种在一致的环境中部署和管理应用程序并更有效地利用硬件的方式而创建的。后来,它们发展到有助于提供一致的构建环境,而最近,则发展到开发环境。这就是 dev container(开发容器)名称的由来。
当您创建容器时,其初始内容来自所谓的“镜像”。镜像可以被视为一个带有预装了操作系统和其他工具的迷你磁盘驱动器。您使用 Dockerfile 来描述镜像中包含的内容,一旦运行该镜像,它就成为一个容器。
开发容器在您的计算机和编码环境之间提供了一个隔离的编码环境。例如,如果您下载了特定版本的依赖项,该版本将仅限于容器。在下面的图中,请注意容器如何包含应用程序及其必要的依赖项,从而使计算机(宿主操作系统和基础设施)免受任何依赖项的干扰和保持干净。

作为讲师,您可以为作业创建一个特定的镜像。每个学生都将获得完全相同版本的依赖项,例如相同版本的 Python 或 C++ 编译器,无论他们的操作系统或计算机上已安装了任何其他文件如何。
VS Code 中的开发容器
Visual Studio Code 的 Dev Containers 扩展允许您使用容器作为主要的编码环境。在课堂上,讲师可以采用现有的开发容器,或创建自己的,并与全班共享。每个学生都可以在 VS Code 中打开该容器,并自动获得开发应用程序所需的工具和运行时。学生在编码时还可以使用 VS Code 的全部功能,包括 IntelliSense 和调试。
Dev Containers 扩展仅适用于基于 Linux 的容器,因此尽管学生的计算机操作系统可能不同,但编码环境在所有计算机上将保持一致。
我们已经看到有讲师在课堂上成功使用 Dev Containers。您可以查阅《使用 DevContainers 标准化学生开发环境:经验报告》,以了解三位研究人员在加州大学圣地亚哥分校一门课程中使用开发容器的经验。
本帖将作为指南,指导寻求在课堂上实施开发容器的讲师,为他们的学生创造一个更顺畅、更一致的环境。
要亲眼看看开发容器的实际运行情况以及学生如何在短短 5 分钟内开始使用,请观看我们的入门学生视频。
讲师指南
使用传统的设置方法,学生在设置环境时可能会遇到各种各样的问题。一些例子包括他们独特的操作系统差异、项目文件存储的位置,或者他们安装的运行时或工具中的微小差异。讲师需要精通所有这些细微差别才能帮助学生解决这些问题。
一个常见的问题是管理不同版本的工具。以 Python 为例:有 Python 2 和 Python 3,以及不同的次要版本。拥有多个版本的 Python,然后是多个伴随的工具(如 linter)可能会令人困惑并导致错误。
为了节省大量的时间和避免混淆,我们可以使用开发容器在全班范围内创建一个标准化的 Python 开发环境。学生都将获得相同版本的 Python,避免了安装新版本或卸载旧版本的需要,并且每个人运行相同的容器和源代码都将获得完全相同的结果。
先决条件
- 安装 Visual Studio Code。
- 安装 Docker Desktop。
- Docker 是构建和共享容器的行业标准。我们推荐 Docker Desktop Stable 2.3.0.3,因为它在 Docker Desktop 中是最新的和性能最好的版本。
- 新近引入了对 Windows Home 的 Docker Desktop 支持。它要求使用 Windows 10,版本 2004,并启用 Windows Subsystem for Linux 2 (WSL 2) 后端。请遵循WSL 2 安装指南启用 WSL 2。
- 对于那些不希望配置 WSL 2 后端Н的学生,Docker Desktop for Windows 可在 Windows 10 专业版、企业版或教育版(Build 16299 或更高版本)上替代使用,并且必须启用 Hyper-V 和容器 Windows 功能。
让我们从启动 VS Code 开始,我们可以在命令提示符或终端中输入 code(或者直接在计算机上选择 VS Code)

VS Code 启动后,请确保您已安装Dev Containers 扩展

当我们安装任何远程扩展时,绿色的“远程”指示器会添加到状态栏的左下角

您可以点击它以打开命令面板,并验证 Dev Containers 命令是否已列出

访问您班级的容器
让我们通过一个开发容器示例来帮助学生获得一致的编码环境。在我们的课堂上,我们可以创建一个单一的 GitHub 存储库来存储共享相同技术栈的练习。例如,所有 Python 作业都可以使用相同的容器并存储在同一个 repo 中。
我们有一个示例 vscode-course-sample GitHub 存储库,其中包含一个 Python 开发容器和两个 Python 入门作业。让我们在 VS Code 中打开它。
您可以点击左下角的“远程”指示器,或使用命令面板来调出 Dev Containers 命令。
让我们选择“在容器卷中克隆存储库……”(Clone Repository in Container Volume...)

我们需要输入存储我们容器的 GitHub 存储库的 URL,在我们的例子中是 microsoft/vscode-course-sample

您可以选择“创建一个唯一的卷。”(Create a unique volume.)卷是文件将在容器中存储的位置

选择我们的容器存储库后,VS Code 会重新加载以构建镜像并启动容器

容器构建并运行后,我们的文件就会加载,我们就可以在 Python 环境中开始编码了!
在“资源管理器”中点击 sort.py 打开它,然后按 F5(或右上角的绿色运行图标)来运行它

我们的 Python 代码成功运行,而无需在本地计算机上设置 Python。
我们还可以使用 VS Code 的所有优点,例如设置断点来暂停程序并帮助我们调试。让我们在对单词列表进行排序时设置一个断点。

我们可以按 F5 运行程序。请注意,程序在遇到断点时会停止

为您的班级创建容器
现在我们已经看到了一个很棒的容器示例,让我们使用 Dev Containers 扩展自己设置第一个容器。让我们从一个“Hello World”Python 应用程序开始

我们将选择“Dev Containers: 添加开发容器配置文件…”(Dev Containers: Add Dev Container Configuration Files…)来开始设置开发容器所需的文件

容器配置文件的列表是根据您的应用程序内容(在我们的例子中是 Python 文件)过滤出来的,其中包含创建和自定义开发容器所需的内容。让我们选择“Python 3”

Dev Containers 扩展会自动添加一个 .devcontainer 文件夹和其中两个配置文件:devcontainer.json 和一个 Dockerfile。让我们仔细看看这两个文件。
devcontainer.json
devcontainer.json 描述了 VS Code 应如何启动我们的容器以及连接后应执行的操作。该文件可以位于 .devcontainer/devcontainer.json 下,或直接作为 devcontainer.json 存储在项目的根目录中。
这是一个简单的 devcontainer.json 示例。它拉取一个预配置的 Node 镜像,自动为 3000 端口设置端口转发,并在创建容器时安装 eslint 扩展

这是我们 Python 项目中一个稍微复杂一点的 devcontainer.json 示例。它使用 dockerfile 属性而不是直接使用镜像。它还会自动安装 Python 扩展,并在创建容器后建立一组特定于容器的设置,例如 linting

devcontainer.json 是创建一个适合您学生特定需求的定制化编码环境的好机会。您可以指定一些变量,为每个班级或作业创建一个独特的环境。
我们建议在教育用的 devcontainer.json 中开始使用的变量有
| 属性 | 类型 | 描述 |
|---|---|---|
image |
字符串 | 容器注册表(例如 DockerHub)中 VS Code 应使用哪个镜像的名称来创建开发容器。 |
dockerFile |
字符串 | 定义容器内容的 Dockerfile 的位置。路径相对于 devcontainer.json 文件。您可以在 vscode-dev-containers 存储库中找到适用于不同运行时的许多示例 Dockerfile。 |
|
字符串 | 容器的显示名称。 |
extensions |
数组 | 一个扩展 ID 数组,指定在创建容器时应在容器内安装的扩展。默认为 []。 |
settings |
对象 | 将默认的 settings.json 值添加到特定于容器/机器的设置文件中。 |
在此文件中设置少量变量将从长远来看为您的班级节省时间。例如,您可以使用 extensions 变量来确保您的所有学生都能自动获得相同的一组已安装的扩展。设置路径也可能很复杂或导致学生计算机上出现问题,但通过 settings 变量指定路径信息,您可以为班级节省时间,并确保他们的计算机路径变量不会因此受到损害。
在 devcontainer.json 参考中,有表格列出了您可以包含在此配置文件中的所有可用属性。
Dockerfile
Docker 可以通过读取您的 Dockerfile 中的指令来自动构建镜像。该文件至少会使用 FROM 指定一个基础镜像,并且可以包含命令行指令。
这是我们 Python 应用中 Dockerfile 的样子

打开容器
添加容器配置文件后,我们收到通知,我们的文件夹现在有了一个 devcontainer.json 文件。我们选择“在容器中重新打开”(Reopen in Container)

一个新的 VS Code 实例启动,我们的镜像正在构建,并且我们的应用程序正在我们的开发容器中启动

容器构建完成后,我们拥有所有相同的文件,但左下角的指示器现在显示“Dev Container: Python 3”,表明我们位于容器内部。我们可以轻松地运行我们的代码,而无需关心我们的本地机器上安装了哪个版本的 Python(如果有的话)!

创建和共享作业
现在您有了一个开发容器,您可以将其上传到存储库,以便您的学生可以将其用于他们的作业。您可以在 README 中包含作业说明,以及作业所需的任何基础或模板代码,以及一个 .devcontainer 文件夹,以便他们都能获得一致的开发体验。所有这些文件都可以作为单个存储库上传。
确保您已安装 Git。您可以从 VS Code 中的容器项目初始化一个新的 Git 存储库。或者,您可以在命令行的项目目录中使用 git init。
下一步是将您的本地存储库连接到您在浏览器中创建的新 GitHub 存储库

然后,我们将本地 Git 存储库(计算机上的容器项目)连接到远程存储库(我们在浏览器中创建的 GitHub 存储库)

系统可能会提示您登录 GitHub。登录后,您的文件就可以添加到您的远程 Git 存储库中

现在当我刷新浏览器中的 GitHub 时,我可以看到我的文件了!

有关如何将存储库上传到 GitHub 的更多信息,请参阅此将现有项目添加到 GitHub 的指南。
访问作业
要了解学生如何从 GitHub 访问开发容器并轻松开始编程,请观看我们的快速 5 分钟视频。
反馈和更多资源
有关使用容器设置 VS Code 的帮助,我们有关于 VS Code 远程开发文档的详细文章。如果您对我们的团队有任何问题或反馈,请随时在 VS Code 远程开发 GitHub 存储库上提出问题,或在 Twitter 上向我们发送推文 @code。
编码愉快!
Brigit Murtaugh, VS Code 项目经理 @BrigitMurtaugh