静态托管 - 使用 Azure CDN 的 Azure Blob 存储上的 ReactJS 应用程序

Question

我想将我的ReactJS 应用程序作为静态托管在 Azure Blob 上。问题是 Azure Blob 不支持默认文档。为了克服这个问题，我设置了带有 URL 重写规则的 Azure CDN

• 对于第一个源模式，设置为((?:[^\?]*/)?)($|\?.*)
• 对于第一个目标模式，设置为$1index.html$2
• 对于第二个源模式，设置为 ((?:[^\?]*/)?[^\?/.]+)($|\?.*)
• 对于第二个目标模式，设置为$1/index.html$2

这是来自Hao的教程

这成功解决了myapp.azureedge.net，但是当直接使用客户端路由时，例如myapp.azureedge.net\react\route应用程序将返回ResourceNotFound.

这意味着当用户输入myapp.azureedge.net\react\routeURL 并尝试导航到该页面时，他会收到错误消息。

我怀疑我需要将每个路径（不是静态特定文件）重定向到index.html. 但是，我不知道这是否是正确的解决方案或如何实现它

感谢您的任何帮助！

Answer 1

我之前遇到过类似的问题。假设 Azure Blob 容器下的静态文件结构如下所示：

注意：是cdn容器名称。

您可以配置以下 URL 重写规则来设置默认页面并将所有请求重写到 index.html 以及可能的查询字符串以及可以正确访问的图像和cdn/scripts脚本cdn/images。

此外，您可以使用Azure Web App托管静态网站并选择合适的定价层。详细信息您可以关注定价计算器。