Azure Static Web Apps 通过 Azure API Management 提供的 API 支持

Azure API 管理 是一项服务，可用于为现有后端服务创建新式 API 网关。

将 Azure API 管理服务链接到静态 Web 应用时，向静态 Web 应用发出的任何请求，其开头 /api 的路由将代理到 Azure API 管理服务中的同一路由。

Azure API 管理服务可以同时链接到多个静态 Web 应用。 为每个链接的静态 Web 应用创建 API 管理产品。 添加到产品的任何 API 都可用于关联的静态 Web 应用。

所有 Azure API 管理定价层都可用于 Azure 静态 Web 应用。

Static Web Apps 的 API 选项包括以下 Azure 服务：

• Azure Functions
• Azure API 管理
• Azure 应用服务
• Azure 容器应用

有关详细信息，请参阅 API 概述。

注释

与 Azure API 管理的集成需要静态 Web 应用标准计划。

Static Web Apps 拉取请求环境不支持后端集成。

先决条件

若要将 API 管理实例链接到静态 Web 应用，需要具有现有的 Azure API 管理资源和静态 Web 应用。

资源	Description
Azure API 管理	如果还没有 Azure API 管理服务实例，请按照创建新的 Azure API 管理服务实例指南中的步骤进行操作。
现有的静态 Web 应用	如果还没有，请按照入门指南中的步骤创建无框架静态 Web 应用。

Example

请考虑通过以下位置公开终结点的现有 Azure API 管理实例。

https://my-api-management-instance.azure-api.net/api/getProducts

链接之后，可以通过静态 Web 应用中的 api 路径来访问相同的终结点，如本示例 URL 所示。

https://red-sea-123.azurestaticapps.net/api/getProducts

这两个 URL 都指向同一 API 终结点。 API Management 实例上的终结点必须带有 /api 前缀，因为 Static Web Apps 会匹配对 /api 发起的请求，并将整个路径代理到链接的资源。

链接 Azure API 管理服务

将 API 管理实例链接到静态 Web 应用

若要将 Azure API 管理服务作为静态 Web 应用的 API 后端链接，请执行以下步骤：

1. 在 Azure 门户中，转到静态 Web 应用。

2. 从导航菜单中选择“API”。

3. 找到要将 API 管理服务链接到的环境。 选择链接。

4. 在 后端资源类型中，选择 “API 管理”。

5. 在 “订阅”中，选择要链接的 Azure API 管理服务的订阅。

6. 在 资源名称中，选择 Azure API 管理服务。

7. 选择链接。

重要

链接过程完成后，所有以 /api 开头的路由请求会通过代理转发到您的 Azure API 管理服务。 但是，默认情况下不会公开任何 API。 请参阅 “配置 API”以接收请求 以配置 API 管理产品以允许要使用的 API。

配置 API 以接收请求

Azure API 管理具有一项 产品 功能，用于定义 API 的显示方式。 在链接流程中，您的 API 管理服务被配置为使用名为 Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) 的产品。

若要使 API 可用于链接的静态 Web 应用， 请将其添加到产品。

1. 在门户中的 API 管理实例中，选择“ 产品 ”选项卡。

2. 选择Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)产品。

3. 选择“+ 添加 API”。

4. 选择要从静态 Web 应用公开的 API，然后选择“ 选择 ”链接。

链接过程还会自动将以下配置应用于 API 管理服务：

• 与链接静态 Web 应用关联的产品配置为需要订阅。
• 命名 Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> 的 API 管理订阅创建并限定为具有相同名称的产品。
• 将入站 validate-jwt 策略添加到产品中，以仅允许包含来自链接静态 Web 应用的有效访问令牌的请求。
• 链接的静态 Web 应用在代理请求到 API Management 服务时，会配置为包含订阅的主密钥和有效的访问令牌。

重要

更改 validate-jwt 策略或重新生成订阅的主密钥可防止静态 Web 应用将请求代理到 API 管理服务。 在链接到静态 Web 应用时，请勿修改或删除与静态 Web 应用关联的订阅或产品。

解除 Azure API 管理服务的链接

若要从静态 Web 应用取消链接 Azure API 管理服务，请执行以下步骤：

1. 在 Azure 门户中，转到静态 Web 应用。

2. 找到要取消链接的环境，然后选择 API 管理服务名称。

3. 选择“取消链接”。

取消链接过程完成后，以 /api/ 开头的路由请求将不再代理至您的 API 管理服务。

注释

不会自动删除与链接静态 Web 应用关联的 API 管理产品和订阅。 可以从 API 管理服务中删除它们。

故障排除

如果为静态 Web 应用资源创建的 API 管理 产品 未关联 API，则在静态 Web 应用中访问 /api 路由时，将从 API 管理中返回以下错误。

{
  "statusCode": 401,
  "message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}

若要解决此错误，请按照“配置 API 以接收请求”部分中的详细说明，将静态 Web 应用中要公开的 API 配置到为其创建的产品中。

后续步骤

API 概述