React 应用程序 + heroku 服务器无法在生产环境中运行，但在开发环境中运行良好

Question

我正在处理从 server 查询的 React 应用程序。我已经在 heroku 上部署了服务器。当我在 dev 中进行测试时，application 的行为符合预期。但是当我在 vercel 部署中使用它时，它失败了，因为 heroku 服务器没有正确响应。

以下是查询的服务器代码：

app.get(`/allPlans`, async (req, res) => {
    console.log("allPlans() query");
    ret = await Plans.find({});
    f = [];
    for (i = 0; i < ret.length; i++) {
      f.push(ret[i].name);
    }
    console.log(f);
    return res.status(200).send(f);
  });

以下是我使用 axios 从客户端查询的代码：

const endPoint = "/allPlans";
let ret = await axios.get(endPoint);
console.log(ret.data);

在 dev 环境中，当我在 localhost:3000 上部署应用程序时，这会返回一个很好的 array。

["test","myPlan190","myPlan987"]

但在vercel的实际生产中，它返回了以下对象（您可以通过vercel deployment在控制台中查看此消息）：

欢迎所有建议。

Github repo

Vercel deployment

Server status

Heroku server query which is failing from axios, but working elsewise

Answer 1

好吧，我检查了你的存储库，还检查了你的 Vercel 部署上的 XHR 请求，据我所知，它只生成了一个，即：

Request URL: https://planner-pcrsehfg3-akcgjc007.vercel.app/allPlans

它没有对服务器进行实际调用。我在 Dashboard.js 中看到您需要包中的 axios。我没有找到任何已创建的 axios 实例。所以基本上没有什么可以附加在“/allPlans”前面。要么创建一个具有正确 url "https://cryptic-bayou-91116.herokuapp.com" 的 axios 实例，要么通过将整个 url "https://cryptic-bayou- 91116.herokuapp.com/allPlans" 在 axios 中调用 Dashboard.js.

以下是 axios 查询的更新代码：

const baseURL = "https://cryptic-bayou-91116.herokuapp.com"
...
const endPoint = baseURL + "/allPlans";
let ret = await axios.get(endPoint);
console.log(ret.data);

Answer 2

fHeroku 随机更改了应用程序绑定端口。

您可以通过以下方式设置端口：

const port = process.env.PORT || 3000

在您的应用中使用 dotenv

或者在 heroku 上编辑文件 .env。安装 Heroku CLI:

heroku login

heroku run bash -a app_name

touch .env

echo "PORT=3000" >> .env

check variable by

cat .env

React 应用程序 + heroku 服务器无法在生产环境中运行，但在开发环境中运行良好

React app + heroku server not working on production, but working fine in dev

production

heroku

reactjs

server

vercel