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

Question

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

每个应用程序都有自己的 index.html 和关联的静态资产，例如：建造/ 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 或 Apache。它的诀窍是让你的重写路由恰到好处，这就是我怀疑你运行对 React 感兴趣的地方。

Answer 2

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

nginx 的基本配置：

server {

  listen 80;
  listen [::]:80;

  server_name abc.com;

  location /app1 {

    rewrite /app1(/?(.*)) /  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(/?(.*)) /  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

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

Organizing and deploying multiple SPAs on the same domain

router

single-page-application

reactjs