如何为 webpack 构建的生产反应 bundle.js 提供服务？

Question

我的应用程序在 webpack 开发服务器中运行良好。现在，我想将它部署到我的生产服务器上。所以我构建了 bundle.js。我尝试在快速服务器上提供文件，但我无法访问除根 /.

以外的 url

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

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

and express app（我把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

您需要在您的快速服务器上声明一个 "catch all" 路由，以捕获所有页面请求并将它们定向到客户端。首先，确保您在服务器上包含 path 模块：

var path = require('path');

然后，把这个放在app.listen之前：

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

这假设您通过脚本标签将 bundle.js 插入 index.html。

如何为 webpack 构建的生产反应 bundle.js 提供服务？

How to serve production react bundle.js built by webpack?

production

express

reactjs

webpack

react-router