运行和调试为 Azure Developer CLI 启用的应用

项目
12/11/2023

使用适用于 Azure 开发人员 CLI 的 Visual Studio Code 扩展在本地计算机上运行和调试应用。azd 在本指南中，你将在 Azure 模板上将 React Web 应用与 Node.js API 和 MongoDB 配合使用。可以将本文中学到的原则应用于任何 Azure 开发人员 CLI 模板。

先决条件

安装适用于 Azure 开发人员 CLI 的 Visual Studio Code 扩展

通过 Visual Studio Code

打开 Visual Studio Code。
在“视图”菜单中，选择“扩展”。
在搜索字段中，输入 Azure Developer CLI。
选择“安装” 。

通过市场

使用浏览器，转到 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 的消息。
在首选终端 shell 中，输入以下命令： curl http://localhost:3100/lists
当之前设置的断点命中时，应用执行将暂停。此时，可以执行标准调试任务，例如：
- 检查变量
- 查看调用堆栈
- 设置其他断点。
按以 <F5> 继续运行应用。示例应用返回空列表。

调试 React 前端应用

若要使用 调试 Web 配置，必须同时启动：

API 服务器
开发 Web 服务器

若要测试此模式，请执行以下步骤：

打开命令面板并运行 任务：运行任务。
输入并选择“启动 API”和“Web”

如果本地 Web 服务器正在运行，可以在 Web 浏览器中导航到以下 URL 来检查。 http://localhost:3000
在项目的 src/web/src/components 目录中，打开 todoItemListPane.tsx。
在第 150 行（函数的第一行 deleteItems ）上设置断点。
在活动栏中，选择“运行”和“调试>调试 Web 调试”配置>“开始调试”箭头。
运行 Web 应用将导致默认浏览器打开以下 URL： http://localhost:3000 现在可以通过添加项、从列表中选择项并选择“删除”来调试应用。
当之前设置的断点命中时，应用执行将暂停。此时，可以执行标准调试任务，例如：
- 检查变量
- 查看调用堆栈
- 设置其他断点
按 <F5> 继续运行应用，所选项目将被删除。

使用 Visual Studio 和 Azure 开发人员 CLIazd（）在本地计算机上运行和调试构建的应用。在本指南中，你将在 Azure 模板上将 React Web 应用与 C# API 和 MongoDB 配合使用。可以将本文中学到的原则应用于任何 Azure 开发人员 CLI 模板。

先决条件

安装和启用预览功能

安装 Visual Studio 预览版

注意

这不同于 Visual Studio。如果你有 Visual Studio 的非预览版，则仍需安装此版本。
打开 Visual Studio 预览版。
在“工具”菜单中，选择“选项>预览功能”。
确保 与 azd 集成，已启用 Azure 开发人员 CLI 。

打开 API 解决方案

在 Todo.Api.sln 目录中打开解决方案 /src/api 。

如果已启用 azd 集成功能， azure.yaml 则检测到该文件。 Visual Studio 会自动初始化应用模型并运行 azd env refresh。
展开连接服务以查看所有依赖项。

虽然在 Azure App 服务上运行的 Web 前端不是 API 解决方案的一部分，但它被检测并包含在服务依赖项下