在Heroku上运行Express服务器和React前端

Question

我正在使用React、Node和Express自学web开发，并试图将我的应用程序部署到Heroku。

我面临的问题是，在本地，我可以使用客户端的npm start和启动express服务器的node server.js来运行服务器和客户端，而不会出现任何问题。

然而，我还没能找到一种合适的方法在Heroku上做类似的事情——我已经阅读了所有关于将类似的应用程序部署到Heroku并通过express服务器运行我的react客户端的文章，但还没能让它发挥作用。

以下是一些可能相关的附加信息：

• 我使用create-react-app创建了我的react应用程序，所以它有一个公用文件夹(除了尝试通过index.html运行我的react-js脚本外，我根本没有接触过它(和一个src文件夹，其中包含我的所有react组件和呈现应用程序的索引
• 我的server.js文件在git目录的根目录中，它在本地应该做的一切都可以工作
• 我试过在postbuild中使用package.json脚本来运行node server.js命令，但如果我在任何地方使用node命令，一旦命令运行，我的控制台就会被运行的服务器阻止(即，当我使用git-push-heroku master时，一旦它到达该命令，就会被阻止(

如果需要更多信息，请告诉我，我们将不胜感激。

干杯

Answer 1

我假设您的文件夹结构如下

client
--App.js
--package.json
server.js
package.json

在server.js中，将react构建文件与服务器链接

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 5000;
// Serve any static files
app.use(express.static(path.join(__dirname, 'client/build')));
// Handle React routing, return all requests to React app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
app.listen(port, () => console.log(`Listening on port ${port}`));

在package.json(位于根目录中(中粘贴以下

"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail "yarn server" "yarn client"",
"dev:server": "cd client && yarn build && cd .. && yarn start",
"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},

在client/package.json中，在脚本标记后粘贴以下内容

"proxy": "http://localhost:5000/",

的工作原理

heroku要做的第一件事是通过执行npm run命令启动服务器(heroku的默认行为(，然后执行postbuild命令heroku-postbuild。在这里，它将转到客户端文件夹，然后安装必要的react包，然后从client/package.json文件执行build命令。

在client/package.json 中添加代理标签有什么意义

告诉开发服务器将任何未知请求代理到

参考