React App Axios路由在部署到Heroku后无法识别

Question

我有一个基于react和express构建的应用程序。

1. 尽管我已经指定运行heroku端口或我的本地端口(如果我在本地运行(，但不知怎么的，我收到了一个错误，说我的axios.post('/',...)有一个POST http://localhost:3000/ 404 (Not Found)，其中应用程序仍然使用3000而不是8000

const port = process.env.PORT || 8000
app.listen(port, () => {
console.log('App running on port ', port);
});
module.exports = app;

2. 有人能告诉我应该在我的package.json中放什么吗？这样我就可以在heroku和本地运行我的应用程序了？还有什么是命令而不是npm start？这是我的当前项目目录和package.json：

-> index.js
-> src
-> containers
-> App.js (My react frontend)
-> server
-> server.js (My express backend)

"scripts": {
"start": "node src/server/server.js",
// "start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

Answer 1

第一个问题：

我猜你在使用代理。为什么它继续localhost:3000是因为您仍然有缓存。清除缓存，则需要首先删除nodemodule文件夹以及react应用程序中的package-lock.json。第二个npm安装所有再次依赖您的react应用程序，并重新启动您的reace终端。之后，你的代理应该可以工作了。

第二个问题：

我不建议使用react的package.json。它更喜欢使用服务器的package.json，因为它不会干扰react启动脚本，而且无论如何，您的服务器都应该是为构建的静态内容提供服务的服务器。一个简单而好的方法是将整个服务器文件夹放在根目录中。

没有多少人谈论这件事；但是有一个命令heroku运行你的脚本

1. heroku-prebuild脚本=>在heroku安装依赖项之前运行
2. npm install=>在您的package.json中安装软件包
3. heroku-postbuild脚本=>在heroku安装依赖项后运行
4. start脚本=>步骤1,2,3完成后运行

通常，人们会使用heroku-postbuild脚本来运行他们的npm run build