尝试以扩展 VS Code 中的代理模式!

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

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

我们从许多教育者那里听说,学期的最初几天或几周可能会因配置学生所需的正确环境而浪费掉。即便如此,学生最终可能仍然面临低质量的开发体验或作业评分不足的问题。

“为我的学生进行设置通常需要五个课时。有各种 Python 版本需要处理。这非常复杂。遗憾的是,解决这种复杂性需要耗费大量时间和金钱。” -[美国社区大学计算机科学 101 教授]

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

结合 Visual Studio Code 的开发容器可以在教育中作为一项出色的工具,确保学生拥有一致的编码环境。它们负责处理设置,让学生和讲师能够快速跳过配置阶段,转而专注于真正重要的事情:学习和编写出色的代码!

开发容器

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

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

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

Containers diagram

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

VS Code 中的开发容器

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

开发容器扩展仅支持基于 Linux 的容器,因此尽管学生在自己的计算机上可能使用不同的操作系统,但编码环境将在所有学生之间保持一致。

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

本文将为希望在课堂中实施开发容器以帮助学生创建更流畅、更一致环境的讲师提供指南。

要亲眼目睹开发容器的实际应用以及学生如何在短短 5 分钟内上手,请观看我们的学生入门视频

讲师指南

采用传统的设置方法,学生在配置环境时可能会遇到各种各样的问题。例如,他们独特的操作系统、项目文件的存储位置,或者他们安装的运行时或工具之间的细微差异。讲师需要精通所有这些细节才能帮助学生解决这些问题。

一个常见问题是管理工具的不同版本。以 Python 为例:有 Python 2 和 Python 3,以及不同的次要版本。拥有多个 Python 版本,然后还有多个配套工具(如代码检查器),可能会令人困惑并导致错误。

为了节省大量时间和避免混淆,我们可以使用开发容器在整个课堂中创建一个标准化的 Python 开发环境。学生都将获得相同版本的 Python,避免了安装新版本或卸载旧版本的需要,并且每个人运行相同的容器和源代码都将获得完全相同的结果。

先决条件

  • 安装 Visual Studio Code
  • 安装 Docker Desktop。
    • Docker 是构建和共享容器的行业标准。我们推荐 Docker Desktop Stable 2.3.0.3,因为它是 Docker Desktop 最新且性能最佳的版本。
    • Windows 家庭版现已新增 Docker Desktop 支持。它需要 Windows 10 2004 版以及启用适用于 Linux 2 的 Windows 子系统 (WSL 2) 后端。请按照 WSL 2 安装指南启用 WSL 2。
    • 对于不愿配置 WSL 2 后端的学生,Windows 版 Docker Desktop 也可以在 Windows 10 专业版、企业版或教育版(内部版本 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 作业都可以使用相同的容器并存储在同一个仓库中。

我们有一个包含 Python 开发容器和两个 Python 入门作业的示例 vscode-course-sample GitHub 仓库。让我们在 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

这是我们 Python 项目的一个稍微复杂一点的 devcontainer.json 示例。它使用 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 从项目的目录初始化。

下一步是将您的本地存储库连接到浏览器中 GitHub 上的新仓库

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