部署在GAE的Angular应用自定义域名下静态文件返回404求助

问题详情 #

• Angular应用部署至Google App Engine（GAE）后，默认URL https://<service>-dot-<app>.oa.r.appspot.com/ 可正常渲染，功能完整。
• 绑定GoDaddy托管的自定义域名custom.ai，DNS配置已按GAE要求设置生效，证书由Google管理。
• 访问自定义域名时，index.html能正常加载，但所有Angular生成的*.css、*.js静态文件均返回404；访问https://custom.ai/assets/images/image.png也返回404，提示：The requested URL /assets/images/rospen-logo.png was not found on this server.
• 已尝试调整app.yaml、dispatch.yaml、IAM权限及DNS设置，问题仍未解决。

当前app.yaml配置：

runtime: python312
service: angular

default_expiration: "60s"

handlers:
- url: /assets
  static_dir: dist/assets

- url: /(.*\.(css|js|html|png|jpg|jpeg|gif|ico))
  static_files: dist/\1
  upload: dist/(.*\.(css|js|html|png|jpg|jpeg|gif|ico))
  secure: always

- url: /.*
  static_files: dist/index.html
  upload: dist/index.html
  secure: always

解决方案 #

1. 修正Angular构建的基础路径 #

Angular构建默认可能使用相对路径，导致自定义域名下资源路径错误。执行构建时指定根路径：

ng build --prod --base-href /

或者修改angular.json中对应项目的baseHref配置为"/"，确保编译后的资源引用路径指向域名根目录。

2. 调整GAE handlers匹配规则 #

原/assets的handler仅匹配/assets路径，无法覆盖其子目录，修改为：

- url: /assets/(.*)
  static_files: dist/assets/\1
  upload: dist/assets/(.*)
  secure: always

替换原有/assets相关的handler，确保所有/assets/下的静态文件能正确映射。

3. 验证部署目录结构 #

本地执行ng build后，检查dist目录是否包含assets文件夹、编译后的js/css文件；部署时确保使用gcloud app deploy命令，上传最新的dist目录内容，避免旧文件或缺失文件导致404。

4. 确认自定义域名的服务映射 #

在GAE控制台的“自定义域名”页面，检查custom.ai是否正确映射到angular服务。若域名指向默认服务，需调整域名映射目标或通过dispatch.yaml将自定义域名路由到angular服务。

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