在Azure Blob Storage上托管SPA和静态网站选项（干净的URL和深层链接）

Question

我已经按照 Microsoft 的文档在 Azure Blob 存储上成功搭建了一个静态网站，使用 $web 容器。此外，我将 index.html 同时定义为“索引文档名称”和“错误文档名称”。这是因为我希望我的 JavaScript 应用程序处理 404 响应。

然而，在 Chrome 浏览器的网络选项卡中查看时，我发现请求的 URL 会抛出 404 错误，尽管实际上页面是可以正常工作的。

我的理论如下：

• Azure 检查“文件”是否存在
• 如果文件存在，则返回该文件
• 如果文件不存在，则抛出 404 并将 URL 重写为“错误文档名称”，即我的情况下是 index.html（因此我的页面仍然可以正常工作）

问题在于我的 URL 是干净的 URL，例如：

• https://somename.z22.web.core.windows.net/activities/some-slug

/activities/some-slug 不会作为文件存在，它只是告诉我的 JavaScript 应用程序请求的路由，即加载哪个视图。

只是为了明确，页面能够正常工作，因为它仍然将 404 错误路由到 index.html。

如何告诉Azure Blob将所有内容路由到“index.html”，让我的应用程序在必要时抛出“404”错误？

我们已经设置了Premium Verizon CDN，因为我最初不知道Azure Blob上的静态网站选项。如果CDN是最佳路径，请提供有关如何配置CDN以实现所需目标的说明。

我尝试/研究的内容: 我阅读了许多文章（特别是这篇文章中的评论），并且我认为可能有各种解决方案，例如Azure Functions、代理、CDN等。然而，没有一种方法提供明确的说明，告诉使用这些特定服务应该具体怎么做。

（我通常在AWS上工作，对Azure的所有服务和可用配置都不太熟悉。）

- Ben Carey

---

你是否找到了这个问题的解决方案？因为我和你处在同样的困境，我正要跟随你所采取的相同方法，但是我不想让404状态码实际抛出。我只想用我的SPA捕获每个URL。 - SikoSoft

@Lev - 我对Azure并不熟悉，无法知道所有可能的解决方案，但我相信有各种选择。幸运的是，我们需要高级CDN（出于其他原因），这提供了所需的重写功能，以实现我的需求。 - Ben Carey

其实，昨晚我也找到了解决方案。它是重写URL功能，现在已成为标准Microsoft CDN计划的一部分。所有参考资料和文档都表明您需要高级计划，但它在去年某个时候添加到标准计划中。 :) - SikoSoft

Answer 1

我认为我找到了一个解决方案。

1. 添加一个新规则

2. 条件: URL文件扩展名

   a. 运算符: 小于

   b. 扩展名: 1

   c. 大小写转换: 不转换

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

3. 操作: URL重写

   a. 源模式: /

   b. 目标: /index.html

   c. 保留不匹配路径: 否

4. 保存规则

.

- Andreas Wendl

---

我很抱歉没有及时审查/接受这个，可能是我错过了你发布它的时间。我正在努力回忆起我当时想要实现什么，因为你的解决方案与我的非常不同，所以我对原来的问题感到困惑。等我有时间了，我会发布我的解决方案，并深入研究哪个更好。在此期间，我将接受这个作为答案 :-) - Ben Carey

清晰简洁的答案，可与我的代码分割 create-react-app 完美配合。 - Splitty

如果您在寻找“添加规则”页面方面遇到困难，那么您并不孤单！1- 点击“Azure CDN”标签（在静态网站下方）。2- 创建一个新的CDN配置文件（请注意选择WEB链接而不是BLOB）。3- 在“所有资源”中输入新的CDN配置文件。4- 单击“概述”中看到的单个端点。5- 单击“规则引擎”。您现在可以完美地看到Andreas所说的屏幕了。 - Luis Gouveia

那么 index.html 中的 js/css 依赖关系呢？它们仍然试图使用相对于原始 URL 的路径进行加载。 - ScorpionKing2k5

包含文件扩展名的路由（例如 contoso.com/styles.css）不受此规则的影响。它们按原样从来源获取。 - Andreas Wendl

Answer 2

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

以下是一个更简单/可能更正确的解决方案：

• 保持 /static/* 不变
• 将其他所有内容重写为 /index.html

因此，对于如 /users/ 和 /users/alexa.siri 等深层链接，将响应 index.html。

- Dima Tisnek

Answer 3

感谢 @Dima Tisnek 提供更简短的答案。以下是纯文本格式的答案（该答案的编辑队列已满）：

Azure 端点资源 > 规则引擎 > 添加规则

名称：spa

1. 如果 URL 路径 [运算符：不以开头] [值：/static/] [大小写转换：不转换]
2. 然后 URL 重写 [源模式：/] [目标：/index.html] [保留未匹配路径：否]
3. 然后缓存过期 [缓存行为：覆盖] [天数：0] [小时：0] [分钟：5] [秒数：0]

- Mark Wiemer