使用Azure前门为SPA服务

Question

我想能够服务SPA仅使用Azure前门/而不是Azure CDN。看起来，前门提供了CDN将提供的缓存，我可以在其中添加多个区域存储帐户，使其具有全球规模。

问题是，我无法匹配到index.html文件的路径。找到了这个反馈，看起来这个问题可以通过URL重写和重定向来解决，但不知道如何解决。

我有/test/和/test来匹配下面的路由，所以它应该匹配/test并将请求指向/test/index.html，但这是行不通的。我们可以不做基于文件的转发吗？

​

​

Answer 1

这需要一些时间来解决，但这是一个解决方案。

创建Blob存储

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

​

​

要在这里添加内容-再次导航到blob存储，您应该会看到一个名为$web的容器。

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

有关如何使用blob存储创建静态网站的更多文档如下：https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

获取静态网站端点

一旦启用了静态网站并单击静态网站刀片，它应该会给出一个与常规blob访问端点不同的端点--一个支持静态网站的端点。看起来像：https://somerandomstorageaccount.z8.web.core.windows.net/

将静态网站端点添加到Azure前门作为后端。

导航到你的前门设计师

​

​

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

​

​

要实现更好的性能，请使用多个存储帐户(来自不同区域)，并在前门配置中将所有存储帐户添加到后端，并打开前门缓存。

Answer 2

@Mavi上面的回答很好，但没有说明如何使用Blob正确地创建SPA路由。

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

Azure CDN：

创建URL重写规则，将任何零长度文件扩展名转发回index.html。链接

Azure前门解决方案

(注意到这里说的是解决办法.这不是一个解决办法)。在中，将Index document name和Error document path设置为index.html。这将导致任何404错误被重定向到SPA入口点。您的SPA将工作，但任何直接导航到SPA端点将返回404。(这还存在很多其他问题，但至少网站还能工作，对吧？)

​

​