现已推出!阅读有关 10 月份的新功能和修复程序的信息。

教育中的开发容器:教师指南

2020 年 7 月 27 日,作者:Brigit Murtaugh,@BrigitMurtaugh

我们从许多教育工作者那里了解到,学期的头几天或几周可能会浪费在为学生配置正确的环境上。即使这样,学生最终可能仍然会遇到低质量的开发体验或作业评分不足的问题。

“为我的学生设置环境通常需要五个课时。还需要处理 Python 版本。这里有很多复杂性。遗憾的是,这些复杂性需要大量时间和资金来解决。” - [美国社区学院 CS 101 教授]

“我希望有一个专门为 Python 安装设置的 VS Code 版本……” - [文理学院助理教授]

使用 Visual Studio Code 的开发容器可以作为教育中的一个绝佳工具,确保学生拥有一个一致的编码环境。它们可以处理设置,这样学生和教师就可以快速完成配置,并将重点放在真正重要的内容上:学习和编写出色的代码!

开发容器

那么,开发容器是什么?容器 是软件的一部分,它将代码与其运行所需的所有依赖项打包在一起,包括运行时、工具、库和设置。容器最初是作为一种在一致的环境中部署和管理应用程序以及更有效地利用硬件的方法而创建的。后来,它们发展成为帮助提供一致的构建环境,更近一步,发展成为开发环境。这就是“开发容器”这个名称的由来。

当您创建一个容器时,其初始内容来自所谓的“镜像”。镜像可以被认为是一个小型磁盘驱动器,其中预先安装了操作系统和其他工具。您可以使用 Dockerfile 描述镜像中的内容,一旦您运行镜像,它就会变成一个容器。

开发容器提供一个与您的计算机分开的编码环境。例如,如果您下载特定版本的依赖项,该版本将是容器独有的。在下图中,请注意容器如何包含应用程序及其必要的依赖项,从而使计算机(主机操作系统和基础设施)保持干净,不受任何依赖项的影响。

Containers diagram

作为一名教师,您可以为作业创建一个特定的镜像。每个学生将获得完全相同版本的依赖项,例如,相同的 Python 版本或 C++ 编译器,而不会受到其操作系统或计算机上已安装的其他文件的任何影响。

VS Code 中的开发容器

Visual Studio Code 开发容器 扩展允许您将容器用作主要编码环境。在课堂上,教师可以采用一个现有的开发容器,或者创建自己的开发容器,并与班级共享。每个学生可以在 VS Code 中打开容器,并自动获得开发应用程序所需的工具和运行时。学生还可以访问 VS Code 的全部功能集,包括 IntelliSense 和调试,同时进行编码。

开发容器扩展仅适用于基于 Linux 的容器,因此,尽管学生可能在他们的计算机上使用不同的操作系统,但编码环境对于所有人来说将保持一致。

我们已经看到教师在他们的课堂上成功地使用了开发容器。您可以查看使用开发容器标准化学生开发环境:经验报告,了解三位研究人员在加州大学圣地亚哥分校的一门课程中使用开发容器的经验。

本文将作为教师的指南,指导他们如何在课堂上实施开发容器,为他们的学生创造一个更平滑、更一致的环境。

要见证开发容器的实际操作以及学生如何在短短 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 后端的学生,可以将Windows 版 Docker Desktop用在 Windows 10 专业版、企业版或教育版(Build 16299 或更高版本)上,并且必须启用 Hyper-V 和容器 Windows 功能。

让我们从启动 VS Code 开始,我们可以通过在命令提示符或终端中键入 code 来实现(或者只需在计算机上选择 VS Code)。

Launch VS Code from command prompt

VS Code 启动后,请确保您已安装开发容器扩展。

Dev Containers extension

当我们安装任何远程扩展时,绿色远程指示器将添加到状态栏的左下方。

Remote indicator in VS Code

您可以单击它打开命令面板,并验证开发容器命令是否已列出。

List of remote commands in Command Palette

访问您班级的容器

让我们通过一个开发容器示例来帮助学生获得一致的编码环境。在我们的课堂上,我们可以创建一个单个 GitHub 仓库来存储使用相同技术栈的练习。例如,所有 Python 作业都可以使用同一个容器,并存储在同一个仓库中。

我们有一个示例vscode-course-sample GitHub 仓库,其中包含 Python 开发容器和两个 Python 入门作业。让我们在 VS Code 中打开它。

您可以选择左下角的远程指示器,或使用命令面板,调出开发容器命令。

让我们调用“在容器卷中克隆仓库……”

Clone Repository in Container Volume

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

Paste GitHub URL in Command Palette

您可以“创建唯一的卷”。卷是我们将文件存储在容器中的位置。

Volume options in Command Palette

现在我们已经选择了容器仓库,VS Code 重新加载以构建镜像并启动容器。

Close-up on starting container notification

容器构建并运行后,我们的文件将被加载,我们就可以在 Python 环境中开始编码了!

在资源管理器中单击 sort.py 打开它,然后按 F5(或右上角的绿色运行图标)运行它。

Run sort.py program

我们的 Python 代码成功运行,而无需在我们本地计算机上设置 Python。

我们还可以访问 VS Code 的所有优势,例如设置断点以暂停程序并帮助我们调试。让我们在对单词列表进行排序时设置一个断点。

Setting a breakpoint

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

Program stops at breakpoint

为您的班级创建容器

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

Hello world Python app

我们将选择“开发容器:添加开发容器配置文件……”来开始设置开发容器所需的必要文件。

Add Dev Container Configuration Files command

容器配置文件是创建和自定义开发容器所需的。显示的容器定义列表会根据您的应用程序的内容进行筛选,在本例中为 Python 文件。让我们选择“Python 3”

Select Python 3 config file in Command Palette

开发容器扩展会自动添加一个 .devcontainer 文件夹,以及其中的两个配置文件:devcontainer.json 和 Dockerfile。让我们仔细看看这两个文件。

devcontainer.json

devcontainer.json 描述了 VS Code 如何启动我们的容器以及在连接后应该执行的操作。此文件可以位于 .devcontainer/devcontainer.json 下,或者直接存储为项目根目录中的 devcontainer.json

这是一个简单的 devcontainer.json 示例。它拉取一个预配置的 Node 镜像,自动设置端口 3000 的端口转发,并在容器创建时安装 eslint 扩展。

Simple Node devcontainer.json

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

More detailed Python devcontainer.json

devcontainer.json 是一个很好的机会,可以创建一个定制的编码环境,以满足学生的特定需求。您可以指定一些变量,为每个班级或作业创建独特的环境。

我们建议在 devcontainer.json 中用于教育的变量有:

属性 类型 描述
image 字符串 容器注册表(例如 DockerHub)中镜像的名称,VS Code 应该使用该镜像来创建开发容器。
dockerFile 字符串 定义容器内容的 Dockerfile 的位置。该路径相对于 devcontainer.json 文件。您可以在 vscode-dev-containers 仓库 中找到许多针对不同运行时的 Dockerfile 示例。
name 字符串 容器的显示名称。
extensions 数组 扩展 ID 数组,指定容器创建时应安装的扩展。默认为 []
settings 对象 在容器/机器特定的设置文件中添加默认的 settings.json 值。

在这个文件中设置一些变量,从长远来看可以节省你班级的学习时间。例如,您可以使用 extensions 变量来确保所有学生都自动获得相同的扩展集。设置路径也可能具有挑战性或导致学生计算机上的问题,但是通过使用 settings 变量指定路径信息,您可以节省班级的学习时间,并确保他们的计算机路径变量不会在这个过程中受到损害。

devcontainer.json 参考 中有包含在该配置文件中的所有可用属性的表格。

Dockerfile

Docker 可以通过读取 Dockerfile 中的指令来自动构建镜像。此文件至少应指定一个使用 FROM 指令的基镜像,并且还可以包含命令行指令。

以下是我们 Python 应用程序的 Dockerfile 示例:

Python dockerfile in app

打开容器

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

Reopen in container notification

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

Relaunch VS Code to start dev container

构建容器后,我们拥有所有相同的文件,但现在左下角的指示器显示“开发容器:Python 3”,表示我们身处容器之中。我们可以轻松地运行代码,而不管我们的本地机器上安装了哪个版本的 Python(如果有的话)!

Run Python code in dev container

创建和共享作业

现在你有了开发容器,你可以将其上传到一个仓库,以便你的学生可以访问它来完成他们的作业。您可以在 README 中包含作业说明,以及作业所需的所有基本代码或模板代码,以及一个 .devcontainer 文件夹,以便他们都拥有一个一致的开发体验。所有这些文件都可以作为一个单一的仓库上传。

确保你已经安装了 Git。您可以从 VS Code 中的容器项目 初始化一个新的 Git 仓库。或者,您也可以在命令行中从项目的目录使用 git init 命令。

下一步是将本地仓库连接到浏览器中的 新仓库

Create a new GitHub repo online

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

Connect Git repos in command prompt

系统可能会提示您登录 GitHub。登录后,您的文件将被添加到您的远程 Git 仓库。

Push remote files in command prompt

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

View files in GitHub repo in browser online

有关如何将仓库上传到 GitHub 的更多信息,请查看 此将现有项目添加到 GitHub 的指南

访问作业

要查看学生如何从 GitHub 访问开发容器并轻松开始编程,请查看我们的 简短的 5 分钟视频

反馈和更多资源

为了帮助您使用容器设置 VS Code,我们已经在 VS Code 的 远程开发文档 中提供了详细的文章。如果您有任何问题或反馈,请随时在 VS Code 的 远程开发 GitHub 仓库 中提交一个问题,或在 Twitter 上联系我们 @code

祝您编程愉快!

Brigit Murtaugh,VS Code 程序经理 @BrigitMurtaugh