同一个服务器上怎么部署多个前端单页项目？

Question

背景：
折腾了老半天，搞了一个react单页项目（history模式）。webstorm上本地玩玩都挺好。但是部署到node上的子域就不行。

//基于zepto的多页静态资源区
app.use('/webapp', express.static(path.join(__dirname, './webapp'),{maxAge: 1000}));
//react 单页应用
// app.use('/build', express.static(path.join(__dirname, './build'), {
//     maxAge: 1000,
//     index: ['index.html', 'app.html']
// }));

发现只能配置在root 根域名下，才有效。

app.use('/', express.static(path.join(__dirname, './build'), {
    maxAge: 1000,
    index: ['index.html', 'app.html']
}));

求问大神们，单页应用中项目配置。

Answer 1

一台服务器部署多个项目，需要做nginx映射，可以参考下这个https://segmentfault.com/a/11...

Answer 2

监听不同端口,nginx做个分发

Answer 3

没必要使用Nginx，可以直接在node上布置N个单页面，前提是把后端路由与前端路由配置好。node端路由使用路径区分单页面，而react的路由配置只有与浏览器中的url相对应即可。

比如有两个单页面

1. /webapp/index.html

2. /webapp2/index.html

node端配置（koa2与koa-router为例子）:

router.get("/webapp/*", ctx => { 
  return ctx.render("/webapp/index.html");
});

router.get("/webapp2/*", ctx => { 
  return ctx.render("/webapp2/index.html");
});

react路由配置:

//webapp/index.html
<Router history = { history }>
        <Route path="/webapp"> //此处的路由已webapp开头
            //子路由
        </Route>
</Router>

//webapp2/index.html
<Router history = { history }>
        <Route path="/webapp2"> //此处的路由已webapp2开头
            //子路由
        </Route>
</Router>

Answer 4

nginx的虚拟主机应该能满足需求