要将 React 应用程序部署到 Heroku，我执行了以下步骤...

1.在您的终端中，输入npm -v和node -v以获取您的 npm 和节点版本。就我而言，我的 npm 版本是6.14.1& 我的节点版本是12.13.0.

2.在 中package.json，在属性下添加"main": "server.js",和。在您的属性中，添加 并设置为。"engines": { "npm": "6.14.1", "node": "12.13.0" },"private"scripts"heroku-postbuild": "npm install""start""node server.js"

3.在根目录下，创建Procfile一行文字：web: node server.js.

4.在根目录中，server.js使用以下代码创建文件..

const express = require("express");
// eslint-disable-next-line no-unused-vars
// const bodyParser = require('body-parser');
const path = require("path");
const app = express();
const port = process.env.PORT || 8080;

app.use(express.static(path.join(__dirname, "build")));

// This route serves the React app
app.get('/', (req, res) => res.sendFile(path.resolve(__dirname, "build", "index.html")));

app.listen(port, () => console.log(`Server listening on port ${port}`));

5.npm run build在终端中输入生成build目录。接下来，/build从.gitignore文件（在根目录中）中删除（或注释掉）。

6.在终端server.js输入node server.js（或nodemon server.js）测试是否有效。如果它有效，server.js应该为 React 应用程序提供服务。

7. 将步骤 1-6 中的所有内容提交到 GitHub 和 Heroku 存储库。要提交到 Heroku 存储库，请在您的终端中输入heroku git:remote -a weather-app-react-node，然后输入git push heroku master。

您可以尝试直接登录到 heroku 并直接从那里部署您的 github 存储库所需的分支。

我使用了 create-react-app-buildpack

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
or
heroku create -b mars/create-react-app
git add .
git commit -m "I am the newborn app"
git push heroku master
heroku open

注意：就我而言，来自 CLI 的 buildpack 配置不起作用，我仍然有 nodejs-build pack，所以我手动将 build pack 更改mars/create-react-app为 Heroku 项目仪表板

将 React 应用程序推送到具有节点 js 后端的 Heroku 的最佳实践是使用 Heroku 后期构建脚本，后期构建将处理引擎盖下的所有工作

请按照以下步骤操作

将以下代码段添加到脚本下的 package.json 中

    scripts{
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}

并将此代码段添加到您的 index.js 文件中

    app = express()
    app.use(express.static('reactFolderName/build'));
    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));