Share via

執行及偵錯針對 Azure Developer CLI 啟用的應用程式

  • 發行項

使用適用於 Azure 開發人員 CLI 的 azdVisual Studio Code 擴充功能，在本機電腦上執行和偵錯應用程式。 在本指南中，您將在 Azure 範本上使用 React Web 應用程式搭配 Node.js API 和 MongoDB。 您可以將本文中學到的原則套用至任何 Azure 開發人員 CLI 範本。

必要條件

安裝適用於 Azure 開發人員 CLI 的 Visual Studio Code 擴充功能

透過 Visual Studio Code

  1. 打開 Visual Studio Code。

  2. 從 [ 檢視] 功能表中，選取 [ 擴充功能]。

  3. 在搜尋欄位中，輸入 Azure Developer CLI。

  4. 選取安裝。

透過 Marketplace

  1. 使用瀏覽器，移至 [Azure 開發人員 CLI - VS Code 擴充功能 ] 頁面。

  2. 選取安裝。

初始化新的應用程式

  1. 在 Visual Studio Code 中建立並開啟新的目錄。

  2. 從 [ 檢視] 功能表中，選取 [ 命令選擇區...]。

  3. 輸入並挑選 Azure Developer: init。

    Screenshot of the option to initialize a new app.

  4. 選取樣本 Azure-Samples/todo-nodejs-mongo。

    Screenshot of selecting the todo-nodejs-mongo sample template.

探索目錄中所包含的 .vscode 下列檔案：

檔案 說明
launch.json 定義偵錯組態，例如 偵錯 Web 和 偵錯 API。 若要查看偵錯組態選項，請從 [檢視] 功能選取 [執行]。 可用的偵錯組態會列在窗格頂端。 若要深入瞭解 Visual Studio Code 中的偵錯，請參閱 偵錯。
tasks.json 定義啟動 Web 或 API 伺服器的組態。 若要查看這些組態選項，請開啟命令選擇區並執行 工作：執行工作。 若要深入瞭解 Visual Studio Code 工作，請參閱 透過工作與外部工具整合。

注意

如果您使用 C# SWA-func MS SQL 範本，您必須手動啟動啟動 API 工作，然後 偵錯 API （F5） 。 當系統要求您從執行 .NET 進程清單中挑選時，請搜尋應用程式的名稱並加以選取。

布建 Azure 資源

開始偵錯之前，請布建必要的 Azure 資源。

  1. 開啟命令選擇區。

  2. 輸入 Azure 開發人員：布建 Azure 資源。

    Screenshot of option to provision the Azure resources for a new app.

對 API 進行偵錯

偵錯組態 偵錯 API 會自動執行 API 伺服器並附加調試程式。 若要測試此模式，請執行下列步驟：

  1. 從項目的 src/api/src/routes 目錄中，開啟 lists.ts。

  2. 在行 16 設定斷點。

  3. 在 [活動列] 中，選取 [執行] 和>[偵錯 API 偵錯組態>開始偵錯] 箭號。

    Screenshot of setting the debug configuration to Debug API.

  4. 從 [檢視] 功能表中，選取 [偵錯控制台]。

  5. 等候訊息，指出調試程式正在接聽埠 3100。

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

  6. 在慣用的終端機殼層中，輸入下列命令： curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. 當您稍早設定的斷點叫用時，應用程式執行將會暫停。 此時，您可以執行標準偵錯工作，例如：

    • 檢查變數
    • 查看呼叫堆疊
    • 設定其他斷點。

  8. 按 <F5> 以繼續執行應用程式。 範例應用程式會傳回空的清單。

對 React 前端應用程式進行偵錯

若要使用偵 錯 Web 組態，您必須啟動兩者：

  • API 伺服器
  • 開發網頁伺服器

若要測試此模式，請執行下列步驟：

  1. 開啟命令選擇區並執行 工作：執行工作。

    Screenshot of running a Visual Studio Code Task.

  2. 輸入並選取 [啟動 API 和 Web]

    Screenshot of selecting the option to Start API and Web.

    您可以在網頁瀏覽器中瀏覽至下列 URL，以檢查本機網頁伺服器是否正在執行： http://localhost:3000。

  3. 在項目的 src/web/src/components 目錄中，開啟 todoItemListPane.tsx。

  4. 在第 150 行上設定斷點（函式 deleteItems 的第一行）。

  5. 在 [活動列] 中，選取 [執行] 和>[偵錯偵錯 Web 偵錯] 組態>的 [開始偵錯] 箭號。

    Screenshot of setting the debug configuration to Debug Web.

  6. 執行 Web 應用程式會導致您的預設瀏覽器開啟下列 URL： http://localhost:3000。 您現在可以藉由新增專案、從清單中選取它，以及選取 [ 刪除] 來偵錯應用程式。

    Screenshot of the sample Node JS Mongo DB app.

  7. 當您稍早設定的斷點叫用時，應用程式執行將會暫停。 此時，您可以執行標準偵錯工作，例如：

    • 檢查變數
    • 查看呼叫堆疊
    • 設定其他斷點

  8. 按 <F5> 以繼續執行應用程式，並刪除選取的專案。

使用 Visual Studio 和 Azure Developer CLI 在本機電腦上執行和偵錯應用程式。azd 在本指南中，您將使用 React Web 應用程式搭配 Azure 範本上的 C# API 和 MongoDB。 您可以將本文中學到的原則套用至任何 Azure 開發人員 CLI 範本。

必要條件

安裝並啟用預覽功能

  1. 安裝 Visual Studio 預覽

    注意

    這與 Visual Studio 不同。 如果您有非預覽版本的 Visual Studio，您仍然需要安裝此版本。

  2. 開啟 Visual Studio 預覽。

  3. 從 [工具] 功能表中，選取 [選項>預覽功能]。

  4. 確定 已啟用 Azure 開發人員 CLI 與 azd 整合。

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

開啟 API 解決方案

  1. 在 Todo.Api.sln 目錄中開啟方案 /src/api 。

    如果您已啟用azd整合功能，azure.yaml則會偵測到檔案。 Visual Studio 會自動初始化應用程式模型並執行 azd env refresh。

  2. 展開 連線 服務以查看所有相依性。

    雖然在 Azure App 服務 上執行的 Web 前端不是 API 解決方案的一部分，但會偵測並包含在服務相依性下

    Screenshot of the message indicating the Azure Developer CLI is initialized.

執行和偵錯

  1. 從項目的 src/api 目錄中，開啟 ListController.cs。

  2. 在行 20 設定斷點。

    Screenshot of the breakpoint set in the sample code.

  3. 按 <F5>。

  4. 等候訊息，指出網頁伺服器正在接聽埠 3101。

    Screenshot of the status bar message indicating the debugger is listening on port 3101.

  5. 在慣用的瀏覽器中，輸入下列位址： https://localhost:3101/lists

  6. 當您稍早設定的斷點叫用時，應用程式執行將會暫停。 此時，您可以執行標準偵錯工作，例如：

    • 檢查變數
    • 查看呼叫堆疊
    • 設定其他斷點

  7. 按 <F5> 以繼續執行應用程式。

    如果您之前尚未啟動 Web 前端，範例應用程式會傳回清單（或空白清單 [] ）：

    [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]

其他 azd 整合

管理 azd 環境

若要管理 azd 環境：

  1. 選取 [服務相依性] 窗格右上角的 ... 。

  2. 在下拉功能表中選取下列其中一個選項：

    • 建立新環境
    • 選取並設定特定環境作為目前的使用中環境
    • 取消布建環境

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

布建環境資源

您可以將 Azure 資源布建到您的環境。

  1. 在 連線服務 中，按一下右上方的圖示以還原/布建環境資源。

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

  2. 確認環境名稱、訂用帳戶和位置。

發佈應用程式

如果您進行任何更新，您可以執行下列步驟來發佈應用程式：

  1. 在方案總管中，展開 連線服務 。

  2. 選取發行。

  3. 選取 [新增發行設定檔 ]。

  4. 選取 Azure 的目標 ，然後選取 [ 下一步 ]。

  5. 選取 [Azure 開發人員 CLI 環境 ]，然後選取 [ 下一步 ]。

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. 選取環境。

  7. 選取 [完成]。

其他資源

要求說明

如需如何提出 Bug、要求協助或為 Azure 開發人員 CLI 提出新功能的資訊，請流覽 疑難排解和支援 頁面。

下一步

使用 GitHub Actions 設定管線和推送更新