在同一个域上组织和部署多个SPA

Question

想象一下公司ABC有两个团队开发两个SPA应用程序：app1，app2

每个应用程序都有自己的index.html和相关的静态资产，例如：build / index.html main.js

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

我们想：

• abc.com/app1前往host1
• abc.com/app2前往host2

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

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

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

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

即使在通过配置解决这些问题之后，React Router（SPA路由器）和身份验证回调仍然存在很多问题

这种情况的实际最佳做法是什么？我想这是一个非常常见的场景。我可以看到AWS的Web控制台使用类似的方法来路由应用程序

Answer 1

基本上你想要像nginx这样的反向代理服务器在不同的URIs服务两个不同的站点。 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

Answer 2

您正在寻找的是反向代理。任何现代的Web服务器都可以做到这一点，包括Nginx或Apache。它的诀窍是让你的重写路线恰到好处，这是我怀疑你遇到了React。