GCP Load Balancer路径路由异常：Angular前端静态资源无法加载

问题根源 #

你的Angular应用加载失败是因为静态资源请求路径不匹配负载均衡的路由规则：

• Angular默认构建时的base href为/，所以页面里的CSS、JS资源路径是绝对路径（比如/static/css/main.xxx.css）。
• 当用户访问mydomain.com/client时，浏览器会直接向mydomain.com/static/css/main.xxx.css发起请求，而这个请求没有匹配到/client/*的路由规则，会走默认的api-backend-service，导致资源返回404，页面只有HTML标题能显示。

解决方案 #

方法1：调整Angular构建的base href（推荐） #

在构建Angular项目时，指定base-href为/client/，这样所有资源路径会自动带上/client前缀，浏览器请求时会匹配负载均衡的/client/*规则：

# 生产环境构建
ng build --prod --base-href "/client/"

# Angular 12+ 可使用配置文件指定环境
ng build --configuration=production --base-href "/client/"

构建完成后，Angular的index.html里会自动生成<base href="/client/">，资源路径会变成/client/static/css/main.xxx.css，请求时会被负载均衡路由到client-backend-service，并通过pathPrefixRewrite: /重写为/static/css/main.xxx.css，匹配后端的静态资源路径。

方法2：补充负载均衡的路由规则（兼容方案） #

如果无法修改Angular构建配置，可以在负载均衡的路径规则中添加额外条目，匹配所有静态资源路径并路由到client-backend-service：

defaultService: projects/my-proj/global/backendServices/api-backend-service
name: path-matcher-1
pathRules:
- paths:
  - /api/*
  service: projects/my-proj/global/backendServices/api-backend-service
  routeAction:
    urlRewrite:
      pathPrefixRewrite: /
- paths:
  - /client/*
  - /static/*
  - /assets/*
  - /favicon.ico
  service: projects/my-proj/global/backendServices/client-backend-service
  routeAction:
    urlRewrite:
      # /client/*路径重写为/，其他静态资源路径保留原路径
      pathPrefixRewrite: ''

注意：这种方法需要枚举所有Angular静态资源的路径前缀，维护成本较高，不如方法1简洁。

验证步骤 #

1. 重新部署调整后的Angular构建包到后端服务。
2. 访问mydomain.com/client，打开浏览器开发者工具的网络标签，检查CSS、JS资源的请求状态是否为200。
3. 确认资源请求的URL是mydomain.com/client/static/xxx（方法1）或mydomain.com/static/xxx但被路由到client后端（方法2）。

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