运行和调试为 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

  1. 打开 Visual Studio Code。

  2. 在“视图”菜单中,选择“扩展”。

  3. 在搜索字段中,输入 Azure Developer CLI

  4. 选择“安装” 。

通过市场

  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. 在首选终端 shell 中,输入以下命令: curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. 当之前设置的断点命中时,应用执行将暂停。 此时,可以执行标准调试任务,例如:

    • 检查变量
    • 查看调用堆栈
    • 设置其他断点。
  8. 按以 <F5> 继续运行应用。 示例应用返回空列表。

调试 React 前端应用

若要使用 调试 Web 配置,必须同时启动:

  • API 服务器
  • 开发 Web 服务器

若要测试此模式,请执行以下步骤:

  1. 打开命令面板并运行 任务:运行任务

    Screenshot of running a Visual Studio Code Task.

  2. 输入并选择“启动 API”和“Web”

    Screenshot of selecting the option to Start API and Web.

    如果本地 Web 服务器正在运行,可以在 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 开发人员 CLIazd()在本地计算机上运行和调试构建的应用。 在本指南中,你将在 Azure 模板上将 React Web 应用与 C# API 和 MongoDB 配合使用。 可以将本文中学到的原则应用于任何 Azure 开发人员 CLI 模板

先决条件

安装和启用预览功能

  1. 安装 Visual Studio 预览版

    注意

    这不同于 Visual Studio。 如果你有 Visual Studio 的非预览版,则仍需安装此版本。

  2. 打开 Visual Studio 预览版。

  3. “工具”菜单中,选择“选项>预览功能”。

  4. 确保 与 azd 集成,已启用 Azure 开发人员 CLI

    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. 等待指示 Web 服务器正在侦听端口 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 提出新功能的信息,请访问 故障排除和支持 页。

后续步骤