上一篇

下一步

练习 - 运行并调试 Azure Functions 和 Angular

已完成

在本练习中，你将一起运行并调试 Angular 应用程序和 Azure Functions 应用程序。 你可以在 Angular 代码（用于在浏览器中显示 Web 应用）和 Functions 代码（用于提取和呈现假期）中设置断点。 然后，使用 Angular 和 Functions 断点通过调试器单步执行 Functions 和 Angular 代码。

注意

.vscode/launch.json 和 .vscode/tasks.json 文件是获取此项目完整的调试体验不可或缺的部分。

为本地函数存储启动 Azurite

Azure Functions 使用 Azure 存储来存储其数据。 你可以使用 Azure 存储的本地仿真器 Azurite 在本地运行 Functions 应用。 Azurite 提供了一个仿真 Azure Blob、队列和表服务以进行开发的本地环境。

1. 在 Visual Studio Code 中打开新终端。

2. 运行以下命令以启动 Azurite。

   npx -y azurite --location ./.azurite/data --debug ./.azurite/logs
   

   此命令将安装 azurite 并在当前目录中启动它。 --location 标志指定数据的位置，--debug 标志指定日志的位置。

3. 打开 .gitignore 文件并添加以下行以忽略 Azurite 数据和日志。

   .azurite
   

   此行可确保 Azurite 数据和日志不提交到存储库。

设置断点

当全栈应用程序启动时，Angular 前端客户端会从 Functions 后端应用程序请求假期数据。 这两个应用程序协同工作以获取数据，并在浏览器中呈现数据。

为了显示假期列表，Angular 应用程序在 vacations.component.ts 文件中运行 getVacations() 函数，该文件调用 Azure Functions API 中的 vacations 终结点。 文件 functions/getVacations.ts 定义了终结点的路由。 在这些文件中设置断点，以便在调试期间，可以单步执行提取假期的代码。

1. 在 Visual Studio Code 中，打开应用程序的 src/app/vacations/vacations.component.ts 文件，找到 getVacations() 函数。

2. 通过选择 getVacations() 函数内第一行代码 this.vacationService.getAll(); 左侧的编辑器装订线来设置断点。

   

3. 打开 functions/src/functions/getVacations.ts 文件，通过选择 try { 行左侧的编辑器边栏来设置断点。

运行和调试应用程序

现在，Angular 和 Functions 应用中都有断点，可以一起单步执行并调试它们。

注意

你尚未在 Azure 中运行函数。 你正在使用 Azure Functions Core Tools (CLI) 在本地运行和调试。

将请求从 Angular 代理到 Functions

Azure Functions API 在端口 7071 上运行，而 Angular 应用程序在端口 4200 上运行。 Angular 应用程序无法跨域向 Functions 应用程序发出请求，因此，可以将调用从 Angular 应用程序代理到 Functions 应用程序。

若要使 Angular 应用程序能够与 Functions 应用程序通信并代理请求，请打开 proxy.conf.json 并将端口更改为 7071。

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

注意

Node.js Express 应用程序使用端口 7070。 如果删除了 Node.js Express 应用程序，还可以对 Functions 应用程序使用端口 7070。 但出于学习目的，保留了这两个应用程序。

调试两个应用程序

一起运行和调试应用程序时，应用会在断点处暂停，让你有机会探索这些应用程序如何协同工作。

1. 按 F1 打开 Visual Studio Code 命令面板。

2. 键入并选择“视图: 显示运行和调试”。

3. 在“运行和调试”窗格顶部，从下拉列表中选择“调试 Functions 和 Angular”。

4. 按 F5 启动调试器。

   应用程序随即启动，以获取假期列表。 Angular VacationComponent 启动 HTTP 请求以获取假期。 当浏览器打开时，代码执行在 getVacations() 函数的 vacations.component.ts 文件中的第一个断点处暂停。

   

5. 可通过按 F5 取消暂停执行并继续操作。

6. 代码在 functions/vacations-get/index.ts 文件中的第二个断点处暂停，因为 Angular 应用程序命中 Functions vacations 路由。 可通过按 F5 取消暂停执行并继续操作。

7. 有两个正在运行的调试进程：一个用于 Angular，另一个用于 Azure Functions。 按 Shift+F5 可停止活动的调试器。

8. 按 Shift+F5 可停止剩余的调试器。

继续