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

本文介绍了带有Verizon的Azure CDN-重写URL以始终加载index.html的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

上下文

最近几天，我一直在努力解决以下问题，并且由于CDN的性质以及对每条新规则的手动审核，我每次最多需要4个小时来部署新规则./p>

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

的单个 blob容器.

在此 blob容器的根中，我的有角项目中的整个dist文件夹已通过我的CI设置进行了复制.

CDN配置文件也已设置为指向名为/cdn

的origin-path

问题

不幸的是，目前正在进行的问题，您不能直接访问默认文件.

我想要的是重定向来自Angular的所有传入流量应用程序到index.html文件.为了满足路由用于Angular .
此外，我想允许任何对静态文件(例如图片)的请求无需重新编写任何特定的网址.

我已经看到有关此问题的各种帖子，但是似乎没有一个答案能解决我的问题，或者没有提供预期的结果.

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

关于模式，我使用了后续文章，包括评论中提到的内容.

我也花了至少两天的时间来查找其他各种文章和stackoverflow文章，但没有一个适合我的情况.

此外，我还创建了自己的regex模式，尽管它们在我的测试环境中有效，但是一旦将其部署到CDN上，它们便可以正常工作.

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

顶级域https://myFancyWebsite.azureedge.net不会将URL重写为index.html，并且我会收到http错误404
顶级域将重定向到index.html，但是一旦我添加了URL路径https://myFancyWebsite.azureedge.net/login/callback-一旦我开始使用/login/callback

404

顶级域会将HTTP错误431

https://myFancyWebsite.azureedge.net/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn ....

文档对于我的情况也没有帮助.

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

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

更新1

使用以下source模式((?:[^\?]*/)?)($|\?.*)，在在这里，我至少能够处理顶级域重写为index.html文件的情况.

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

更新2

我目前每天更新一次或两次regex模式，并且再次在我的测试环境中运行，但是一旦部署它就停止工作.我开始相信Azure CDN在顶级域之后将一些内容附加到URL，但是我不知道如何进行验证.

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

更新3

我们正在写3025年，但我仍然不知道为什么下面的模式不能处理顶级域名的网址重写.

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

解决方案

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

Context

I've been struggling with the following problem for the last few days and due to the very nature of a CDN and the manual review of each new rule, it takes me each time up to 4h to deploy a new rule.

As described in the following topic, I currently have my Angular application deployed to a storage account which has a single blob container called cdn

Within the root of this blob container, the whole dist folder from my angular project has been copied via my CI setup.

The CDN profile has also been set up, to point at the origin-path called /cdn

Problem

Unfortunately there is currently an ongoing issue that you can't directly access a default file.

What I would like is to redirect all incoming traffic from my Angularapplication to the index.html file. This in order to satisfy the routingfor Angular.
Furthermore I would like to let any request for static files (e.g images)through without any specific url rewritting.

I've seen various posts regarding this issue but none of the answer seem to cover my case or didn't in the deliver the expected result.

Currently I am using the rules engines feature of the Azure CDN from Verizon.

Regarding the patterns I used all the patterns mentioned in the following article, including which were mentioned in the comments.

I've also spent at least two days to find various other articles and stackoverflow articles but none of them worked for my case.

Furthermore I also created my own regex pattern but although they worked in my test environment, they would work once they were deployed to the CDN.

I usually ended up with one of the following results:

Top level domain https://myFancyWebsite.azureedge.net wouldn't rewrite the url to the index.html and I would receive a http error 404
Top level domain would redirect to index.html but would stop working once I added a url path https://myFancyWebsite.azureedge.net/login/callback - once again a http error 404 as soon as I started using /login/callback
Top level domain would rewrite the url to something like https://myFancyWebsite.azureedge.net/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn .... in an http error 431

The offical documentation from Microsoft also didn't help in my case.

I am pretty sure I am not the first one who is deploying an Angular application to storage account and someone has run in the same issues as I have.

I am thankful for any information which points me in the right direction because at the moment I am definitely thinking about moving away from whole storage account deployment.

Update 1

With the following source pattern ((?:[^\?]*/)?)($|\?.*) which was also mentioned in the article over here, I am able to handle at least the top level domain rewrite to the index.html file.

Unfortunately, I still need an additional pattern to redirect from https://myFancyWebsite.azureedge.net/login/callback to https://myFancyWebsite.azureedge.net/index.html

Update 2

I am currently updating the regex pattern once or twice a day and once again it works on my test environment but stops working once I deploy it. I start to believe that Azure CDN is appending something to the URL after the top-level domain but I have no idea how to verify that.

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

Update 3

We are writting the year 3025 and I still have no clue why for example the following pattern isn't handling the url rewritting of the top domain.

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

解决方案

Add a new rule with condition If Always
You will need to add a new Feature for each endpoint.
For the Pattern, enter [^?.]*(\?.*)?$. This pattern catches URL paths with . in them, but doesn't care whether or not it's in the query string.
For the Path, enter origin_path/document.ext. This is the tricky part. The Path is relative to the origin root. For instance, if your CDN endpoint's origin path is /origin_path and you want to redirect to index.html, you would enter origin_path/index.html. This will always be the case if your CDN is backed by an Azure Storage Account and the origin points to a container.
Click Add to add your rule, wait N hours, and you're good to go.

这篇关于带有Verizon的Azure CDN-重写URL以始终加载index.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！