reactjs - 同一 Azure 存储帐户上的多个 React 站点

Question

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

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

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

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

1. 在 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
• 保留不匹配的路径:否

Answer 1

尝试以下操作:

1. 将 "homepage": ".", 添加到您提到的 package.json here .
2. 将 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'