教育中的開發容器：教師指南

Name: Visual Studio Code
Author: Microsoft

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 版本，以及多個附帶工具（例如程式碼檢查器），可能會令人困惑並導致錯誤。

為了節省大量的時間和避免混淆，我們可以使用開發容器為我們的班級建立標準化的 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 專業版、企業版或教育版（組建 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 環境中編寫程式碼！

按一下 Explorer 中的 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 參考中有表格列出您可以包含在此組態檔中的所有可用屬性。