将CRA创建的ReactApp（创建ReactApp）部署到具有不同URL路径的不同环境？

html5 • • 问答 • 167 阅读

问题：

我们有一个 CRA（创建 React App）应用程序，我们需要将它部署到许多不同的环境中。我们正在使用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-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_URLpackage.json build：

这仅适用于一个环境（env01在这种情况下），但我们需要将单个构建工件（静态文件包）部署到许多不同的环境，这些环境具有不同的PUBLIC_URLs。

这是否可以在不为每个环境构建应用程序的情况下实现？

我们如何构建工件：

我们的部署工件是一个Docker 镜像，它只是Nginx为之前构建的React 静态文件提供服务。

我们如何执行路由：

浏览器正在访问我们的Kubernetes Ingress，它剥离了路径并将请求转发到运行Nginx的 Docker 容器（在 K8S Pod 中）。Nginx为根目录下的 CRA 静态文件提供服务/。

例子：

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

这很好用，问题（至少在我看来）出在React Router 中。我们正在basename动态设置，并且设置正确（https://reactrouter.com/web/api/BrowserRouter/basename-string）。问题（我假设）在这个PUBLIC_URL. 部署应用程序而不指定它是行不通的。并且需要在构建时知道。这是主要问题。

重要的：

  • 我们正在使用React Router，因此在部署应用程序时它必须正常工作
  • 我们希望在所有环境中部署单个构建工件（单个 Docker 映像）
以上是将CRA创建的ReactApp（创建ReactApp）部署到具有不同URL路径的不同环境？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>