如何在Heroku-22栈部署React应用 替代已停更的create-react-app-buildpack

mars/create-react-app-buildpack已停止维护，在Heroku-22及更高版本栈存在构建失败风险，无需迁移至Next.js/Remix框架，使用以下两种Heroku官方支持的方案即可完成部署，无需改动现有业务代码。

方案一：单Node.js官方构建包部署（推荐，运维成本最低） #

该方案基于Heroku官方长期维护的Node.js构建包，全版本栈兼容，操作步骤：

• 移除已停更的旧构建包
  本地项目根目录执行Heroku CLI命令：

  heroku buildpacks:remove mars/create-react-app-buildpack -a 你的Heroku应用名
  

• 绑定官方Node.js构建包

  heroku buildpacks:set heroku/nodejs -a 你的Heroku应用名
  

• 调整项目本地配置
  • 安装静态服务依赖：执行npm install serve --save
  • 修改根目录package.json的scripts字段，原有test、eject等脚本保持不变，调整start、build脚本如下：

    {
      "scripts": {
        "start": "serve -s build -l $PORT",
        "build": "react-scripts build"
      }
    }
    

  • 若项目使用React Router的BrowserRouter等前端路由模式，在根目录新建serve.json文件，配置路由重定向避免页面刷新404：

    {
      "rewrites": [{ "source": "**", "destination": "/index.html" }]
    }
    

• 将所有改动提交至Git后，push到Heroku远程分支即可自动完成构建部署。

该方案构建逻辑与本地执行npm run build完全一致，不会出现环境差异导致的构建异常，后续Heroku栈升级也无兼容性问题。

方案二：Node.js + Nginx双构建包部署（适合需要自定义服务配置的场景） #

如果需要自定义静态资源缓存规则、请求头、压缩策略等，可使用两个官方构建包组合部署：

• 清空原有构建包，按顺序添加官方构建包（注意Node.js构建包需放在首位，优先完成代码构建）：

  heroku buildpacks:clear -a 你的Heroku应用名
  heroku buildpacks:add heroku/nodejs -a 你的Heroku应用名
  heroku buildpacks:add heroku/nginx -a 你的Heroku应用名
  

• 项目根目录package.json保留原有"build": "react-scripts build"脚本即可，无需额外配置start脚本，Nginx构建包会自动托管build目录下的静态构建产物。
• 默认配置可满足普通CRA项目运行需求，若需调整Nginx规则，在根目录新建nginx.conf.erb编写自定义配置即可，前端路由重定向、缓存规则均可在该文件中定义。

部署注意事项 #

• 部署前可执行heroku stack -a 你的Heroku应用名确认当前应用栈版本，建议升级至Heroku-22或更高版本获取官方安全更新
• 若构建过程中出现内存溢出报错，可在Heroku应用后台添加环境变量NODE_OPTIONS=--max_old_space_size=2048，调大Node构建阶段的内存上限
• 项目中所有以REACT_APP_开头的自定义环境变量，需提前在Heroku后台配置完成，构建阶段会自动注入代码，与本地开发逻辑一致

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