静态托管 - 使用 Azure CDN 在 Azure Blob 存储上的 ReactJS 应用答案

【问题标题】：Static hosting - ReactJS app on Azure Blob storage with Azure CDN静态托管 - 使用 Azure CDN 在 Azure Blob 存储上的 ReactJS 应用
【发布时间】：2018-11-21 06:40:39
【问题描述】：

我想在 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-blob-storage azure-cdn

【解决方案1】：

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

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

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

【讨论】：

我不明白为什么，它看起来很老套，但这似乎真的很好用。
当这个工作时，您将在错误页面加载之前收到用户正在访问的路由的 404 响应（例如：index.html）。但是，PWA 仍然可以正确加载，因为它最终会加载您的索引文件。但是在浏览器的devtools中可以看到Network下的404错误。这样做的条件是他们之前没有加载您的网站，您没有使用服务工作者，并且用户正在导航到特定路线。 Azure 需要有一个选项来执行自定义路由。我已经阅读了使用 Azure Functions 进行代理的教程。我没用过，但是YMMV。

【解决方案2】：

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

注意：cdn 是容器名称。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：