如何为Webpack的生产反应React Bundle.js服务？

Question

我的应用程序在webpack开发服务器中运行良好。现在，我想将其部署到我的生产服务器上。所以我建立了bundle.js。我尝试在Express服务器上提供文件，但是除root之外，我无法访问其他网址/。

例如，这是我的反应路线：

var Routes = () => (
    <Router history={browserHistory}>
        <Route path="/" component={Landing}>
        </Route>
        <Route path="/app" component={App}>
        </Route>
    </Router>
)

和快速的应用程序（我把bundle.js和index.html中./public）：

app.use(express.static('./public'));
app.listen(port, function () {
    console.log('Server running on port ' + port);
});

登陆页面http：// localhost：3000 /起作用。但是应用程序http：// localhost：3000 /
app没有。相反，我遇到了错误Cannot GET /app。

Answer 1

您需要在快递服务器上声明“捕获所有”路由，以捕获所有页面请求并将其定向到客户端。首先，请确保path将服务器中的模块包括在内：

var path = require('path');

然后，将其放在app.listen：

app.get('*', function(req, res) {
  res.sendFile(path.resolve(__dirname, 'public/index.html'));
});

这是假设你要插入bundle.js到index.html通过脚本标签。