Question

我有一个React-Express应用程序，可从mLab上的MongoDB数据库中提取数据。

在我的server.js文件中，我将api端口设置为：

var port = process.env.PORT || 3001;

它会这样听：

app.listen(port, function() {
  console.log(`api running on port ${port}`);
});

当前，在我的React应用程序中，其中一个组件使用“ http://localhost:3001/api/data”的URL对mLab上的数据库进行AJAX调用，可以正常工作并提取我请求的数据。

但是，当我将应用程序部署到Heroku时，我不确定如何在React应用程序中配置server.js和url，因此React应用程序能够从数据库中提取数据。

我已经授予mLab，没有问题，并且已经授予Heroku，这超出了他们的支持范围。

更新：是否需要设置或重定向process.env.PORT变量？

有什么想法我需要做什么？

谢谢！

Answer 1

如果您的express应用程序同时服务于捆绑的react应用程序和api，则需要确保express知道/ api端点不需要提供给react应用程序。

不确定您的服务器代码是什么样，但这对我有用：

if (process.env.NODE_ENV === 'production') {
      app.get(/^\/(?!api).*/, (req, res) => { // don't serve react app to api routes
        res.sendFile(PATHTOREACTBUNDLE));
      });
};

基本上，您想告诉我们，如果在生产模式下（在heroku上进行部署），则应为除React包中的api端点（/ ^ /（?! api）以外的所有端点提供服务。

在Heroku上配置React-Express应用以在Ajax请求中提取数据

1 个答案: