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

问题描述

<小时>

上下文

<小时>

过去几天我一直在为以下问题苦苦挣扎，由于 CDN 的性质和每条新规则的人工审查，我每次部署新规则最多需要 4 小时.

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

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

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

的 origin-path

<小时>

问题

<小时>

不幸的是，目前有一个正在进行的

此外，我想让任何对静态文件(例如图像)的请求无需重写任何特定 url.

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

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

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

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

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

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

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

官方文档<来自 Microsoft 的/a> 也没有帮助我.

我很确定我不是第一个将 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

解决方案

• 添加带有条件If Always
的新规则
• 您需要为每个端点添加一个新功能.
• 对于模式，输入 [^?.]*(?.*)?$.此模式捕获带有 . 的 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.

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