练习 - 创建 Azure Functions 项目

6 分钟

你的购物列表 Web 应用需要 API。在本练习中，你将使用 Azure Functions 项目生成并运行 API。从这里，你将使用 Visual Studio 的 Azure Functions 扩展，通过新函数扩展 API。

在本练习中，你要执行以下步骤：

在准备对 Web 应用进行更改时创建分支。
探索 Azure Functions 项目。
创建 HTTP GET 函数。
将函数起始代码替换为获取产品的逻辑。
配置 Web 应用以将 HTTP 请求代理到 API。
运行 API 和 Web 应用。

注意

请确保已为使用 .NET 进行 Azure 开发配置了 Visual Studio。

获取函数应用

现在，你要添加一个 API，并将它连接到前端应用。 Api 项目包含一个不完整的 Azure Functions 项目，因此让我们现在来完成它。

创建 API 分支

对应用进行更改之前，最好为更改创建新分支。你即将完成应用的 API，因此请在 Git 中创建一个名为 api 的新分支。

完成 Azure Functions API

Api 项目包含你的 Azure Functions 项目以及三个函数。

类	方法	路由
ProductsPost	POST	`products`
ProductsPut	PUT	`products/:id`
ProductsDelete	DELETE	`products/:id`

你的 API 具有用于为购物列表操作产品的路由，但它缺少用于获取产品的路线。接下来，让我们添加它。

创建 HTTP GET 函数

在 Visual Studio 中，右键单击 Api 项目，然后选择“添加”>“新建项”。
在“添加新项”对话框中，选择“Azure 函数”。
输入 ProductsGet.cs 作为函数文件的名称。
选择“Http 触发器”作为函数类型。
从“授权级别”字段的下拉列表中选择“匿名”。
选择添加。

你刚刚使用函数扩展了 Azure Functions 应用以用于获取产品！

配置 HTTP 方法和路由终结点

请注意，对于新创建的 C# 类的 Run 方法，其第一个参数 HttpRequest 中包含 HttpTrigger 属性。此属性定义函数的访问级别，要侦听的 HTTP 方法和路由终结点。

路由终结点默认为 null，这意味着该终结点使用 FunctionName 属性的值 ProductsGet。将 Route 属性设置为 "products" 会覆盖默认行为。

目前，函数会在对产品进行 HTTP GET 请求时触发。 Run 方法如以下代码所示：

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

更新路由逻辑

在执行函数时，会执行 Run 方法的正文。

需要更新 Run 方法中的逻辑来获取产品。 ProductData.cs 文件中有一个数据访问逻辑作为名为 ProductData 的类，可以通过依赖项注入将其作为 IProductData 接口使用。接口上有一个名为 GetProducts 的方法，该方法返回以异步方式返回产品列表的 Task<IEnumerable<Product>。

现在，更改函数终结点以返回产品：

打开 ProductsGet.cs。

将其内容替换为以下代码：

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using System.Threading.Tasks;

namespace Api;

public class ProductsGet
{
    private readonly IProductData productData;

    public ProductsGet(IProductData productData)
    {
        this.productData = productData;
    }

    [FunctionName("ProductsGet")]
    public async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
    {
        var products = await productData.GetProducts();
        return new OkObjectResult(products);
    }
}

在前面的更改中，你将类从静态转换为了实例类。你向构造函数添加了一个接口，以便依赖关系注入框架可以注入 ProductData 类。最后，你将 Run 函数配置为了在被调用时返回产品列表。

发布到 Azure Static Web Apps 时，无需担心跨域资源共享 (CORS)。 Azure 静态 Web 应用会自动配置应用，使它可以使用反向代理与 Azure 上的 API 进行通信。但在本地运行时，需要配置 CORS 以允许 Web 应用和 API 进行通信。

现在，提示 Azure Functions 允许 Web 应用在计算机上向 API 发出 HTTP 请求。

在 Api 项目的 Properties 文件夹中打开名为 launchSettings.json 的文件。
- 如果该文件不存在，请创建。

更新文件的内容：

{
    "profiles": {
        "Api": {
            "commandName": "Project",
            "commandLineArgs": "start --cors *"
        }
    }
}

注意

此文件用于控制 Visual Studio 将如何启动 Azure Functions 工具。如果要使用 Azure Functions 命令行工具，则还需要一个 local.settings.json 文件，如 Azure Functions Core Tools 文档中所述。local.settings.json 文件列在 .gitignore 文件中，可防止此文件发布到 GitHub。这是因为你可以在此文件中存储机密，而你不希望在 GitHub 中存储该内容。此外，这就是在从模板创建存储库时必须创建该文件的原因。

运行 API 和 Web 应用

现在可以监视 Web 应用和 Azure Functions 项目一起工作。

在 Visual Studio 中，右键单击 ShoppingList 解决方案。
选择“设置启动项目”。
选择“多启动项目”选项。
将“Api”和“客户端”设置为将“启动”作为其“操作”，然后单击“确定”。
启动调试程序。

浏览到你的应用

可看到应用程序在本地针对 Azure Functions API 运行。

浏览到 Web 应用程序（例如 https://localhost:44348/）。

你生成了应用程序，现在它本地运行，向 API 发出 HTTP GET 请求。

现在，断开 Visual Studio 中的调试程序连接，以停止正在运行的应用和 API。

后续步骤

应用在本地运行，下一步是将应用与 API 一起发布。