reactjs - 将 CRA 创建的 React App(创建 React App)部署到具有不同 URL 路径的不同环境？

Question

问题:
我们有一个 CRA(创建 React 应用程序)应用程序，我们需要它 部署 到许多不同的 环境 .我们正在使用 Kubernetes 产生这些 环境 所以我们会有很多，数量不是固定的。
问题是这些环境必须在 下同域名并且必须有 相同的路径结构 . (这是一项业务要求，我们无法影响它)。
环境示例:

https://www.example.com/company/app-env01/react_application/
https://www.example.com/company/app-env02/react_application/
https://www.example.com/company/app-env03/react_application/
https://www.example.com/company/app-env-foo/react_application/
https://www.example.com/company/app-env-bar/react_application/
https://www.example.com/company/app/react_application/

所以固定结构为: https://www.example.com/company/app[-____]/react_application/使其工作的方法 在单个环境中 将指定 PUBLIC_URL 在 package.json build脚本:

    ...
    "build": "PUBLIC_URL=/company/app-env01/react_application react-scripts build",
    ...

这适用于 仅一个环境 (在本例中为 env01)，但我们需要部署一个 单个构建神器 (静态文件包)到 许多不同的环境 , 有不同的 PUBLIC_URL s。
这是否可以在不为每个环境构建应用程序的情况下实现？
我们如何构建工件:
我们的部署工件是 Docker 镜像 ，这只是 Nginx 服务以前 build 的 react 静态文件 .
我们如何执行路由:
浏览器 正在击中我们的 Kubernetes 入口 , 其中 去掉路径 并将请求转发到正在运行的 Docker 容器(在 K8S Pod 中) Nginx . Nginx 正在为根目录下的 CRA 静态文件提供服务 / .
例子:

Browser
  ↓
https://www.example.com/company/app-env01/react_application/
  ↓
Ingress
  /
  ↓
Nginx
  ↓
Serves the CRA static files

这工作正常，问题(至少在我看来)在 react 路由器 .我们正在设置 basename动态，并且设置正确( https://reactrouter.com/web/api/BrowserRouter/basename-string )。问题(我假设)在此 PUBLIC_URL .部署应用程序而不指定它 不起作用 .并且需要知道 在构建时 .这是主要问题。
重要的:

我们正在使用 react 路由器 ，所以在部署应用程序时它必须正常工作

我们要部署一个 单个构建神器 (单个 Docker 镜像)跨越 所有环境

Answer 1

解决方案
@Emile 让我考虑再次使用相对 URL，同时配置 Nginx 以正确处理它。谢谢!
将此位置块添加到 Nginx 配置解决了问题:

  location ~ .(static)/(js|css|media)/(.+)$ {
    root   /usr/share/nginx/html;
    try_files $uri $uri/ /$1/$2/$3;
  }

这是完整的配置(为了清楚起见简化了):

server {
  listen 80;
  
  # This rule internally redirects any relative requests for static files so that they start from the root
  # Example, it internally redirects `/RANDOM/SUBPATH/static/js/main.xxx.chunk.js` to `/static/js/main.xxx.chunk.js`
  # Effectively, it strips everything that comes before `/static...`
  location ~ .(static)/(js|css|media)/(.+)$ {
    root   /usr/share/nginx/html;
    try_files $uri $uri/ /$1/$2/$3;
  }

  location / {
    root   /usr/share/nginx/html;
    index  index.html;
    try_files $uri $uri/ /index.html;
  }
 
  error_page   500 502 503 504  /50x.html;
 
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

进一步说明
使用相对 URL 最初不起作用的原因是:
这将工作得很好:

/company/app-env01/react_application/static/js/xxxxxxxx.chunk.js

但这不会:

/company/app-env01/react_application/RANDOM/SUBPATH/static/js/xxxxxxxx.chunk.js

我需要一种方法来“剥离” /RANDOM/SUBPATH部分，不管那部分是什么，我通过添加 实现了它Nginx location上面列出的块。