Node.js 在Express中通过客户端路由为多个react应用程序提供服务

我有不同的软件产品用于单个服务，需要部署到单个服务器。客户端使用react构建，通过create react app进行构建设置，而服务器运行Node.js和Express

当我从服务器为单个应用程序提供服务时，它是通过以下方式完成的：

// App.js
// ...
// Entry point for data routes (API)
app.use('/data', indexRoute);

if(process.env.NODE_ENV !== 'development') {
  app.use(express.static(path.join(__dirname, 'build-client')));

  app.get('/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
}

我希望能够从服务器提供多个应用程序。我该怎么做

我尝试的是为资产连接不同的静态路径，并用不同的名称分隔客户机，尽管它不起作用。像这样：

// App.js
// ...
// Entry point for data routes (API)
app.use('/data', indexRoute);

if(process.env.NODE_ENV !== 'development') {
  app.use(express.static(path.join(__dirname, 'build-client')));
  app.use(express.static(path.join(__dirname, 'build-admin')));

  app.get('/client/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
  app.get('/admin/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
}

我也尝试过这样做，但出现了快速抛出错误：没有指定默认引擎，也没有提供扩展：

if(process.env.NODE_ENV !== 'development') {
  // Admin paths
  app.use('/admin', express.static(path.join(__dirname, 'build-admin')));
  app.get('/admin/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-admin' , 'index.html'));
  });

  // Site paths
  app.use('/', express.static(path.join(__dirname, 'build-client')));
  app.get('/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
}

---

我怎样才能做到这一点或类似的事情呢？

在与这个问题斗争了一段时间后，我找到了一个可能的解决方案，而不影响原始设置

我们过去常常通过虚拟域设置请求处理

创建应用程序实例时，应使用express初始化要单独公开的应用程序（在本例中，它是三个单独的应用程序加上原始应用程序实例）

之后，您需要安装vhost并导入它。然后，通过为每个应用指定静态文件夹，您可以分别处理为静态文件提供的服务，而剩下的部分分别处理对给定子域的请求

  appAdmin.use(express.static(path.join(__dirname, 'build-admin')));
  appClient.use(express.static(path.join(__dirname, 'build-client')));
  appVendor.use(express.static(path.join(__dirname, 'build-vendor')));

  appAdmin.use((req, res, next) => {
    return res.sendFile(path.resolve( __dirname, 'build-admin' , 'index.html'));
  });

  appClient.use((req, res, next) => {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });

  appVendor.use((req, res, next) => {
    return res.sendFile(path.resolve( __dirname, 'build-vendor' , 'index.html'));
  });

  app.use(vhost('domain.com', appClient));
  app.use(vhost('www.domain.com', appClient));
  app.use(vhost('a.domain.com', appAdmin));
  app.use(vhost('b.domain.com', appVendor));

不要忘记在您的域的DNS注册表中添加所需的子域。例如：

...records
CNAME   vendor  @
CNAME   admin   @

---

经过一些修补，我能够在不使用虚拟主机的情况下实现这一点。我使用了你在问题中给出的第一个想法，除了我将主应用程序保留在根目录下（即

/

）

之后，我进入

mainApp/package.json

并添加了

"proxy": "http://localhost:4141"

：4141

是运行express server的端口。此行将调用

fetch（'/some/route'）

返回到服务器，而不是react应用程序本身

最后，我们转到

app2/package.json

并添加

"proxy": "http://localhost:4141/app2",
"homepage": "/app2"

我相信这里的关键是

“主页”

键。按照我的理解，当react启动时，它会在主页上搜索一些静态文件，如果没有

“homepage”

，我只能得到一个空白的白色屏幕或mainApp

我希望这能帮助别人

---

编辑 此后，我已从通过我的express服务器为我的create react应用程序提供服务转变为通过。现在我不需要担心这个express设置，也不需要担心

package.json

中的主页键。express服务器独立运行，react应用程序仍然可以使用相同的api，部署也更加容易。使用netlify进行设置非常简单

"proxy": "http://localhost:4141"

"proxy": "http://localhost:4141/app2",
"homepage": "/app2"