執行及偵錯針對 Azure Developer CLI 啟用的應用程式
使用適用於 Azure 開發人員 CLI 的 azd
Visual Studio Code 擴充功能,在本機電腦上執行和偵錯應用程式。 在本指南中,您將在 Azure 範本上使用 React Web 應用程式搭配 Node.js API 和 MongoDB。 您可以將本文中學到的原則套用至任何 Azure 開發人員 CLI 範本。
必要條件
安裝適用於 Azure 開發人員 CLI 的 Visual Studio Code 擴充功能
透過 Visual Studio Code
打開 Visual Studio Code。
從 [ 檢視] 功能表中,選取 [ 擴充功能]。
在搜尋欄位中,輸入
Azure Developer CLI
。選取安裝。
透過 Marketplace
使用瀏覽器,移至 [Azure 開發人員 CLI - VS Code 擴充功能 ] 頁面。
選取安裝。
初始化新的應用程式
在 Visual Studio Code 中建立並開啟新的目錄。
從 [ 檢視] 功能表中,選取 [ 命令選擇區...]。
輸入並挑選
Azure Developer: init
。選取樣本
Azure-Samples/todo-nodejs-mongo
。
探索目錄中所包含的 .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 資源。
開啟命令選擇區。
輸入 Azure 開發人員:布建 Azure 資源。
對 API 進行偵錯
偵錯組態 偵錯 API 會自動執行 API 伺服器並附加調試程式。 若要測試此模式,請執行下列步驟:
從項目的
src/api/src/routes
目錄中,開啟lists.ts
。在行 16 設定斷點。
在 [活動列] 中,選取 [執行] 和>[偵錯 API 偵錯組態>開始偵錯] 箭號。
從 [檢視] 功能表中,選取 [偵錯控制台]。
等候訊息,指出調試程式正在接聽埠 3100。
在慣用的終端機殼層中,輸入下列命令:
curl http://localhost:3100/lists
當您稍早設定的斷點叫用時,應用程式執行將會暫停。 此時,您可以執行標準偵錯工作,例如:
- 檢查變數
- 查看呼叫堆疊
- 設定其他斷點。
按
<F5>
以繼續執行應用程式。 範例應用程式會傳回空的清單。
對 React 前端應用程式進行偵錯
若要使用偵 錯 Web 組態,您必須啟動兩者:
- API 伺服器
- 開發網頁伺服器
若要測試此模式,請執行下列步驟:
開啟命令選擇區並執行 工作:執行工作。
輸入並選取 [啟動 API 和 Web]
您可以在網頁瀏覽器中瀏覽至下列 URL,以檢查本機網頁伺服器是否正在執行:
http://localhost:3000
。在項目的
src/web/src/components
目錄中,開啟todoItemListPane.tsx
。在第 150 行上設定斷點(函式
deleteItems
的第一行)。在 [活動列] 中,選取 [執行] 和>[偵錯偵錯 Web 偵錯] 組態>的 [開始偵錯] 箭號。
執行 Web 應用程式會導致您的預設瀏覽器開啟下列 URL:
http://localhost:3000
。 您現在可以藉由新增專案、從清單中選取它,以及選取 [ 刪除] 來偵錯應用程式。當您稍早設定的斷點叫用時,應用程式執行將會暫停。 此時,您可以執行標準偵錯工作,例如:
- 檢查變數
- 查看呼叫堆疊
- 設定其他斷點
按
<F5>
以繼續執行應用程式,並刪除選取的專案。
使用 Visual Studio 和 Azure Developer CLI 在本機電腦上執行和偵錯應用程式。azd
在本指南中,您將使用 React Web 應用程式搭配 Azure 範本上的 C# API 和 MongoDB。 您可以將本文中學到的原則套用至任何 Azure 開發人員 CLI 範本。
必要條件
安裝並啟用預覽功能
-
注意
這與 Visual Studio 不同。 如果您有非預覽版本的 Visual Studio,您仍然需要安裝此版本。
開啟 Visual Studio 預覽。
從 [工具] 功能表中,選取 [選項>預覽功能]。
確定 已啟用 Azure 開發人員 CLI 與 azd 整合。
開啟 API 解決方案
在
Todo.Api.sln
目錄中開啟方案/src/api
。如果您已啟用
azd
整合功能,azure.yaml
則會偵測到檔案。 Visual Studio 會自動初始化應用程式模型並執行azd env refresh
。展開 連線 服務以查看所有相依性。
雖然在 Azure App 服務 上執行的 Web 前端不是 API 解決方案的一部分,但會偵測並包含在服務相依性下
執行和偵錯
從項目的
src/api
目錄中,開啟ListController.cs
。在行 20 設定斷點。
按
<F5>
。等候訊息,指出網頁伺服器正在接聽埠 3101。
在慣用的瀏覽器中,輸入下列位址:
https://localhost:3101/lists
當您稍早設定的斷點叫用時,應用程式執行將會暫停。 此時,您可以執行標準偵錯工作,例如:
- 檢查變數
- 查看呼叫堆疊
- 設定其他斷點
按
<F5>
以繼續執行應用程式。如果您之前尚未啟動 Web 前端,範例應用程式會傳回清單(或空白清單 [] ):
[{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]
其他 azd
整合
管理 azd
環境
若要管理 azd
環境:
選取 [服務相依性] 窗格右上角的 ... 。
在下拉功能表中選取下列其中一個選項:
- 建立新環境
- 選取並設定特定環境作為目前的使用中環境
- 取消布建環境
布建環境資源
您可以將 Azure 資源布建到您的環境。
在 連線服務 中,按一下右上方的圖示以還原/布建環境資源。
確認環境名稱、訂用帳戶和位置。
發佈應用程式
如果您進行任何更新,您可以執行下列步驟來發佈應用程式:
在方案總管中,展開 連線服務 。
選取發行。
選取 [新增發行設定檔 ]。
選取 Azure 的目標 ,然後選取 [ 下一步 ]。
選取 [Azure 開發人員 CLI 環境 ],然後選取 [ 下一步 ]。
選取環境。
選取 [完成]。
其他資源
要求說明
如需如何提出 Bug、要求協助或為 Azure 開發人員 CLI 提出新功能的資訊,請流覽 疑難排解和支援 頁面。