教育中的開發容器:講師指南
2020年7月27日,作者:Brigit Murtaugh,@BrigitMurtaugh
我們從許多教育工作者那裡聽說,學期的最初幾天甚至幾周可能都浪費在了為學生配置正確的環境上。即使如此,學生最終也可能得到低質量的開發體驗,或者他們的作業評分不準確。
“為我的學生設定環境通常需要五個課時。有各種Python版本需要處理。有很多複雜性。不幸的是,解決這些複雜性需要花費大量時間和金錢。” -[美國社群大學計算機科學101教授]
“我更喜歡一個專門為Python安裝設定的VS Code版本...” -[文理學院助理教授]
Visual Studio Code 中的開發容器可以作為教育中確保學生擁有一致編碼環境的絕佳工具。它們負責設定,以便學生和講師可以快速跳過配置,轉而專注於真正重要的事情:學習和編寫出色的程式碼!
開發容器
那麼,什麼是開發容器呢?容器是打包程式碼以及執行程式碼所需所有依賴項的軟體片段,包括執行時、工具、庫和設定。容器最初是為了在一致環境中部署和管理應用程式,並更有效地利用硬體而建立的。後來它們演變為幫助提供一致的構建環境,最近又發展到提供開發環境。這就是“開發容器”這個名字的由來。
當你建立容器時,它的初始內容來自於所謂的“映象”。映象可以被視為一個迷你磁碟驅動器,其中預裝了作業系統和其他工具。你使用 Dockerfile 來描述映象中包含的內容,一旦執行該映象,它就變成了容器。
開發容器提供了獨立於你計算機的編碼環境。例如,如果你下載了特定版本的依賴項,該版本將是容器獨有的。在下圖中,請注意容器如何包含應用程式及其必要的依賴項,使計算機(主機作業系統和基礎設施)保持乾淨,不含任何依賴項。

作為講師,你可以為一項作業建立一個特定的映象。每個學生都將獲得完全相同的依賴項版本,例如相同版本的 Python 或 C++ 編譯器,無論他們的作業系統或計算機上已安裝的其他檔案如何。
VS Code 中的開發容器
Visual Studio Code Dev Containers 擴充套件允許你使用容器作為主要的編碼環境。在課堂上,講師可以獲取一個現有的開發容器,或者建立自己的容器,並與班級共享。每個學生都可以在VS Code中開啟該容器,並自動擁有開發應用程式所需的工具和執行時。在編碼時,學生還可以訪問VS Code的全部功能集,包括IntelliSense和除錯。
Dev Containers 擴充套件僅適用於基於 Linux 的容器,因此儘管學生的計算機上可能有不同的作業系統,但編碼環境在所有計算機上都將保持一致。
我們已經看到講師在課堂上成功使用開發容器。你可以檢視使用開發容器標準化學生開發環境:經驗報告,瞭解三位研究人員在加州大學聖地亞哥分校的課程中使用開發容器的經驗。
這篇文章將作為講師指南,幫助他們在課堂上實施開發容器,為學生創造一個更流暢、更一致的環境。
要親眼目睹開發容器的實際操作以及學生如何在短短5分鐘內上手,請檢視我們的學生入門影片。
講師指南
使用傳統的設定方法,學生在設定環境時可能會遇到各種各樣的問題。一些例子包括他們獨特的作業系統差異、專案檔案儲存位置的差異,或者他們已安裝的執行時或工具的微小差異。講師需要非常熟悉所有這些細微差別才能幫助學生解決這些問題。
一個常見的問題是管理不同版本的工具。以 Python 為例:有 Python 2 和 Python 3,以及不同的次要版本。擁有多個版本的 Python,以及多個配套工具(如 linters),可能會讓人感到困惑並導致錯誤。
為了節省大量時間和避免混淆,我們可以使用開發容器為我們的課程建立標準化的 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 10 專業版、企業版或教育版(Build 16299 或更高版本)上使用Docker Desktop for Windows,並且必須啟用 Hyper-V 和 Containers Windows 功能。
讓我們從啟動 VS Code開始,我們可以在命令提示符或終端中鍵入code(或者直接在計算機上選擇VS Code)來啟動它。

VS Code 啟動後,確保你已安裝Dev Containers 擴充套件

當我們安裝任何遠端擴充套件時,狀態列的左下角會新增綠色的遠端指示器。

你可以點選它開啟命令面板並驗證 Dev Containers 命令是否已列出。

訪問課程的容器
讓我們透過一個示例開發容器來幫助學生獲得一致的編碼環境。在我們的課堂上,我們可以建立一個單獨的 GitHub 倉庫來儲存共享相同技術棧的練習。例如,所有的 Python 作業都可以使用同一個容器並存儲在同一個倉庫中。
我們有一個示例vscode-course-sample GitHub 倉庫,其中包含一個 Python 開發容器和兩個 Python 入門作業。讓我們在 VS Code 中開啟它。
你可以選擇左下角的遠端指示器,或使用命令面板,調出 Dev Containers 命令。
讓我們呼叫Clone Repository in Container Volume...(在容器卷中克隆倉庫...)

我們需要輸入儲存容器的 GitHub 倉庫的 URL,在我們的例子中是 microsoft/vscode-course-sample

你可以建立唯一的卷。卷是我們的檔案將儲存在容器中的位置。

現在我們選擇了容器倉庫,VS Code 重新載入以構建映象並啟動容器。

一旦容器構建並執行,我們的檔案就會載入,我們就可以在我們的 Python 環境中開始編碼了!
點選資源管理器中的sort.py開啟它,然後按F5(或右上角的綠色執行圖示)來執行它。

我們的 Python 程式碼成功執行,而無需在本地計算機上設定 Python。
我們還可以使用 VS Code 的所有優點,例如設定斷點來暫停程式並幫助我們除錯。讓我們在排序單詞列表時設定一個斷點。

我們可以按F5執行程式。請注意,程式在遇到斷點時停止。

為你的課程建立容器
現在我們已經看到了一個絕佳的容器示例,讓我們自己使用 Dev Containers 擴充套件設定第一個容器。讓我們從一個“Hello World”Python 應用程式開始。

我們將選擇 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 擴充套件。

這是一個稍微複雜一點的 devcontainer.json 示例,適用於我們的 Python 專案。它使用 dockerfile 屬性引用 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