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 package来设置通过虚拟域处理请求。

当您创建应用程序实例时，您应该初始化尽可能多的带有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   @

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

2 个答案: