运行和调试为 Azure Developer CLI 启用的应用
使用适用于 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 预览版。
在“工具”菜单中,选择“选项>预览功能”。
确保 与 azd 集成,已启用 Azure 开发人员 CLI 。
打开 API 解决方案
在
Todo.Api.sln
目录中打开解决方案/src/api
。如果 已启用
azd
集成功能,azure.yaml
则检测到该文件。 Visual Studio 会自动初始化应用模型并运行azd env refresh
。展开连接服务以查看所有依赖项。
虽然在 Azure App 服务 上运行的 Web 前端不是 API 解决方案的一部分,但它被检测并包含在服务依赖项下
运行和调试
从项目的
src/api
目录中打开ListController.cs
。在第 20 行设置断点。
按“”
<F5>
。等待指示 Web 服务器正在侦听端口 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 提出新功能的信息,请访问 故障排除和支持 页。