使用Verizon的Azure CDN - 重写URL以始终加载index.html

Question

上下文

过去几天我一直在努力解决以下问题，由于CDN的本质和每条新规则的人工审核，我每次最多需要4小时才能部署新规则。 / p>

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

在 blob容器的 root 中，我的角度项目中的整个dist文件夹已通过我的CI设置进行复制。

CDN个人资料也已设置，指向名为origin-path的{​​{1}}

问题

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

1. 我想要的是重定向来自Angular的所有传入流量 应用于/cdn文件。这是为了满足routing for Angular。

   

2. 此外我想让任何静态文件请求（例如图片） 通过没有任何特定的网址重写。

我已经看过关于这个问题的各种帖子，但没有一个答案似乎涵盖了我的案例或没有提供预期的结果。

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

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

我还花了至少两天的时间来查找各种其他文章和stackoverflow文章，但它们都没有适用于我的案例。

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

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

• 顶级域index.html不会将网址重写为https://myFancyWebsite.azureedge.net，我会收到http错误index.html
• 顶级域名会重定向到404，但在我添加网址路径index.html后会停止工作 - 一旦我开始使用https://myFancyWebsite.azureedge.net/login/callback，就会再次出现http错误404 }
• 顶级域名会在http错误/login/callback
中将网址重写为https://myFancyWebsite.azureedge.net/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn ....。

来自微软的官方documentation在我的案例中也没有帮助。

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

我感谢所有指出正确方向的信息，因为目前我肯定会考虑放弃整个存储帐户部署。

更新1

在article这里也提到了以下431模式source，我能够处理至少对((?:[^\?]*/)?)($|\?.*)的顶级域重写文件。

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

更新2

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

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

更新3

我们正在撰写3025年，我仍然不知道为什么例如以下模式没有处理顶级域名的网址重写。

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

Answer 1

• 添加条件如果始终
的新规则
• 您需要为每个端点添加新功能。
• 对于模式，请输入[^?.]*(\?.*)?$。此模式捕获其中包含.的URL路径，但不关心它是否在查询字符串中。
• 对于路径，请输入origin_path/document.ext。这是棘手的部分。 Path与原始根相对。例如，如果您的CDN端点的起始路径为/origin_path，并且您想要重定向到index.html，则应输入origin_path/index.html。如果您的CDN由Azure存储帐户支持且原点指向容器，则始终如此。
• 点击添加以添加您的规则，等待N小时，然后您就可以开始了。

Answer 2

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

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

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

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

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

<强>更新

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

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

<强> TEST：

Answer 3

只需添加到此即可。如果您使用的是Azure Verizon Premium CDN，并且您的Azure终结点使用的是原始路径。原始路径是重写的一部分。例如，假设您指向$web Blob中的版本文件夹。

因此，如果上图中的“原始路径”为2.1.2，而您当前的静态应用程序位于$web/2.1.2/中，则CDN的重写应为Source：/<your-verizon-origin>/<your-azure-endpoint>/(.*)\/[^?.]*(\?.*)?$->目的地：/<your-verizon-origin>/<your-azure-endpoint>/$1/index.html