8

我希望能够仅使用 Azure Front Door / 而不是 Azure CDN 来提供 SPA。看起来 Front Door 提供了 CDN 将提供的缓存,我可以向其添加多个区域存储帐户,使其大规模全球化。

问题是,我无法匹配index.html文件的路径。找到了这个反馈,看起来这可以使用 URL 重写和重定向来解决,但无法弄清楚如何。

我必须匹配下面的路线/test//test所以它应该匹配 /test 并将请求指向,/test/index.html但这不起作用。我们不能做基于文件的转发吗?

在此处输入图像描述

4

2 回答 2

6

这需要一些时间才能弄清楚,但这是解决方案。

创建 Blob 存储

若要托管 SPA,您需要 Azure 中的 blob 存储帐户,并且这些存储帐户应配置为接收静态网页流量。导航到设置,然后在 blob 存储设置中导航到静态网站。

在此处输入图像描述

要在此处添加内容 - 再次导航到您的 Blob 存储,您应该会看到一个名为$web.

现在$web容器是您应该将所有静态文件放入其中的容器,只需确保它是可公开访问的(取决于您如何创建它,它可能不是)

有关如何使用 blob 存储制作静态网站的更多文档,请参见:https ://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

获取静态网站端点

启用静态网站并单击静态网站刀片后,它应该为您提供与常规 blob 访问端点不同的端点 - 一个支持静态网站的端点。看起来像:https://somerandomstorageaccount.z8.web.core.windows.net/

将静态网站终结点添加到 Azure Front Door 作为后端

导航到您的 Front Door 设计器

在此处输入图像描述

如果您没有任何内容,请导航到您的后端池并添加一个新条目。您现在应该将此新网站终结点作为后端添加到您的 Azure 前门。下图是更新配置,但添加同样简单,只需将其添加为Custom Host后端类型并将其指向您的 blob 静态网站位置即可。

在此处输入图像描述

要获得更好的性能,请使用多个存储帐户(来自不同区域)并将所有这些帐户添加到 Front Door 配置中的后端,并在 Front Door 中打开缓存。

于 2019-11-05T11:38:40.310 回答
0

@Mavi Domates 上面的回答很好,但没有解决如何使用 Blob 存储正确创建 SPA 路由。

根本原因: Blob 存储的静态网站不会重写 URL,并为存储容器中不完全存在的 SPA 路由返回 404。

Azure CDN 修复:

创建 URL 重写规则以将任何长度为零的文件扩展名转发回 index.html。关联

Azure 前门解决方法

(请注意,这表示解决方法......这不是修复)。在 Blob 存储静态网站配置中,将Index document name和设置Error document pathindex.html. 这会导致任何 404 错误被重定向到您的 SPA 入口点。您的 SPA 可以工作,但任何直接导航到 SPA 端点都会返回 404。(这会带来很多其他问题,但至少该网站可以工作,对吧?)

在此处输入图像描述

于 2021-12-08T22:55:48.790 回答