reactjs - 在同一域中组织和部署多个 SPA

Question

假设 ABC 公司有两个团队开发两个 SPA 应用程序:app1、app2

每个应用程序都有自己的 index.html 和关联的静态资源，例如: build / 索引.html 主.js

这是从:host1 运行的。应用程序遵循相同的约定

我们想:

• abc.com/app1 路由到 host1
• abc.com/app2 路由到 host2

假设有一个负载平衡器设置来正确执行路由。对于这种情况，我有什么解决方案？

我尝试使用 https://github.com/zeit/serve (由 create-react-app 建议)但是有很多问题。

首先，rewritePath 功能不起作用(完全没有做任何有用的事情)

其次，我尝试将我的静态 Assets 放在主机上更深一层，请求 host1/app1 是目录列表而不是 index.html 页面

即使通过配置解决了这些问题，React Router(SPA 路由器)和身份验证回调仍然存在大量问题

这个场景的实际最佳实践是什么？我想这是一个非常普遍的场景。正如我所见，AWS 的 Web 控制台使用类似的方法来路由应用程序

Answer 1

基本上，您需要像 nginx 这样的反向代理来为位于不同 URI 的两个不同站点提供服务。 SPA 不应该相互了解，因为它们不应该关心它们是如何到达的，这是反向代理的工作。

nginx 的基本配置:

server {

  listen 80;
  listen [::]:80;

  server_name abc.com;

  location /app1 {

    rewrite /app1(/?(.*)) /$2  break;

    proxy_pass http://localhost:XXXX;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
  }

  location /app2 {

    rewrite /app2(/?(.*)) /$2  break;

    proxy_pass http://localhost:YYYY;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
  }
}

当然这个配置遗漏了一些重要的东西，比如 ssl、gzip、caching 等等，但它应该给你和想法。

在此示例中，SPA 可以在两个不同的 docker 容器中运行，可通过端口 XXXX 和 YYYY 访问。

希望对您有所帮助，LGG