Heroku部署Angular应用构建成功却出现Application错误如何解决

对应报错日志：
2021-10-10T05:13:52.496118+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=dashboard-agri.herokuapp.com request_id=03476fb8-2620-4c0a-9b5f-9588550b653f fwd="103.70.199.92" dyno= connect= service= status=503 bytes= protocol=https

常见诱因 #

• 端口配置错误：Angular应用启动时没有绑定Heroku分配的动态端口，Heroku不允许写死固定端口，必须读取process.env.PORT环境变量，本地开发常用的3000/4200端口在生产环境无法使用会直接导致启动失败。
• 依赖缺失：构建阶段只安装了开发依赖devDependencies，生产环境启动需要的依赖（比如用来托管静态资源的express、http-server）没有放到生产依赖dependencies里，Heroku默认生产环境会忽略所有开发依赖。
• 启动命令配置错误：package.json里的start脚本配置错误，比如写成了本地开发用的ng serve，生产环境需要先构建出dist产物目录，再通过静态服务器启动，或者配置的启动文件路径不对。
• 静态资源路径配置错误：Angular构建的baseHref配置错误，或者静态托管服务没有正确指向dist目录下的index.html。
• 内存超出限制：应用启动时占用内存超出Heroku免费dyno的512M限制，进程被系统强制杀死。

排查修复步骤 #

1. 检查端口配置
   如果用express托管静态资源，确认监听端口的代码写法：

const port = process.env.PORT || 4200;
app.listen(port, () => {
  console.log(`App running on port ${port}`);
});

不要写死固定端口。

2. 检查package.json配置

• 确认所有生产环境需要的依赖都在dependencies字段下，express、http-server等服务依赖不要放到devDependencies里。
• 确认scripts字段配置正确：
  • build脚本要正常输出dist目录："build": "ng build --prod"
  • start脚本指向正确的启动命令，用express托管的话为"start": "node server.js"，用http-server托管的话为"start": "http-server dist/你的项目名 -p $PORT"
    注意不能把start配置为ng serve，该命令仅适用于本地开发，不支持生产环境运行。

3. 检查静态资源托管配置
   如果用express托管，确认静态资源路径指向正确的dist目录，同时配置路由 fallback适配Angular单页应用路由：

const express = require('express');
const app = express();
// 指向Angular构建后的dist目录
app.use(express.static(__dirname + '/dist/你的项目名'));
// 所有路由返回index.html，避免刷新404
app.get('/*', function(req,res) {
  res.sendFile(__dirname + '/dist/你的项目名/index.html');
});

把你的项目名替换为Angular项目的实际名称，要和dist目录下的子文件夹名完全一致。

4. 查看完整应用日志
   执行Heroku CLI命令查看更详细的崩溃日志，定位具体报错点：
   heroku logs --app 你的应用名 --tail
   可以看到应用启动时的具体报错，比如依赖找不到、文件路径错误等信息，再针对性修复。

5. 内存占用排查
   如果是内存超限导致的崩溃，可以在Angular构建时加上产物优化参数，减小构建后体积：
   ng build --prod --build-optimizer --aot
   也可以升级Heroku dyno配置提高内存上限。

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