參加你附近的 ，瞭解 VS Code 中的 AI 輔助開發。

容器中的 Node.js

在本指南中，您將學習如何

  • 為 Express Node.js 服務容器建立一個 Dockerfile 檔案
  • 構建、執行並驗證服務的功能
  • 除錯在容器內執行的服務

先決條件

  • 必須按照概述中的說明安裝 Docker 和 VS Code Container Tools 擴充套件
  • Node.js 10 或更高版本

建立一個 Express Node.js 應用程式

  1. 為專案建立一個資料夾。

  2. 在專案資料夾中開啟一個開發命令提示符並建立專案

    npx express-generator
npm install

向專案新增 Docker 檔案

  1. 在 VS Code 中開啟專案資料夾。

  2. 開啟命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 並使用 Containers: Add Docker Files to Workspace... 命令

    Add Dockerfile to a Node.js project

  3. 當提示選擇應用程式平臺時，選擇 Node.js。

  4. 選擇預設的 package.json 檔案。

  5. 當提示輸入應用程式埠時，輸入 3000。

  6. 當提示是否包含 Docker Compose 檔案時，選擇是或否。Compose 通常在同時執行多個容器時使用。

該擴充套件會建立 Dockerfile 和 .dockerignore 檔案。如果你選擇包含 Docker Compose 檔案，還會生成 docker-compose.yml 和 docker-compose.debug.yml。最後，該擴充套件會在 .vscode/tasks.json 中建立一組用於構建和執行容器（包括除錯和釋出配置）的 VS Code 任務，並在 .vscode/launch.json 中建立一個用於在容器內除錯服務的啟動除錯配置。

向映象新增環境變數

Container Tools 擴充套件透過使用 IntelliSense 提供自動補全和上下文幫助，來協助你編寫 Dockerfile。要檢視此功能的實際效果，請按照以下步驟為你的服務映象新增一個環境變數

  1. 開啟 Dockerfile 檔案。

  2. 使用 ENV 指令向服務容器映象新增一個環境變數。

    Add an environment variable to Docker image

    請注意 Container Tools 擴充套件如何列出所有可用的 Dockerfile 指令並描述其語法。

    Container Tools 擴充套件使用 Dockerfile 的 base 階段為你的服務建立一個除錯版本的容器映象。將環境變數定義放在 base 階段，可以使該變數在容器映象的除錯和釋出版本中都可用。

  3. 儲存 Dockerfile 檔案。

在本地執行服務

  1. 開啟一個終端 (⌃` (Windows, Linux Ctrl+`))。

  2. 輸入 npm run start 來啟動應用程式

    > express-app@0.0.0 start /Users/user/code/scratch/express-app
> node ./bin/www

  3. 開啟 Web 瀏覽器並導航到 https://:3000。你應該會看到一個類似下面的頁面

    Application page in browser

  4. 測試完成後，在終端中鍵入 Ctrl+C。

構建服務映象

  1. 開啟命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 並選擇 Container Images: Build Image... 命令。

  2. 開啟容器資源管理器，並驗證新映象是否在“Images”檢視中可見

    Verify Docker image exists

執行服務容器

  1. 右鍵單擊上一節中構建的映象，然後選擇執行或互動式執行。容器應該會啟動，並且你應該能在“Containers”檢視中看到它

    Running service container

  2. 開啟 Web 瀏覽器並導航到 https://:3000。你應該會看到一個類似下面的頁面

    Application page in browser

  3. 測試完成後，在“Containers”檢視中右鍵單擊容器並選擇停止。

在服務容器中除錯

當 Container Tools 擴充套件嚮應用程式新增檔案時，它還會在 .vscode/launch.json 中新增一個 VS Code 偵錯程式配置，用於在容器內執行時除錯服務。該擴充套件會檢測服務使用的協議和埠，並將瀏覽器指向該服務。

  1. 在 routes/index.js 中為 '/' 路由的 get() 處理程式設定一個斷點。

  2. 確保已選擇 Containers: Node.js Launch 偵錯程式配置。

    Selected debug configuration

  3. 開始除錯（使用 F5 鍵）。

    • 服務的映象被構建。
    • 服務的容器開始執行。
    • 瀏覽器開啟並指向對映到服務容器的（隨機）埠。
    • 偵錯程式在 index.js 中的斷點處停止。

    請注意，因為偵錯程式是在應用程式啟動*之後*附加的，所以第一次可能會錯過斷點；你可能需要重新整理瀏覽器才能在第二次嘗試時看到偵錯程式在斷點處中斷。

    你可以透過在 tasks.json 的 node 物件下的 docker-run: debug 任務中，將 inspectMode 屬性設定為 break，來配置應用程式在開始執行前等待偵錯程式附加。

檢視應用程式日誌

你可以透過在容器上使用檢視日誌命令在 VS Code 中檢視日誌

  1. 導航到容器資源管理器。

  2. 在容器檢視中，右鍵單擊你的容器並選擇檢視日誌。

    Screenshot of logs in the terminal

  3. 輸出將顯示在終端中。

後續步驟

你已完成！現在你的容器已準備就緒，你可能想

12/13/2022