用Visual Studio Code在教育领域开发容器

60 阅读11分钟

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

我们从许多教育工作者那里听说,学期的头几天或几周可能会因为为学生配置正确的环境而失去机会。即便如此,学生最终仍可能获得低质量的开发体验或作业评分不足。

"为我的学生设置环境通常需要五节课的时间。有Python的版本需要处理。有很多的复杂性。可悲的是,这种复杂性需要大量的时间和金钱来解决。"-[社区学院美国教授CS 101]

"我希望有一个VS Code版本,专门为Python安装而设置..."-[文学院助理教授]

使用Visual Studio Code的开发容器可以作为教育中的一个神奇的工具,确保学生有一个一致的编码环境。他们负责设置,这样学生和导师就可以快速地超越配置,而专注于真正重要的事情:学习和编码一些伟大的东西!"。

开发容器

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

当你创建一个容器时,它的初始内容来自所谓的 "镜像"。一个镜像可以被认为是一个小型的磁盘驱动器,里面预装了操作系统和其他工具。你用Docker文件描述进入镜像的内容,一旦你运行镜像,它就成为一个容器。

开发容器提供了一个独立于计算机的编码环境。例如,如果你下载了一个特定版本的依赖,这个版本对容器来说是唯一的。在下图中,注意到容器如何包括应用程序及其必要的依赖性,保持计算机(主机操作系统和基础设施)的自由和清洁,没有任何依赖性。

Containers diagram

作为一名教师,你可以为一项作业创建一个特定的图像。每个学生都会得到完全相同的依赖版本,如相同版本的Python或C++编译器,而不考虑他们的操作系统或已经安装在他们计算机上的任何其他文件。

VS代码中的远程 - 容器

Visual Studio Code远程-容器扩展让你使用一个容器作为你的主要编码环境。在课堂上,教师可以利用现有的开发容器,或创建自己的容器,并与全班分享。每个学生都可以在VS Code中打开该容器,并自动拥有他们开发应用程序所需的工具和运行机制。学生在编码时还可以使用VS Code的全部功能集,包括IntelliSense和调试。

远程 - 容器扩展只适用于基于Linux的容器,所以尽管学生的电脑上可能有不同的操作系统,但编码环境在所有的电脑上都是一致的。

我们已经看到导师们在他们的课堂上成功地使用了Remote - Containers。你可以查看《使用DevContainers来规范学生开发环境。经验报告,了解更多关于三位研究人员在加州大学圣地亚哥分校的课程中使用开发容器的经验。

这篇文章将作为希望在课堂上实施开发容器的导师的指南,为他们的学生创造一个更顺畅、更一致的环境。

要见证开发容器的运作以及学生如何在短短5分钟内开始使用,请看我们的学生介绍视频

教员指南

通过传统的设置方法,学生在设置环境时可能会遇到各种各样的问题。一些例子包括他们独特的操作系统的差异,项目文件的存储位置,或者他们所安装的运行时间或工具的小差异。教员需要精通所有这些微妙之处,以便能够帮助学生解决这些问题。

一个常见的问题是管理一个工具的不同版本。让我们以Python为例:有Python 2和Python 3,还有不同的次要版本。有多个版本的Python,然后又有多个配套的工具,如linters,会让人感到困惑并导致错误。

为了节省大量的时间和混乱,我们可以使用开发容器在全班创造一个标准化的 Python 开发环境。学生们都会得到相同版本的Python,避免了安装新版本或卸载任何旧版本的需要,而且每个人运行相同的容器和源代码都会得到完全相同的结果。

先决条件

  • 安装Visual Studio Code
  • 安装Docker桌面。
    • 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和Containers Windows功能。

让我们从启动VS Code开始,我们可以通过在命令提示符或终端输入code (或者只是在你的电脑上选择VS Code):

Launch VS Code from command prompt

一旦VS Code启动,确保你已经安装了Remote - Containers扩展:

Remote containers extension

当我们安装了任何一个远程扩展时,绿色的远程指示器会被添加到状态栏的左下方:

Remote indicator in VS Code

你可以点击它来打开命令调色板,并确认Remote-Containers命令被列出:

List of remote commands in Command Palette

为你的类访问一个容器

让我们走过一个开发容器的例子,帮助学生获得一个一致的编码环境。在我们的教室里,我们可以创建一个GitHub仓库来存储共享相同技术栈的练习。例如,所有的Python作业都可以使用同一个容器,并存储在同一个repo中。

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

你可以选择左下角的远程指标,或者使用命令调色板,来调出远程容器的命令。

让我们在容器卷中调用Clone Repository...

Clone Repository in Container Volume

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

Paste GitHub URL in Command Palette

你可以**创建一个独特的卷。**卷是文件在我们的容器中储存的地方。

Volume options in Command Palette

现在我们已经选择了我们的容器 repo,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

为你的类创建一个容器

现在我们已经看到了一个关于容器的奇妙的例子,让我们使用Remote - Containers扩展来建立我们自己的第一个容器。让我们从一个 "Hello World "的Python应用程序开始。

Hello world Python app

我们将选择Remote-Containers。添加开发容器配置文件...来开始设置开发容器所需的文件。

Add Development 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 属性引用了一个Docker文件,而不是直接引用一个镜像。它还自动安装了Python扩展,并在容器创建后建立了一套特定于容器的设置,比如提示性设置。

More detailed Python devcontainer.json

devcontainer.json 是创造一个定制的编码环境以适应学生的具体需求的好机会。你可以指定一些变量来为每个班级或作业创建一个独特的环境。

devcontainer.json ,我们建议开始时使用的变量是。

属性类型描述
image字符串容器注册表(如DockerHub)中的镜像名称,VS Code应该使用它来创建开发容器。
dockerFile字符串定义容器内容的Docker文件的位置。该路径是相对于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 文件夹,以便他们都有一个一致的开发经验。所有这些文件都可以作为一个单一的 repo 上传。

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

下一步是在浏览器中把你的本地仓库和GitHub的新仓库连接起来。

Create a new GitHub repo online

然后,我们要把本地的Git repo(我们电脑上的容器项目)连接到远程的repo(我们在浏览器中创建的GitHub repo)。

Connect Git repos in command prompt

你可能会被提示登录GitHub。登录后,你的文件就可以被添加到远程 Git 仓库中。

Push remote files in command prompt

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

View files in GitHub repo in browser online