Heroku部署双目录React+Node项目报buildpack不兼容如何解决

Heroku 默认 Node.js buildpack 会强制在仓库根目录检索package.json文件识别项目类型，你的仓库采用前后端分离的目录结构，根目录不存在该配置文件，buildpack 无法识别项目类型就会抛出「App not compatible with buildpack」错误。

方案1：配置子目录构建（无需调整现有仓库结构，推荐） #

• 进入对应 Heroku 应用的设置面板，找到 Buildpacks 板块，删除已添加的默认 Node.js buildpack
• 如果你只需要部署 client 目录下的 React 前端站点：
  • 先确认 client 目录内的package.json包含可正常执行的build脚本，构建产物默认输出到build目录，同时配置好start脚本（比如用serve托管静态资源的话，脚本配置为"start": "serve -s build"，记得提前把serve加到client目录的依赖里）
  • 在 Heroku 应用的环境变量配置里新增PROJECT_PATH=client，指定构建流程的工作目录为client文件夹
  • 回到Heroku部署页，绑定GitHub仓库对应分支，触发手动部署即可
• 如果你需要同时部署api后端和client前端，不要用单个Heroku应用承载，新建两个独立的Heroku应用，分别配置PROJECT_PATH=api和PROJECT_PATH=client，各自绑定GitHub仓库对应分支部署即可。

方案2：根目录增加适配配置（无需修改Heroku后台buildpack设置） #

• 在仓库根目录新建package.json文件，通过npm的--prefix参数指定所有命令在client子目录执行，示例配置如下：

{
  "name": "fullstack-app-deploy",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "postinstall": "npm install --prefix client && npm run build --prefix client",
    "start": "npm start --prefix client"
  }
}

• 把这个根目录的package.json提交推送到GitHub，Heroku默认Node.js buildpack就能在根目录识别到Node.js项目，自动进入client目录完成依赖安装、构建、启动流程，不会再触发buildpack兼容错误。
• 如果你的React项目用了react-router等前端路由方案，记得在client目录下新增static.json配置路由转发，避免刷新子页面出现404，配置内容：

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

• 推送代码到GitHub前，先在本地进入对应目录执行npm run build，确认本地构建无报错再推代码，减少线上构建失败概率
• 检查仓库根目录和client目录的.gitignore配置，不要把node_modules、build目录提交到GitHub仓库，否则会触发构建缓存异常
• 如果依然报buildpack兼容错误，先核对Heroku配置的PROJECT_PATH值和仓库内文件夹名完全一致，路径匹配是大小写敏感的。

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