8

语境

在过去的几天里，我一直在努力解决以下问题，由于 CDN 的本质和对每条新规则的手动审查，我每次最多需要 4 小时来部署新规则。

如以下主题所述，我目前将 Angular 应用程序部署到一个存储帐户，该帐户具有一个名为cdn

在此处输入图像描述

在这个blob 容器的根目录中，我的 angular 项目中的整个文件夹已通过我的 CI 设置复制。dist

在此处输入图像描述

还设置了 CDN 配置文件，指向origin-path被叫/cdn

在此处输入图像描述

问题

不幸的是，目前存在一个无法直接访问默认文件的问题。

  1. 我想要的是将所有传入流量从我的 Angular 应用程序重定向到index.html文件。这是为了满足Angular 的路由。

    输入带有预期输出的 url

  2. 此外，我想让对静态文件（例如图像）的任何请求通过而无需任何特定的 url 重写。

我看过关于这个问题的各种帖子，但似乎没有一个答案能涵盖我的情况，或者没有达到预期的结果。

目前我正在使用来自 Verizon的Azure CDN的规则引擎功能。

关于模式，我使用了下一篇文章中提到的所有模式，包括评论中提到的模式。

我还花了至少两天时间来查找各种其他文章和 stackoverflow 文章，但没有一篇适合我的案例。

此外，我还创建了自己的正则表达式模式，但尽管它们在我的测试环境中工作，但一旦部署到 CDN，它们就会工作。

我通常会得到以下结果之一：

  • 顶级域https://myFancyWebsite.azureedge.net不会将 url 重写为index.html我会收到一个 http 错误404
  • 顶级域将重定向到，index.html但一旦我添加了 url 路径就会停止工作- 一旦我开始使用，就会https://myFancyWebsite.azureedge.net/login/callback再次出现 http 错误404/login/callback
  • 顶级域会将 url 重写为类似https://myFancyWebsite.azureedge.net/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn ....http 错误的内容431

微软的官方文档对我的情况也没有帮助。

我很确定我不是第一个将 Angular 应用程序部署到存储帐户的人，并且有人遇到了与我相同的问题。

我很感谢任何为我指明正确方向的信息，因为目前我肯定在考虑放弃整个存储帐户部署。

更新 1

使用本文中也提到的以下source模式，我至少能够处理对文件的顶级域重写。((?:[^\?]*/)?)($|\?.*)index.html

不幸的是，我仍然需要一个额外的模式来重定向https://myFancyWebsite.azureedge.net/login/callback到https://myFancyWebsite.azureedge.net/index.html

更新 2

我目前每天更新一次或两次正则表达式模式，它再次在我的测试环境中工作，但一旦我部署它就停止工作。我开始相信 Azure CDN 在顶级域之后的 URL 中附加了一些内容，但我不知道如何验证这一点。

https://regex101.com/r/KK0jCN/23

更新 3

我们正在写 3025 年，但我仍然不知道为什么例如以下模式不处理顶级域的 url 重写。

https://regex101.com/r/KK0jCN/25

4

3 回答 3

13
  • 添加条件为If Always的新规则
  • 您需要为每个端点添加一个新功能。
  • 对于模式，输入[^?.]*(\?.*)?$。此模式捕获其中的 URL 路径.，但不关心它是否在查询字符串中。
  • 对于路径，输入origin_path/document.ext。这是棘手的部分。路径是相对于原始根的。例如，如果您的 CDN 端点的原始路径是/origin_path并且您想要重定向到index.html，您将输入origin_path/index.html. 如果您的 CDN 由 Azure 存储帐户支持并且源点指向容器，则始终会出现这种情况。
  • 单击添加以添加您的规则，等待 N 小时，一切顺利。
于 2018-03-28T13:51:10.297 回答
1

根据您的要求，我在我这边测试了这个问题。根据我的测试，您可以尝试利用以下 URL 重写规则：

源模式：(http[s]?://[^\?/#]+)(/(?!images)(?!scripts)[^\?#]*)?($|[\?#].*)

目的地模式：$1/index.html$3

注意：为了正确加载其他文件（.ico、.txt、.js、.css 等），您需要将它们移动到新的虚拟目录而不是 blob 容器的根目录中。例如，您可以将图像文件移入cdn\images并将 JavaScript 文件移入cdn\scripts，然后正则表达式将忽略相关的虚拟文件夹。

此外，您可以使用 Azure Web App 托管您的静态网站，并选择免费定价层或共享层，每个实例每月花费 9.49 美元。您可以按照定价计算器的详细信息。

更新：

根据贾斯汀的回答，我检查了这个问题，发现对于 Blob 存储源类型，URL 重写下的Source和Destination下正在谈论针对 Blob 存储端点的请求。因此，我们需要针对 blob 端点的请求路径和查询字符串设置正则表达式。

Justin Gould 提供了将所有内容重写为cdn/index.html. 根据您的情况，我已经测试了我的规则，它可以在我这边工作。

在此处输入图像描述

测试：

在此处输入图像描述

在此处输入图像描述

于 2018-03-27T09:24:38.890 回答
-1

只是为了补充这一点。如果你使用的是 Azure Verizon Premium CDN，并且你的 Azure 终结点使用的是源路径。原始路径是重写的一部分。例如，假设您指向$webBlob 中的版本化文件夹。

Azure 终结点设置

因此，如果在上图中“源路径”是2.1.2并且您当前的静态应用程序在 中$web/2.1.2/，那么您对 ​​CDN 的重写将是 Source: /<your-verizon-origin>/<your-azure-endpoint>/(.*)\/[^?.]*(\?.*)?$--> Destination:/<your-verizon-origin>/<your-azure-endpoint>/$1/index.html

Verizon Premium CDN 规则

于 2020-07-27T14:39:26.213 回答