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

我有一个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应用程序中，其中一个组件使用“”的url对mLab上的数据库进行AJAX调用，该url工作正常并提取我请求的数据

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

我与mLab进行了磋商，没有任何问题，我与Heroku进行了磋商，这超出了他们的支持范围

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

你知道我需要做什么吗

---

谢谢

如果您的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));
      });
};

---

基本上，您希望告诉express，如果处于生产模式（部署在heroku上），则为所有端点提供服务，除了api端点（/^/（？！api）只需使用heroku的部署URL，即

https://myapp.herokuapp.com

。我试过了，但它给了我以下错误：加载资源失败：服务器响应状态为404（未找到）。这就是我感到困惑的原因。所以你也在Express旁边提供React应用程序？或者它们是分开的？在旁边。这是server.js页面，如果有帮助的话：我已经做了很多次了，Heroku总是在你的应用程序启动时设置PORT env变量。然后，你的应用程序应该能够只查询你的Heroku URL谢谢你，Aaron，感谢你在这个！我包括了它，当ajax调用尝试连接mLab数据库时，它仍然给我一个404错误。让我困惑的是，它在本地工作得很好，但我一推它，我就不确定ajax调用访问数据库时应该使用的url。这有意义吗？您对mLab url使用环境变量吗？我知道所以一定要在heroku设置中设置这些。