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

Question

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

我面临的问题是，我可以在本地运行我的服务器和客户端，使用npm start 客户端和node server.js 启动我的快速服务器没有问题。

但是，我无法找到合适的方式在 Heroku 上执行类似操作 - 我已阅读所有有关将类似应用程序部署到 Heroku 并通过 express 服务器运行我的 react 客户端的文章，但没有t 设法让它工作。

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

• 我使用 create-react-app 创建了我的 react 应用程序，因此它有一个公用文件夹（除了尝试通过 index.html 运行我的 react js 脚本之外，我实际上根本没有接触过它）和一个 src 文件夹包含我所有的反应组件和呈现应用程序的索引
• 我的 server.js 文件位于我的 git 目录的根目录中，它应该在本地执行的所有操作。
• 我已经尝试使用 package.json 脚本在 postbuild 中运行 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 的 script 标签之后粘贴以下内容

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

这是如何工作的

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

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

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

Reference