在Express中为客户端路由提供多个反应应用程序

Question

我为单个服务提供了不同的软件产品,需要将其部署到单个服务器上.通过create-react-app进行构建设置,客户端构建为react,而服务器运行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'));
  });
}

我也尝试过这种方式,但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

经过一些修补,我能够在不使用虚拟主机的情况下实现这一目标.我使用了你在问题中给出的第一个想法,除了我将主应用程序留在根(即/).

// when going to `/app2`, serve the files at app2/build/* as static files
app.use('/app2', express.static(path.join(__dirname, 'app2/build')))
// when going to `/`, serve the files at mainApp/build/* as static files
app.use(express.static(path.join(__dirname, 'mainApp/build')))


// These are necessary for routing within react
app.get('app2/*', (req, res) => {
  res.sendFile(path.join(__dirname + '/app2/build/index.html'))
})

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/mainApp/build/index.html'));
});

在此之后,我进入mainApp/package.json并补充说

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

:4141是快速服务器正在运行的端口.此行将调用fetch('/some/route')返回服务器而不是反应应用程序本身.

最后,我们去app2/package.json添加

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

我相信这里的"homepage"关键是关键.我理解它的方式,当反应开始时,它在其主页上搜索一些静态文件,如果没有"homepage"这块,我只能得到一个空白的白色屏幕或mainApp.

我希望这可以帮助那里的人!

Answer 2

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

我们使用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   @