在Express中使用客户端路由服务多个反应应用程序

对于单个服务，我有不同的软件产品，需要将其部署到单个服务器上。 客户端是通过create-react-app来构build的，服务器运行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')); }); } 

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

我所尝试的是在不同的静态path中连接资源，并用不同的名称分隔客户端，尽pipe它不起作用。 喜欢这个：

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

我也试过这样做，但expression式抛出错误：没有指定默认引擎，没有提供扩展名：

 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

你为什么不使用反应和反应路由器来做到这一点？

 import App1 from './App1/App' import App2 from './App2/App' import App3 from './App3/App' const AppRouter= () => <Router> <Switch> <Route exact path="/1" component={App1}/> <Route exact path="/2" component={App2}/> <Route exact path="/3" component={App3}/> </Switch> </Router>; 

所以你可以在1个应用程序中构build它们。

Answer 2

经过一段时间的这个问题，我发现了一个可能的解决scheme，而不影响原来的设置。

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

当你创build你的应用程序实例时，你应该使用express分别初始化许多应用程序（在我们的例子中是三个单独的应用程序加上原来的应用程序实例）

 // Create an express instance const app = express(); const appAdmin = express(); const appClient = express(); const appVendor = express(); 

之后，您需要安装虚拟主机并导入它。 然后，为每个应用程序指定静态文件夹，您可以分别处理静态文件，其余部分分别处理给定子域的请求。

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

不要忘记在域的DNSregistry中添加所需的子域作为Clogging。 例：

 ...records CNAME vendor @ CNAME admin @