🚀 在 VS Code 中取得

在 WSL 2 中使用開發容器

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

藉由 Docker 容器和適用於 Linux 的 Windows 子系統 2 (WSL 2) 的強大功能,您可以在深度整合的 Linux 核心中的容器沙箱熟悉環境中開發應用程式,藉此保留您的 Windows 環境。

五月為我們帶來了幾項令人興奮的公告:Windows 10 2020 年 5 月更新新增了 WSL 2 作為開箱即用的功能,而 Docker Desktop Stable 2.3.0.2 正式發布,支援 WSL 2 後端。

先前的部落格文章中,我們探討如何在 WSL 2 中使用 Docker。首要條件是安裝 Windows 測試人員組建,因為 WSL 2 支援當時還不是穩定 Windows 版本的一部分,其次是安裝 Docker WSL 2 技術預覽版。現在,Windows WSL 2 和 Docker 支援都已正式發布!

在這篇文章中,我們將了解這兩個工具如何運作,以及如何在 Visual Studio Code 中善用它們,以在 WSL 2 中有效率地使用開發容器。

虛擬化的新紀元

WSL 2 和最新版本的 Docker Desktop 都改變了虛擬化的運作方式。

WSL 2

如同先前的文章所述,WSL 2 在適用於 Linux 的 Windows 子系統上採用了新方法,在輕量型虛擬機器 (VM) 內使用真正的 Linux 核心。它經過最佳化,能無縫且深度整合到您的 Windows 環境中,讓您擁有快速啟動時間、資源佔用空間小,而且完全不需要 VM 設定或管理。

系統呼叫讓您能執行諸如存取檔案、要求記憶體和建立程序等功能。由於 WSL 2 包含完整的 Linux 核心,因此它具有完整的系統呼叫能力,這表示您最愛的應用程式 (例如 Docker) 將能完整且可靠地運作。

Docker

在 WSL 1 中,由於 Windows 和 Linux 之間的基本差異,Docker Engine 無法直接在 WSL 內部執行,而 Docker 團隊開發了使用 Hyper-V VM 和 LinuxKit 的替代解決方案。然而,由於 WSL 2 現在具有完整的系統呼叫能力,Docker 就能在 WSL 2 中完整執行,這促使 Docker 團隊投入更多資源。

新的 2020 年 5 月版 Docker Desktop 可以更快速地建置容器,並消耗更少的資源,因為它運用了 WSL 2 的動態記憶體配置。它可以在不到 10 秒內冷啟動,而先前的版本幾乎需要一分鐘。此外,Hyper-V 不再是必要條件,因此這篇文章詳述的步驟適用於 Windows 10 Home。

由於 Windows 中的 WSL 2 和 Docker Desktop 現在都已正式發布,您可以更有信心地在 WSL 2 中使用您的開發容器。

開始使用

先決條件

安裝完成後,Docker 會辨識到您已安裝 WSL,並提示您啟用 WSL 整合。從快顯視窗中選取 [啟用 WSL 整合]。

Docker Desktop WSL integration dialog

選用:安裝新的 Windows 終端機以獲得最佳體驗,包括在同一個介面中開啟新的 PowerShell 和 Ubuntu 終端機的功能。

在 WSL 2 中開啟 VS Code

讓我們將 VS Code 連線到我們的 WSL 2 引擎。開啟 Ubuntu 終端機,瀏覽至您選擇的原始碼資料夾,然後輸入 code .。這會啟動一個 VS Code 執行個體,讓您可以使用 WSL 作為您的全職開發環境。您也可以從命令選擇區連線到 WSL。我將開啟一個簡單的 HelloNode 應用程式

Launch code . from Ubuntu terminal

VS Code 開啟後,它會辨識到我們已安裝 WSL,並建議我們安裝 WSL 擴充功能。我將選取 [安裝]

WSL extension recommended

安裝擴充功能後,我們可以重新載入 VS Code 以連線到 WSL 2

Reload VS Code after installing extension

重新載入後,我們可以透過檢查視窗左下角的 WSL 指示器來確認我們已連線到 Ubuntu

WSL: Ubuntu bottom left indicator

安裝 WSL 擴充功能後,會在 VS Code 中新增遠端瀏覽器。當我們查看瀏覽器內部時,可以看到關於我們的 Linux 發行版本的資訊

Remote Explorer with WSL Targets

使用容器

除了各種其他情境 (例如) 之外,我們還可以運用開發容器擴充功能來檢視和附加至容器:

這些組態讓您能夠輕鬆地在不同機器之間重新建立相同的開發環境、將專案特定的工具和擴充功能安裝到開發容器中,以及在類似於部署環境的設定中開發,藉此讓本機保持不變。我們也可以使用 Docker 擴充功能來檢視和附加至容器。

當使用 WSL 2 引擎時,雖然您可以從 Windows 和 WSL 2 檔案系統存取原始碼,但我們建議使用 WSL 2 檔案系統,因為效能更好。由於當使用 WSL 2 內部的檔案系統時效能更好,讓我們逐步了解如何使用它。

我們需要選取要在容器中開啟的資料夾。首先,請確定您已安裝 開發容器 擴充功能。接著,我們可以從已使用 WSL 擴充功能開啟的資料夾中呼叫 [開發容器: 在容器中重新開啟] 命令。

我的 WSL 2 檔案系統上有一個現有的 HelloNode 資料夾,其中包含我的 Node 專案。我將選取: [開發容器: 在容器中重新開啟]

Command Palette: Dev Containers: Reopen in Container

將會出現容器定義的清單,因為儲存庫中尚無開發容器組態。出現的容器組態定義清單會根據我的專案類型進行篩選。我將選取 [Node.js 14]

Command Palette: Node.js 14

會開啟一個新的 VS Code 執行個體。VS Code 開始建置映像,然後啟動我們的容器

VS Code instance starting with Dev Container

我們的應用程式現在有一個 .devcontainer 資料夾,其中儲存了容器組態資訊。為了再次確認我們已連線到 WSL 且位於容器內部,讓我們開啟整合式終端機並檢查 uname 和 Node 版本

Check uname and node -v

如我們所見,我們的 uname 回傳為 Linux,因此我們仍然連線到 WSL 2 引擎,而 node -v 回傳 v14.4.0,因此我們已成功設定我們的 Node 14 容器。

讓我們嘗試使用 F5 執行我們的應用程式

Local host running Hello World app

成功!

意見回饋與延伸閱讀

為了協助設定 VS Code 與 WSL 和容器,我們在 VS Code 遠端開發文件中提供了詳細的文章。如果您對我們的團隊有任何問題或意見回饋,請隨時在 VS Code 遠端開發 GitHub 儲存庫上開啟問題,或在 Twitter 上推文給我們 @code

快樂編碼!

Brigit Murtaugh,VS Code 專案經理 @BrigitMurtaugh