你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：为 Azure Static Web Apps 配置 CDN

通过将 Azure Front Door 添加为 Static Web Apps 的 CDN，可以从安全入口点中受益，以便快速交付 Web 应用程序。

借助 Static Web Apps，可以使用两个选项与 Azure Front Door 集成。 可以通过启用企业级边缘（Azure Front Door 与 Static Web Apps 的托管集成）将 Azure Front Door 添加到 Static Web Apps。 也可以在 Static Web Apps 前面手动配置 Azure Front Door 资源。

请考虑以下优势，以确定哪个选项最适合你的需求。

企业级边缘可提供：

• 零配置更改
• 无停机
• 自动托管的 SSL 证书和自定义域

通过手动安装 Azure Front Door，你可以完全控制 CDN 配置，包括执行以下操作的机会：

• 按源限制流量源
• 添加 Web 应用程序防火墙 (WAF)
• 跨多个应用程序路由
• 使用 Azure Front Door 的更高级功能

在本教程中，你将了解如何将 Azure Front Door 添加到 Static Web Apps。

先决条件

• 为静态 Web 应用配置的自定义域，生存时间 (TTL) 设置为小于 48 小时。
• 使用 Azure Static Web Apps 部署的应用程序，该应用使用标准托管计划。

在 Static Web Apps 资源上启用企业级边缘

Azure 门户

1. 前往 Azure 门户中的静态 Web 应用。

2. 选择左侧菜单中的“企业级边缘”。

3. 选中标签为“启用企业级边缘”的框。

4. 选择“保存”。

5. 选择“确定”以确认保存。

   启用此功能将产生额外的成本。

Azure CLI

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

先决条件

• 具有活动订阅的 Azure 帐户。 免费创建帐户
• Azure Static Web Apps 站点。 构建第一个静态 Web 应用
• Azure Static Web Apps 标准和 Azure Front Door 标准/高级计划。 有关详细信息，请参阅 Static Web Apps - 定价
• 请考虑使用企业级 edge，以加快页面加载速度、增强安全性并优化全局应用程序的可靠性。

创建 Azure Front Door

1. 登录到 Azure 门户。

2. 在主页或 Azure 菜单中，选择“+ 创建资源”。 搜索 Front Door 和 CDN 配置文件，然后选择“创建”>“Front Door 和 CDN 配置文件”。

3. 在“比较产品/服务”页上选择“自定义创建”，然后选择“继续以创建 Front Door”。

4. 在“创建 Front Door 配置文件”页上，输入或选择以下设置。

   设置	值
   订阅	选择 Azure 订阅。
   资源组	输入资源组名称。 此名称通常与 Static Web Apps 使用的组名相同。
   资源组位置	如果创建新资源组，请输入离你最近的位置。
   名称	输入“my-static-web-app-front-door”。
   层	选择“标准” 。
   端点名称	为 Front Door 主机输入一个唯一名称。
   来源类型	选择“静态 Web 应用”。
   源主机名	从下拉列表中选择 Static Web Apps 的主机名。
   缓存	选中“启用缓存”复选框。
   查询字符串缓存行为	选择“使用查询字符串”
   压缩	选择“启用压缩”
   WAF 策略	若要启用此功能，请选择“新建”或者从下拉列表中选择现有的 Web 应用程序防火墙策略。

   注意

   创建 Azure Front Door 配置文件时，必须从创建了 Front Door 的同一订阅中选择一个源。

5. 选择“查看 + 创建”，然后选择“创建”。 创建过程可能需要几分钟才能完成。

6. 部署完成后，选择“转到资源”。

7. 添加条件。

为身份验证工作流禁用缓存

注意

缓存过期、缓存密钥查询字符串和源组替代操作已弃用。 这些操作仍可正常进行，但规则集无法更改。 在更改规则集之前，请将这些替代操作替换为新的路由配置替代操作。

添加以下设置以阻止 Front Door 的缓存策略尝试缓存身份验证和授权相关页面。

添加条件

1. 在 Front Door 的“设置”下，选择“规则集”。

2. 选择 添加 。

3. 在“规则集名称”文本框中，输入“安全性”。

4. 在“规则名称”文本框中，输入“NoCacheAuthRequests”。

5. 选择“添加条件”。

6. 选择“请求路径”。

7. 选择“运算符”下拉列表，然后选择“开头为”。

8. 选择“值”文本框上方的“编辑”链接。

9. 在文本框中输入 /.auth，然后选择“更新”。

10. 不要从“字符串转换”下拉菜单中选择任何选项。

添加操作

1. 选择“添加操作”下拉列表。

2. 选择“路由配置替代”。

3. 在“缓存”下拉列表中选择“已禁用”。

4. 选择“保存”。

将规则关联到终结点

创建规则后，可将该规则应用到 Front Door 终结点。

1. 在 Front Door 中，选择“规则集”，然后选择“未关联”链接。

   

2. 选择要将缓存规则应用到的终结点名称，然后选择“下一步”。

3. 选择“关联”。

   

复制 Front Door ID

使用以下步骤来复制 Front Door 实例的唯一标识符。

1. 在 Front Door 中，选择左侧导航上的“概述”链接。

2. 复制标记为“Front Door ID”的值，并将其粘贴到文件中供以后使用。

   

更新 Static Web Apps 配置

要完成与 Front Door 的集成，需要更将应用程序配置文件以执行以下函数：

• 将站点流量限制为仅通过 Front Door
• 将站点流量限制为仅来自 Front Door 实例
• 定义哪些域可以访问站点
• 为安全路由禁用缓存

为站点打开 staticwebapp.config.json 文件，并做出以下更改。

1. 通过将以下部分添加到配置文件，将流量限制为仅使用 Front Door：

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. 要定义哪些 Azure Front Door 实例和域可以访问站点，请添加 forwardingGateway 部分。

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   首先，将应用配置为仅允许来自 Front Door 实例的流量。 在每个后端请求中，Front Door 自动添加包含 Front Door 实例 ID 的 X-Azure-FDID 标头。 通过将 Static Web Apps 配置为需要此标头，它将以独占方式将流量限制为 Front Door 实例。 在配置文件的 forwardingGateway 部分中，添加 requiredHeaders 部分并定义 X-Azure-FDID 标头。 将 <YOUR-FRONT-DOOR-ID> 替换为之前预留的 Front Door ID。

   接下来，将 Azure Front Door 主机名（而不是 Azure Static Web Apps 主机名）添加到 allowedForwardedHosts 阵列中。 如果在 Front Door 实例中配置了自定义域，请也将其包含在此列表中。

   此示例将 my-sitename.azurefd.net 替换为站点的 Azure Front Door 主机名。

3. 对于应用中所有受保护的路由，请通过将 "Cache-Control": "no-store" 添加到路由标头定义来禁用 Azure Front Door 缓存。

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

使用此配置，站点不再通过生成的 *.azurestaticapps.net 主机名提供，而是只能通过 Front Door 实例中配置的主机名提供。

注意事项

• 自定义域：现在 Front Door 正在管理站点，你已不再使用 Azure Static Web Apps 自定义域功能。 Azure Front Door 有一个单独的过程用于添加自定义域。 请参阅将自定义域添加到 Front Door。 将自定义域添加到 Front Door 时，需要更新 Static Web Apps 配置文件，以将其包含在 allowedForwardedHosts 列表中。

• 流量统计信息：默认情况下，Azure Front Door 配置可能影响流量统计信息的运行状况探测。 你可能希望编辑运行状况探测的默认值。

• 为旧版本提供服务：将更新部署到 Static Web Apps 中的现有文件时，Azure Front Door 可能会继续提供旧版本的文件，直到其生存时间到期。 为受影响路径清除 Azure Front Door 缓存，以确保提供最新文件。

清理资源

如果不再想要使用本教程中创建的资源，请删除 Azure Static Web Apps 和 Azure Front Door 实例。

后续步骤

添加 API