如何部署Angular+SpringBoot项目到Heroku？新手遇特殊部署报错

Hey there, 作为刚接触Web开发的新手，能把本地的Spring+Angular项目跑起来已经很厉害了！遇到Heroku部署的问题别慌，我帮你分析下大概率踩的坑——毕竟之前帮不少开发者解决过类似的场景。

你本地用Maven构建Angular并把产物放到target/classes/static的逻辑完全没问题，但Heroku默认的Java buildpack不会主动帮你安装Node.js环境，而构建Angular项目恰恰需要Node和npm支持，这应该就是你报错的核心原因。下面是具体的解决步骤：

• 第一步：添加Heroku多Buildpack支持
  Heroku允许同时使用多个buildpack，我们需要先让它安装Node环境，再处理Java项目。打开终端用Heroku CLI执行：

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

  这样Heroku会优先安装Node相关依赖，再执行Spring项目的Maven构建。

• 第二步：确认Maven插件配置正确
  检查你本地用的frontend-maven-plugin配置，确保它在Maven的package阶段能正确触发Angular的构建命令。比如你的配置应该类似这样：

  <plugin>
      <groupId>com.github.eirslett</groupId>
      <artifactId>frontend-maven-plugin</artifactId>
      <version>1.12.1</version>
      <executions>
          <execution>
              <id>install node and npm</id>
              <goals>
                  <goal>install-node-and-npm</goal>
              </goals>
              <configuration>
                  <nodeVersion>v18.17.0</nodeVersion> <!-- 用你本地兼容的Node版本 -->
                  <npmVersion>9.6.7</npmVersion>
              </configuration>
          </execution>
          <execution>
              <id>npm install</id>
              <goals>
                  <goal>npm</goal>
              </goals>
              <configuration>
                  <arguments>install</arguments>
              </configuration>
          </execution>
          <execution>
              <id>npm run build</id>
              <goals>
                  <goal>npm</goal>
              </goals>
              <configuration>
                  <arguments>run build</arguments>
              </configuration>
          </execution>
      </executions>
      <configuration>
          <workingDirectory>${project.basedir}/frontend</workingDirectory> <!-- 指向你根目录下的前端文件夹 -->
      </configuration>
  </plugin>
  

  重点确认workingDirectory路径是否正确，保证Maven能找到你的Angular项目目录。

• 第三步：设置生产环境变量（可选但推荐）
  为了让Angular以生产模式构建（优化产物大小、禁用调试信息），可以设置Heroku环境变量：

  heroku config:set NODE_ENV=production
  

• 第四步：重新部署验证
  把所有配置修改提交后，重新推送到Heroku：

  git add .
  git commit -m "Fix Heroku build configuration"
  git push heroku main
  

  部署时可以查看日志，确认流程是：Node环境安装 → 前端依赖安装 → Angular构建 → Spring项目打包部署。

另外提个小细节：如果你的前端项目根目录有package.json，确保里面的build命令是正确的，比如Angular 16+可能是"build": "ng build"，旧版本可能需要"build": "ng build --prod"，这个要和你本地构建的命令保持一致。

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