无需Buildpacks，将create-react-app生产环境部署至Heroku

我来帮你搞定这个问题！不用buildpack完全没问题，咱们手动调整项目配置就能让Heroku以生产环境部署你的React应用，核心就是修改package.json的脚本逻辑，让Heroku先构建生产包再启动静态服务。

第一步：安装静态文件服务器 #

Create React App构建出来的是静态HTML/CSS/JS文件，不能直接用开发服务器跑生产环境，咱们用serve这个轻量工具来托管静态文件。在项目根目录打开终端执行：

npm install serve --save

（用yarn的话就换成yarn add serve）

第二步：调整package.json的脚本命令 #

Heroku默认会执行npm start，而原来的start是启动开发服务器，咱们得把它换成生产环境的启动命令，还要加个Heroku专属的构建钩子：
打开package.json，找到scripts部分，改成这样：

"scripts": {
  "start": "serve -s build", // 生产环境启动静态服务
  "build": "react-scripts build", // 保留原有的构建命令
  "dev": "react-scripts start", // 新增这个用来本地开发，避免影响本地调试
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "heroku-postbuild": "npm run build" // Heroku会自动执行这个钩子来构建生产包
}

为啥这么改？ #

• heroku-postbuild：Heroku在安装完所有依赖后，会自动触发这个命令，帮咱们生成生产环境的build文件夹
• start脚本现在指向serve -s build，意思是用serve托管build文件夹，这是生产环境的正确打开方式

第三步：设置生产环境变量（可选但推荐） #

为了确保Create React App的构建过程完全是生产模式，咱们给Heroku设置NODE_ENV变量：
在终端执行：

heroku config:set NODE_ENV=production

或者也可以去Heroku后台的项目设置里手动添加这个环境变量，效果一样。

第四步：部署到Heroku #

现在就可以正常推送代码了：

git add .
git commit -m "配置Heroku以生产环境部署"
git push heroku main

（如果你的主分支是master，就把main换成master）

验证一下 #

推送完成后打开Heroku的应用链接，你会发现右上角没有开发模式的React提示了，说明已经是生产环境啦！

另外，为了避免Heroku用不兼容的Node/npm版本，建议在package.json里加个engines字段，指定你本地用的版本：

"engines": {
  "node": ">=16.0.0",
  "npm": ">=8.0.0"
}

你可以用node -v和npm -v查看自己本地的版本，填上去就行。

内容的提问来源于stack exchange，提问作者Poogy