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

问题描述 投票:1回答:2

我想在Azure Blob上将我的ReactJS应用程序作为静态托管。问题是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作为他的URL并尝试导航到该页面时,他会收到错误。

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

感谢您的任何帮助!

reactjs azure blob azure-storage-blobs azure-cdn
2个回答
0
投票

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

注意:cdn是容器名称。

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

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


2
投票

Azure CDN现在支持静态网站托管。更多信息:

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

通过将默认文档和错误文档设置为index.html,您可以在不使用URL重写的情况下托管单页应用程序

© www.soinside.com 2019 - 2024. All rights reserved.