如何正确将Angular应用部署到AWS AppRunner？部署遇问题求助

核心问题分析 #

你遇到的问题本质是两个：构建阶段Angular CLI无法正常调用，以及构建产物路径与AppRunner默认访问路径不匹配。

分步解决方案 #

1. 修复ng命令返回127错误 #

错误127表示命令未找到，全局安装Angular CLI在AppRunner Node.js运行时中可能存在环境变量适配问题，更可靠的方式是将CLI作为项目开发依赖管理：

• 本地项目执行：npm install --save-dev @angular/cli
• 提交更新后的package.json到GitHub仓库
• AppRunner构建命令改用项目本地CLI执行：

  npm install && npx ng build --configuration production
  

  用npx直接调用项目node_modules内的CLI，规避全局安装的环境适配问题。

2. 修复静态文件路径找不到的错误 #

出现ENOENT: no such file or directory, stat '/app/dist/myapp/assets/index.html'，说明AppRunner默认访问路径与你的构建产物路径不匹配，有两种解决方式：

• 方式一：修改Angular输出路径
  编辑angular.json，将projects.[你的项目名].architect.build.options.outputPath的值改为dist（去掉项目名后缀），构建后产物直接输出到dist目录，匹配AppRunner默认查找路径。
• 方式二：指定静态服务根目录
  先本地安装静态服务依赖：npm install --save-dev serve，提交package.json后，在AppRunner配置中：
  构建命令：npm install && npx ng build --configuration production
  启动命令：npx serve dist/myapp -l 8080
  （将myapp替换为你的实际项目名）

3. 完整AppRunner配置参考 #

• 源代码仓库：选择目标GitHub仓库分支
• 运行时：Node.js 18
• 构建命令：npm install && npx ng build --configuration production
• 启动命令：npx serve dist/[你的项目名] -l 8080（或npx serve dist -l 8080，对应修改outputPath的情况）
• 环境变量：添加NODE_ENV=production

额外注意事项 #

• 确保package.json的scripts中包含build命令（Angular项目默认自带："build": "ng build"），也可以将构建命令改为npm install && npm run build -- --configuration production
• 确认GitHub仓库包含angular.json、package.json、package-lock.json等必要文件，不要错误排除这些文件。

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