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

问题描述

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

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

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

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

在 package.json 中设置主页属性

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

设置Router的basename属性

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

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

RELATIVE_ROOT_URL=/testApp

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

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

条件：

如果 URL 文件扩展名
运算符：不大于
分机：0
案例转换：否

行动：

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

标签： reactjsazureurl-rewritingazure-storageazure-cdn

尝试以下操作：

添加到您的 package.json 中，正如这里"homepage": ".",提到的那样。
更改Router为HashRouter并删除该basename属性。

这是我在这个repo中的例子。
我使用以下命令进行部署：

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

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

问题描述

解决方案

推荐阅读