angular - Azure CDN 与 Verizon - 重写 URL 以始终加载 index.html

Question

语境

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

如以下主题所述，我目前将 Angular 应用程序部署到 存储帐户 其中有一个 Blob 容器 叫 cdn


内根本 Blob 容器 ，全dist我的 angular 项目中的文件夹已通过我的 CI 设置复制。



CDN 配置文件也已设置，指向 origin-path叫 /cdn


问题

不幸的是，目前有一个正在进行的 issue您无法直接访问默认文件。

我想要的是重定向来自我的 Angular 的所有传入流量
申请到index.html文件。这是为了满足routing for Angular .

此外，我想让任何对静态文件(例如图像)的请求
通过没有任何特定的网址重写。

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

目前我正在使用 规则引擎 的特点Azure CDN 来自威瑞森。

关于模式我使用了following article中提到的所有模式，包括评论中提到的内容。

我还花了至少两天时间来查找各种其他文章和 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

官方documentation来自微软的对我的情况也没有帮助。

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

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

更新 1

与以下source图案 ((?:[^\?]*/)?)($|\?.*)这在 article 中也有提到在这里，我至少能够处理对 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

Answer 1

添加条件为 的新规则如果总是

您需要为每个端点添加一个新功能。

对于图案，输入 [^?.]*(\?.*)?$ .此模式使用 . 捕获 URL 路径在它们中，但不关心它是否在查询字符串中。

对于路径，输入 origin_path/document.ext .这是棘手的部分。路径相对于原始根。例如，如果您的 CDN 端点的原始路径是 /origin_path并且您想重定向到 index.html ，您将输入 origin_path/index.html .如果您的 CDN 由 Azure 存储帐户支持并且源指向容器，则始终如此。

单击添加以添加您的规则，等待 N 小时，您就可以开始了。