同一个 Azure 存储帐户上的多个 React 站点答案

【问题标题】：Multiple React sites on the same Azure storage account同一个 Azure 存储帐户上的多个 React 站点
【发布时间】：2020-08-28 07:41:27
【问题描述】：

需要改进我们的 React 应用程序的 CI/CD 流程。底线是：

对除发布分支和 master 之外的任何 git 分支的任何提交都应触发对当前配置为静态站点并与 CDN 端点（Microsoft 标准）链接的 Azure 存储帐户的构建/部署过程。
部署目标应该是 {rootUrl}/{branchName}

所以我们希望在同一个存储帐户/CDN 端点上拥有多个 React 应用程序。这将允许我们的 QA 团队独立测试功能。

我已经在应用程序中进行了以下更改，允许应用程序使用本地主机上的相对路径工作：

在 package.json 中设置 homepage 属性

"homepage": "http://localhost:3001/testApp"

设置basename路由器属性

  <Router basename={process.env.RELATIVE_ROOT_URL} {...props}>
...

3)。在 .env 文件中添加一行：

RELATIVE_ROOT_URL=/testApp

但我不知道如何更改 CDN 端点的 URL 重写规则以允许直接打开像 {rootUrl}/{branchName}/somepath/ 这样的 URL。

附：目前，我们有以下规则适用于每个 CDN 端点的单个站点：

条件：

如果 URL 文件扩展名
算子：不大于
扩展：0
案例转换：否

动作：

然后 URL 重写
来源模式：/
目的地：/index.html
保留不匹配的路径：否

【问题讨论】：

你有机会尝试我的答案吗？

标签： reactjs azure url-rewriting azure-storage azure-cdn

【解决方案1】：

尝试以下方法：

将 "homepage": ".", 添加到您的 package.json 中，因为它提到了 here。
将Router 更改为HashRouter 并删除basename 属性。

Here 是我在此repo 中的示例。
我使用以下命令进行部署：

az storage blob upload-batch \
  --account-name $(AZURE_STORAGE_ACCOUNT) \
  --account-key $(AZURE_STORAGE_KEY) \
  -s ./build/. \
  -d '$web/product/book-shelves'

【讨论】：