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