带有Verizon的Azure CDN-重写URL以始终加载index.html [英] Azure CDN with Verizon - Rewriting URL to always load index.html

问题描述

---

上下文

---

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

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

的单个 blob容器.

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

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

的origin-path

---

问题

---

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

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

2. 此外，我想允许任何对静态文件(例如图片)的请求 无需重新编写任何特定的网址.

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

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

关于模式，我使用了文档对于我的情况也没有帮助.

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

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

---

更新1

---

使用以下source模式((?:[^\?]*/)?)($|\?.*)，在 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.

1. What I would like is to redirect all incoming traffic from my Angular application to the index.html file. This in order to satisfy the routing for Angular.

2. 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！