如何提供由Webpack构建的生产React bundle.js？

Question

我的应用在Webpack开发服务器中工作正常。现在，我想将其部署到生产服务器上。因此，我已经构建了bundle.js文件。我尝试在Express服务器上提供该文件，但我无法访问除根/以外的其他URL。

例如，这是我的React路由：

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

并且 express 应用程序 (我将 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。

- Komsit Prakobphol

Answer 1

您需要在Express服务器上声明一个“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中。

- Rick Runyon

---

谢谢，完美运行！在您的解决方案中发现了一个小错别字：应该是 res.sendFile(path.resolve(__dirname, 'public/index.html')); - Komsit Prakobphol

但是如果我的Webpack输出到'./dist/bundle.js'，而我的未捆绑代码和index.html在'./public'中怎么办？在生产环境中我需要做什么？我的Express服务器从'public'提供静态文件...但是index.html引用脚本到'dist/bundle.js' - 无法访问它....（这在Webpack的开发服务器中可以正常工作） - Refactor-Man

这是我使用的相同设置。你只需要将./dist/bundle.js复制到./public目录下（确保bundle.js的路径与index.html中定义的相对路径匹配 - 在你的情况下应该是./public/dist/bundle.js）。你需要记得在每个发布版本中都要这样做。我认为你可以通过脚本、webpack插件或gulp任务来自动化这个过程。 - Komsit Prakobphol

按照这种方法进行操作，每当执行一个Get请求时，它会将HTML文件作为响应返回。 - TRomesh

@tscizzle 是的，我通过改变一些代码行的顺序来解决了它。将 app.get('*', function(req, res) { res.sendFile(path.resolve(__dirname, 'public/index.html')); }); 放在其他路由之前和 server.listen(port); 之后即可。 - TRomesh