通过Express中的客户端路由为多个React应用提供服务

Question

我为一项服务有不同的软件产品，需要将其部署到一台服务器上。在服务器运行Node.js和Express的同时，客户端通过react进行构建，并通过create-
react-app进行构建设置。

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

// 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'));
  });
}

我也尝试过这种方式，但是Express throw错误：没有指定默认引擎，也没有提供扩展名：

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'));
  });
}

我怎么能做到这一点或类似的东西？

Answer 1

经过一段时间解决这个问题后，我发现了一个可能的解决方案而又不损害原始设置。

我们使用Express vhost软件包来设置通过虚拟域处理请求。

创建应用程序实例时，应使用要单独公开的数量来使用Express初始化尽可能多的应用程序（在我们的示例中，它是三个独立的应用程序以及原始应用程序实例）

// Create an express instance
const app = express();
const appAdmin = express();
const appClient = express();
const appVendor = 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   @