Angular 17部署Google App Engine遇404错误，求排查方案

问题根源 #

你的Angular应用是纯静态前端项目，但使用了Node.js 22 runtime部署到GAE。GAE的Node.js runtime默认会尝试启动Node后端服务，而你的项目没有提供对应服务入口（如server.js），因此日志中MainExecutable:""是正常状态，但GAE会启动默认的/serve命令，该命令无法正确定位静态文件路径，导致404。同时原app.yaml的handlers配置存在顺序和规则错误，进一步加剧了问题。

解决方案 #

方案1：改用静态文件专用部署（推荐） #

GAE的Python runtime对静态文件支持完善，适合纯前端项目：

1. 修改app.yaml：

runtime: python39
service: [app-name]
handlers:
  # 托管静态资源目录
  - url: /assets
    static_dir: dist/[app-name]/assets
  # 匹配所有静态资源文件
  - url: /(.*\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot))$
    static_files: dist/[app-name]/\1
    upload: dist/[app-name]/(.*\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot))$
    secure: always
  # 所有路由指向index.html，支持Angular单页路由
  - url: /.*
    static_files: dist/[app-name]/index.html
    upload: dist/[app-name]/index.html
    secure: always

2. 确认.gcloudignore中!dist/配置已保留，确保构建产物被上传。

方案2：继续使用Node.js runtime，配置静态服务器 #

若坚持使用Node.js runtime，需添加静态文件托管服务：

1. 安装serve包：

npm install --save serve

2. 修改package.json的start命令：

"scripts": {
  "ng": "ng",
  "start": "serve -s dist/[app-name]",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
}

3. 简化app.yaml：

runtime: nodejs22
service: [app-name]
entrypoint: npm start
handlers:
  # 可选：直接托管静态资源，减少serve服务压力
  - url: /(.*\.(css|js|png|jpg))$
    static_files: dist/[app-name]/\1
    upload: dist/[app-name]/(.*\.(css|js|png|jpg))$
    secure: always

原app.yaml的问题说明 #

• 通配规则/.*添加了login: admin，导致所有非静态资源请求需要管理员登录，这是不必要的拦截，需移除。
• 根路径/和/.*的handler重复，且顺序逻辑混乱，GAE会按从上到下的顺序匹配规则，重复规则可能导致路由冲突。
• 缺少对JS、图片等静态资源的匹配规则，会导致这些资源返回404，Angular应用无法正常加载。

验证步骤 #

1. 本地执行ng build，确认dist/[app-name]目录生成完整构建文件。
2. 本地执行npm start（方案2），验证应用可正常访问。
3. 重新部署：gcloud app deploy。

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