在 Azure Blob 存储上使用静态网站选项托管 SPA(干净的 URL 和深层链接)
Hosting SPA with Static Website option on Azure Blob Storage (clean URLs and Deep links)
我已按照 Microsoft 文档中的建议,使用 $web
容器在 Azure Blob 存储上成功设置了一个静态网站。另外,我已经为'Index Document Name'和'Error Document Name'定义了index.html
。 这是因为我希望我的 JavaScript 应用程序处理 404
响应。
但是,当查看 Chrome 中的网络选项卡时,我可以看到针对我请求的 URL 抛出 404
,尽管该页面实际工作.
我的理论如下:
- Azure 检查 'file' 是否存在
- 如果文件存在,它returns它
- 如果文件不存在,它会抛出一个
404
并将 url 重写为 'Error Document Name' 即 index.html
在我的例子中(因此我的页面仍然工作)
我的问题是我的 URL 是干净的 url,例如:
/activities/some-slug
永远不会作为文件存在,这只是告诉我的 JavaScript 应用程序将请求路由到哪里,即要加载什么视图。
需要说明的是,页面 确实 有效,因为它仍在将 404
错误路由到 index.html
。
我如何告诉 Azure blob 将所有内容绝对路由到 index.html
并让我的应用在必要时抛出 404
?
我们确实已经设置了高级 Verizon CDN,因为我最初并不知道 Azure Blob 上的静态网站选项。如果 CDN 是最佳路线,请您提供有关如何配置 CDN 以提供我正在寻找的内容的说明?
我有什么tried/researched
我阅读了很多文章(特别是 this one 中的评论),我相信可能有各种解决方案,即 Azure Functions、Proxy、CDN 等。也就是说,none 提供了明确的说明如何实际处理这些特定服务。
我通常在 AWS 上工作,所以不熟悉所有 Azure 服务和可用配置。
我想我找到了解决办法
- 添加新规则
条件:URL文件扩展名
一个。运算符:小于
b。扩展名:1
c。大小写变换:无变换
[这基本上意味着 URL 请求没有文件(扩展名)但是是应用路由将由应用路由处理的应用路由]
操作:URL重写
一个。来源模式:/
b。目的地:/index.html
c。保留不匹配的路径:No
- 保存规则
.
感谢 Andreas Wendl 在 https://github.com/MicrosoftDocs/azure-docs/issues/43257#issuecomment-580668444
这是一个更简单/可能更正确的解决方案:
- 离开
/static/*
成为
- 将其他所有内容重写为
/index.html
因此,index.html 用于响应像 /users/
这样的深层链接,假设 /users/alexa.siri
。
我已按照 Microsoft 文档中的建议,使用 $web
容器在 Azure Blob 存储上成功设置了一个静态网站。另外,我已经为'Index Document Name'和'Error Document Name'定义了index.html
。 这是因为我希望我的 JavaScript 应用程序处理 404
响应。
但是,当查看 Chrome 中的网络选项卡时,我可以看到针对我请求的 URL 抛出 404
,尽管该页面实际工作.
我的理论如下:
- Azure 检查 'file' 是否存在
- 如果文件存在,它returns它
- 如果文件不存在,它会抛出一个
404
并将 url 重写为 'Error Document Name' 即index.html
在我的例子中(因此我的页面仍然工作)
我的问题是我的 URL 是干净的 url,例如:
/activities/some-slug
永远不会作为文件存在,这只是告诉我的 JavaScript 应用程序将请求路由到哪里,即要加载什么视图。
需要说明的是,页面 确实 有效,因为它仍在将 404
错误路由到 index.html
。
我如何告诉 Azure blob 将所有内容绝对路由到 index.html
并让我的应用在必要时抛出 404
?
我们确实已经设置了高级 Verizon CDN,因为我最初并不知道 Azure Blob 上的静态网站选项。如果 CDN 是最佳路线,请您提供有关如何配置 CDN 以提供我正在寻找的内容的说明?
我有什么tried/researched
我阅读了很多文章(特别是 this one 中的评论),我相信可能有各种解决方案,即 Azure Functions、Proxy、CDN 等。也就是说,none 提供了明确的说明如何实际处理这些特定服务。
我通常在 AWS 上工作,所以不熟悉所有 Azure 服务和可用配置。
我想我找到了解决办法
- 添加新规则
条件:URL文件扩展名
一个。运算符:小于
b。扩展名:1
c。大小写变换:无变换
[这基本上意味着 URL 请求没有文件(扩展名)但是是应用路由将由应用路由处理的应用路由]
操作:URL重写
一个。来源模式:/
b。目的地:/index.html
c。保留不匹配的路径:No
- 保存规则
感谢 Andreas Wendl 在 https://github.com/MicrosoftDocs/azure-docs/issues/43257#issuecomment-580668444
这是一个更简单/可能更正确的解决方案:
- 离开
/static/*
成为 - 将其他所有内容重写为
/index.html
因此,index.html 用于响应像 /users/
这样的深层链接,假设 /users/alexa.siri
。