使用 VS Code 檢查容器

2019 年 10 月 31 日，作者 Bowden Kelly，@bowdenk7

在開發容器化應用程式時，常見的做法是嘗試透過將 Shell 附加到正在執行的容器，使用 docker exec --it {containerID} /bin/sh 來偵錯建置和執行階段問題。

此技術可讓您透過命令列檢查容器環境，但無法提供豐富的工具集來診斷問題。

在這篇文章中，我們將探討如何將 Visual Studio Code 附加到您的容器，以便您可以使用 VS Code 的完整功能，包括偵錯，來檢查容器、找出問題所在並加以修正。

今年五月推出的 開發容器 擴充功能，可讓您將本機 VS Code 連接到容器主機，同時保留所有個人化設定、佈景主題和按鍵繫結。

先決條件

這篇部落格文章假設您已安裝 Docker Desktop 和 Visual Studio Code。您還需要 開發容器 擴充功能。若要安裝開發容器擴充功能，請開啟擴充功能檢視 (⇧⌘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://127.0.0.1:3000 並看到以下內容

附加到容器

我們現在可以使用開發容器擴充功能來附加到我們正在執行的容器，檢查環境，並偵錯應用程式。

選取活動列中的「遠端資源管理器」，以查看您可以附加的正在執行容器列表，位於「其他容器」區段中。找到我們剛剛啟動的容器，它的名稱為「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 並在第 6 行設定中斷點，方法是按一下邊溝或按下 F9。

res.render('index', { title: 'Express' });

現在前往瀏覽器中的 https://127.0.0.1:3000，並查看中斷點如預期觸發！

安裝擴充功能

就像正常的 VS Code 執行個體一樣，您可以在附加到開發容器時安裝和使用擴充功能。

根據擴充功能的類型，它可以client 端執行或在容器中的遠端 VS Code 伺服器上執行。主要基於 UI 的擴充功能 (例如佈景主題和程式碼片段) 會保留在 client 端，而所有其他擴充功能都會安裝在容器中。這可讓您在每個環境中工作時只擁有您需要的擴充功能，同時在所有環境中保持一致的 UI。

如果您開啟擴充功能檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X))，您將看到您在本機安裝的擴充功能列表，以及您在目前容器執行個體中安裝的擴充功能。需要在容器中安裝的本機安裝擴充功能 (如下方的 Azure 帳戶擴充功能) 將會呈現灰色。

讓我們透過在擴充功能檢視中輸入「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