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

Question

我想将 ReactJS应用程序托管为Azure Blob上的静态。问题是Azure Blob不支持默认文档。为了解决这个问题，我已经使用URL重写规则

设置了Azure CDN

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

这来自Hao's tutorial

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

当用户输入myapp.azureedge.net\react\route作为他的网址并尝试导航到该页面时，他会收到错误。

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

感谢您的帮助！

Answer 1

Azure CDN现在支持静态网站托管。这里有更多信息：

https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

通过将默认文档和错误文档设置为index.html

，您可以在不使用URL重写的情况下托管单页应用程序

Answer 2

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

注意： cdn是容器名称。

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

此外，您可以使用Azure Web App来托管您的静态网站并选择正确的定价层。您可以关注的详细信息Pricing calculator。

Answer 3

有一个新的Azure静态Web应用程序服务，当前处于预览模式，但是部署现代的前端SPA超级容易。您可以设置后备路由（route.json）将所有内容重定向到index.html，您可以在此处查看更多信息：https://docs.microsoft.com/en-us/azure/static-web-apps/