使用 VS Code 檢查容器
2019 年 10 月 31 日，由 Bowden Kelly (@bowdenk7) 釋出
在開發容器化應用程式時，通常會嘗試使用 docker exec --it {containerID} /bin/sh 將 shell 附加到正在執行的容器來除錯構建和執行時問題。
此技術允許您透過命令列檢查容器環境，但它沒有為您提供豐富的工具集來診斷問題。
在本文中，我們將探討如何將 Visual Studio Code 附加到您的容器，以便您可以使用 VS Code 的全部功能（包括除錯）來檢查容器、找出問題所在並進行修復。
今年 5 月推出的 Dev Containers 擴充套件允許您將本地 VS Code 連線到容器主機，同時保留所有個性化設定、主題和按鍵繫結。
先決條件
本部落格文章假定您已安裝 Docker Desktop 和 Visual Studio Code。您還需要 Dev Containers 擴充套件。要安裝 Dev Containers 擴充套件，請開啟“擴充套件”檢視 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，搜尋 “Dev Containers”，選擇安裝 (Install)，並在出現提示時重新啟動 VS Code。
應用程式
我們首先需要一個可以在容器中執行的應用程式。如果您已經有了，那太好了！您可以跳過此步驟。如果沒有，您可以克隆這個簡單的 Node.js Express 應用程式。
注意：您無需在本地安裝 Node.js，我們將在容器中執行此應用程式！
git clone https://github.com/microsoft/vscode-express-sample.git
此應用程式有一個簡單的 Dockerfile，它基於 Node 10 映象，還有一個 docker-compose.yml 檔案，我們將用它來執行映象、公開適當的埠，並對映本地檔案系統。我們使用 –inspect 標誌執行 Node，以便我們可以像在本地執行時一樣除錯應用程式。在實際的應用程式中，您可能需要一個單獨的 Docker Compose 檔案用於生產部署。
注意：您不需要 Docker Compose 檔案，也可以附加到使用單個 Dockerfile 建立的容器。
構建和執行
要構建和執行應用程式，我們首先要安裝依賴項，然後在終端/命令提示符中執行 docker-compose up。這將下載 Node 基礎映象，複製依賴項，並啟動容器。
docker-compose up
如果一切正常，您應該會看到如下輸出：
並且，您應該能夠導航到 https://:3000 並看到以下內容：
附加到容器
現在我們可以使用 Dev Containers 擴充套件附加到正在執行的容器，檢查環境，並除錯應用程式。
在活動欄中選擇“遠端資源管理器”(Remote Explorer)，以在其他容器 (Other Containers) 部分檢視可以附加的正在執行的容器列表。找到我們剛剛啟動的容器，其名稱為“express_server_1”，然後使用連線到容器 (Connect to Container) 按鈕附加到它。該容器現在應該顯示在“遠端資源管理器”的已附加容器 (Attached Containers) 部分。
這將啟動一個新的 VS Code 視窗（例項），右下角有以下通知。
在此期間，VS Code 正在應用程式執行的容器內部安裝一個 VS Code 伺服器 (Server) 例項。要檢視有關此安裝步驟的更多詳細資訊和進度，您可以選擇通知中顯示的詳細資訊 (details) 連結。一旦 VS Code 伺服器安裝完畢，您的本地 VS Code 客戶端將連線到遠端 VS Code 伺服器。結果是，您本地的 VS Code 例項，連同您所有的設定、主題和按鍵繫結，都連線到了在容器內與您的應用程式一起執行的“後端”。
連線完成後，您應該會有一個新的 VS Code 視窗，左下角有一個綠色指示器，表明此 VS Code 例項正在遠端上下文中執行。如果單擊該指示器，您將看到一個與當前遠端上下文相關的命令下拉列表。
讓我們透過選擇開啟資料夾 (Open Folder) 按鈕並導航到 /usr/src/app 來開啟我們的應用程式。請注意，“開啟資料夾”對話方塊顯示的是正在執行的容器中的檔案系統，而不是本地檔案系統。
開啟原始檔夾後，您會注意到編輯器中打開了一個名為 express-server.json 的檔案。這個名稱是根據您附加到的容器映象名稱派生的。在我們的示例中，docker-compose 建立了映象名稱“express_server”，該名稱源自資料夾名稱 express 和在 docker-compose.yml 檔案中定義的服務名稱 server。此檔案是與您的映象關聯的配置檔案，當您附加到基於此映象的容器時，它會記住配置設定。如果您沒有開啟自動儲存，則需要確保儲存此檔案。現在，在以後的會話中，當您附加到此映象時，VS Code 將重新開啟此原始檔夾。
注意：您可以透過從命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 執行 Open Container Configuration File 命令來檢視當前開發容器的此檔案。
此時，VS Code 看起來與普通的本地 VS Code 視窗相同。
您可以執行在普通本地 VS Code 上下文中可以執行的任何操作。
例如，開啟 app.js。右鍵單擊第 8 行並執行查詢所有引用 (Find All References) 以查詢 usersRouter 的所有用法。任何編輯都會持久化到本地磁碟，因為我們使用 docker-compose 檔案將本地檔案系統掛載到了容器中。
在容器內除錯
為了進一步展示開發容器與本地環境的相似性，讓我們附加一個偵錯程式。我們在 docker-compose.yaml 中使用 –inspect 引數啟動了 Node 應用程式，因此我們所要做的就是將偵錯程式附加到該程序。
在命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中，搜尋並選擇 Debug: Attach to Node Process。容器內可能正在執行多個 Node 程序。我們想要的是執行我們應用程式的程序，因此選擇顯示 bin/www 的那個。
接下來，開啟 index.js 並在第 6 行設定一個斷點，方法是單擊行號槽或按 F9。
res.render('index', { title: 'Express' });
現在，在瀏覽器中訪問 https://:3000，您會看到斷點如期觸發！
安裝擴充套件
就像普通的 VS Code 例項一樣，您可以在附加到開發容器時安裝和使用擴充套件。
根據擴充套件的型別，它既可以在客戶端執行，也可以在容器中的遠端 VS Code 伺服器上執行。主要基於 UI 的擴充套件（如主題和程式碼片段）保留在客戶端，而所有其他擴充套件則安裝在容器中。這使您可以在每個環境中只擁有所需的擴充套件，同時在所有環境中保持一致的 UI。
如果您開啟“擴充套件”檢視 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，您將看到已在本地安裝的擴充套件列表以及已在當前容器例項中安裝的擴充套件列表。需要安裝在容器中的本地已安裝擴充套件（如下面的 Azure Account 擴充套件）將顯示為灰色。
讓我們安裝 GitLens 擴充套件，方法是在“擴充套件”檢視中鍵入“gitlens”，然後選擇在附加的容器中安裝 (Install in Attached Container)。
這將提示您重新啟動 VS Code，重新啟動後，您將短暫地看到正在安裝開發容器 (Installing Dev Container) 的通知，因為容器和 VS Code 伺服器會隨著我們新安裝的擴充套件而重新啟動。
您還會注意到，我們之前看到的容器配置檔案再次開啟，並更新了一個新屬性，列出了我們希望每次附加到此映象時安裝的擴充套件。
{
"workspace": "/usr/src/app",
"extensions": ["eamodio.gitlens"]
}
現在開啟任何檔案，選擇一行程式碼，就會注意到 GitLens 提供的內聯 Git 資訊！
清理
完成後，您可以從命令面板執行 Close Remote Connection 命令，或者直接關閉 VS Code 視窗以終止遠端連線。
現在，在終端/命令提示符中，執行 docker-compose down 來停止正在執行的容器。這將釋放記憶體並釋放任何已使用的埠。
docker-compose down
現在，您已準備好啟動另一個容器並開始另一個專案了！
後續步驟
在這篇部落格文章中，我們介紹瞭如何使用 Dev Containers 擴充套件附加到現有的容器化應用程式。
您還可以建立一個 devcontainer.json 檔案，它描述了您想要建立或附加的開發環境，並與您的專案一起存放，以便與團隊成員共享。
其他有用的資源包括完整的 在容器內開發 文件、高階容器配置，以及我們關於使用 Dev Containers 擴充套件構建隔離開發環境的入門教程。
遠端編碼愉快！
Bowden Kelly, VS Code 專案經理 @bowdenk7