如何为Backend Bucket的HTTPS负载均衡器配置URL重写解决SPA SEO问题

1. 先调整GCS存储桶的网页设置 #

移除之前设置的错误页配置，只保留主页指向index.html，避免GCS主动返回404状态码：

gsutil web set -m index.html gs://你的存储桶名称

2. 配置负载均衡器的路由规则 #

需要设置两条优先级不同的路由规则，确保静态资源正常加载，同时非静态路径请求都返回200的index.html：

规则1：匹配静态资源，直接转发（优先级最高） #

这条规则优先处理所有静态资源请求，保证CSS、JS、图片等资源能正常返回：

name: static-resources-forward
priority: 1
matchRules:
- regexMatch: "^.+\.(css|cur|js|jpe?g|gif|htc|ico|png|xml|otf|ttf|eot|woff|woff2|svg)$"
routeAction:
  urlRewrite:
    pathPrefixRewrite: ""
service: projects/example-project/global/backendBuckets/webapp-dev

规则2：匹配所有其他路径，重写为index.html #

这条规则处理所有非静态资源的请求，将路径重写为/index.html，让GCS返回200状态的主页：

name: spa-fallback-rewrite
priority: 2
matchRules:
- prefixMatch: "/"
routeAction:
  urlRewrite:
    pathPrefixRewrite: "/index.html"
service: projects/example-project/global/backendBuckets/webapp-dev

3. 验证效果 #

• 访问静态资源（如https://example.com/main.js）：正常返回资源，状态码200
• 访问React虚拟路径（如https://example.com/account）：LB自动将请求重写为/index.html，GCS返回200状态的主页，浏览器加载后React会处理路由
• 爬虫访问虚拟路径：获取到200状态码的页面内容，不会触发SEO惩罚

之前规则失效的原因 #

你之前的规则对所有/前缀的请求都做了重写，导致静态资源请求也被改成/index.html，不仅资源加载失败，还会出现逻辑混乱。通过拆分规则，先匹配静态资源直接转发，再处理其他请求的重写，就能同时满足浏览器导航和SEO的需求。

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