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这样的反向代理服务器在不同的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的原因。

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

2 个答案: