在 Azure Blob 存储上使用静态网站选项托管 SPA(干净的 URL 和深层链接)

Hosting SPA with Static Website option on Azure Blob Storage (clean URLs and Deep links)

我已按照 Microsoft 文档中的建议,使用 $web 容器在 Azure Blob 存储上成功设置了一个静态网站。另外,我已经为'Index Document Name'和'Error Document Name'定义了index.html这是因为我希望我的 JavaScript 应用程序处理 404 响应。

但是,当查看 Chrome 中的网络选项卡时,我可以看到针对我请求的 URL 抛出 404,尽管该页面实际工作.

我的理论如下:

我的问题是我的 URL 是干净的 url,例如:

/activities/some-slug 永远不会作为文件存在,这只是告诉我的 JavaScript 应用程序将请求路由到哪里,即要加载什么视图。

需要说明的是,页面 确实 有效,因为它仍在将 404 错误路由到 index.html

我如何告诉 Azure blob 将所有内容绝对路由到 index.html 并让我的应用在必要时抛出 404

我们确实已经设置了高级 Verizon CDN,因为我最初并不知道 Azure Blob 上的静态网站选项。如果 CDN 是最佳路线,请您提供有关如何配置 CDN 以提供我正在寻找的内容的说明?

我有什么tried/researched

我阅读了很多文章(特别是 this one 中的评论),我相信可能有各种解决方案,即 Azure Functions、Proxy、CDN 等。也就是说,none 提供了明确的说明如何实际处理这些特定服务。

我通常在 AWS 上工作,所以不熟悉所有 Azure 服务和可用配置。

我想我找到了解决办法

  1. 添加新规则
  2. 条件:URL文件扩展名

    一个。运算符:小于

    b。扩展名:1

    c。大小写变换:无变换

    [这基本上意味着 URL 请求没有文件(扩展名)但是是应用路由将由应用路由处理的应用路由]

  3. 操作:URL重写

    一个。来源模式:/

    b。目的地:/index.html

    c。保留不匹配的路径:No

  4. 保存规则

.

感谢 Andreas Wendl 在 https://github.com/MicrosoftDocs/azure-docs/issues/43257#issuecomment-580668444

这是一个更简单/可能更正确的解决方案:

  • 离开/static/*成为
  • 将其他所有内容重写为 /index.html

因此,index.html 用于响应像 /users/ 这样的深层链接,假设 /users/alexa.siri