使用 Azure Front Door 为 SPA 提供服务
Use Azure Front Door to serve a SPA
我希望能够仅使用 Azure Front Door 而非 Azure CDN 为 SPA 提供服务。看起来 Front Door 提供了 CDN 提供的缓存，我可以向它添加多个区域存储帐户，使其在全球范围内扩展。
问题是，我无法匹配 index.html 个文件的路径。找到 this feedback，看起来这可以使用 URL 重写和重定向来解决，但不知道如何解决。
我有 /test/ 和 /test 来匹配下面的路由，所以它应该匹配 /test 并将请求指向 /test/index.html 但这不起作用。可以不做基于文件的转发吗？
这花了一些时间才弄清楚，但这是解决方案。
创建 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 Front Door 的后端。下图是更新配置，但添加它同样简单，您只需将其添加为 Custom Host 后端类型并将其指向您的 blob 静态网站位置。
为了获得更好的性能，使用多个存储帐户（来自不同区域）并将所有这些帐户添加到 Front Door 配置中的后端，并在 Front Door 中打开缓存。
@Mavi Domates 上面的回答很好，但没有解决如何使用 Blob 存储正确制作 SPA 路由。
根本原因： Blob Storage 的静态网站不会为不完全存在的 SPA 路由重写 URLs 和 returns 返回 404在存储容器中。
Azure CDN 修复：
创建 URL 重写规则以将任何零长度文件扩展名转发回 index.html。 Link
Azure 前门 解决方法:
（注意这说的是变通办法...这不是解决方法）。在您的 Blob 存储静态网站配置中，将 Index document name 和 Error document path 都设置为 index.html。这会导致任何 404 错误被重定向到您的 SPA 入口点。您的 SPA 会工作，但任何直接导航到 SPA 端点都会 return 404。（这会带来一大堆其他问题，但至少网站可以工作，对吧？）
我希望能够仅使用 Azure Front Door 而非 Azure CDN 为 SPA 提供服务。看起来 Front Door 提供了 CDN 提供的缓存，我可以向它添加多个区域存储帐户，使其在全球范围内扩展。
问题是，我无法匹配 index.html 个文件的路径。找到 this feedback，看起来这可以使用 URL 重写和重定向来解决，但不知道如何解决。
我有 /test/ 和 /test 来匹配下面的路由，所以它应该匹配 /test 并将请求指向 /test/index.html 但这不起作用。可以不做基于文件的转发吗？
这花了一些时间才弄清楚，但这是解决方案。
创建 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 Front Door 的后端。下图是更新配置，但添加它同样简单，您只需将其添加为 Custom Host 后端类型并将其指向您的 blob 静态网站位置。
为了获得更好的性能，使用多个存储帐户（来自不同区域）并将所有这些帐户添加到 Front Door 配置中的后端，并在 Front Door 中打开缓存。
@Mavi Domates 上面的回答很好，但没有解决如何使用 Blob 存储正确制作 SPA 路由。
根本原因： Blob Storage 的静态网站不会为不完全存在的 SPA 路由重写 URLs 和 returns 返回 404在存储容器中。
Azure CDN 修复：
创建 URL 重写规则以将任何零长度文件扩展名转发回 index.html。 Link
Azure 前门 解决方法:
（注意这说的是变通办法...这不是解决方法）。在您的 Blob 存储静态网站配置中，将 Index document name 和 Error document path 都设置为 index.html。这会导致任何 404 错误被重定向到您的 SPA 入口点。您的 SPA 会工作，但任何直接导航到 SPA 端点都会 return 404。（这会带来一大堆其他问题，但至少网站可以工作，对吧？）