Heroku部署问题：如何实现Angular嵌入Spring Boot应用并解决npm缺失报错

核心问题分析 #

你遇到的Cannot run program "npm"错误，本质是Heroku默认只给Java（Spring Boot）项目配置了Java Buildpack，没有安装Node.js环境——而构建Angular项目必须依赖npm。所以我们需要让Heroku同时支持Node.js和Java环境，并调整构建流程的顺序。

具体解决方案 #

1. 添加双Buildpack到Heroku项目 #

Heroku支持同时使用多个Buildpack，我们需要先安装Node.js环境（用于构建Angular），再安装Java环境（用于构建Spring Boot）。

• 命令行方式：
  打开终端，进入本地仓库根目录，执行以下命令：

  heroku buildpacks:add --index 1 heroku/nodejs
  heroku buildpacks:add --index 2 heroku/java
  

• 网页设置方式：
  登录Heroku后台，进入你的项目 → Settings → Buildpacks → 点击Add buildpack，分别添加heroku/nodejs和heroku/java，并调整顺序让Node.js排在第一位。

2. 配置前端构建与产物移动脚本 #

我们需要让Heroku在Node.js阶段完成Angular的构建，并将产物移动到Spring Boot的静态资源目录。

在仓库根目录创建一个package.json文件（如果已有，直接修改），添加以下脚本：

{
  "scripts": {
    "postinstall": "cd sun-angular && npm install && npm run build && mkdir -p ../sun-admin/src/main/resources/static/ && mv dist/* ../sun-admin/src/main/resources/static/"
  }
}

• 脚本解释：
  • cd sun-angular：进入前端项目目录
  • npm install：安装前端依赖包
  • npm run build：执行Angular构建（请确保你的sun-angular/package.json里有"build": "ng build --prod"这类适配你Angular版本的构建脚本）
  • mkdir -p ...：提前创建后端静态资源目录，避免移动文件时因目录不存在报错
  • mv dist/* ...：将构建好的前端产物移动到Spring Boot的resources/static目录下

3. 调整后端构建配置 #

修改sun-admin的构建配置（Maven或Gradle），移除原本在本地执行的前端构建任务——因为现在前端构建已经由Node.js Buildpack完成了。

比如如果是Maven，删除pom.xml中调用npm构建的插件或任务；如果是Gradle，删除对应的自定义task。

4. 重新部署 #

完成以上配置后，提交所有修改到Git仓库，然后执行：

git push heroku main

Heroku会先执行Node.js阶段的构建（安装Node、构建前端、移动产物），再执行Java阶段的Spring Boot构建，最终打包成可运行的应用。

注意事项 #

• 确保sun-angular/package.json中的build脚本适配你的Angular版本，比如Angular 14+可能需要"build": "ng build --configuration production"
• 如果你的Spring Boot项目静态资源目录路径不同（比如非src/main/resources/static），需要调整脚本中的移动路径
• 可以通过heroku logs --tail实时查看部署日志，快速排查路径或依赖类问题

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