在同一个域上组织和部署多个 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功能不起作用（完全没有做任何有用的事情）

其次，我尝试将我的静态资产在主机上更深一层，请求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