GCP环境下如何让Cloud Storage的React应用与App Engine API共用同域名

你需要的路径分发能力在GCP下有两种成熟的实现方案，逻辑和AWS侧的流量分发规则配置思路基本一致：

方案1：Cloud Load Balancing（CLB）+ URL Map（生产环境推荐） #

这个方案和AWS ALB/CloudFront的路由配置逻辑对齐，适合生产级高流量场景：

• 提前配置两个后端源：
  • 存储React静态资源的Cloud Storage桶：开启桶的CLB访问权限，配置为后端存储桶，同时将桶的索引页、错误页都设置为index.html保证React路由正常工作
  • 部署Go API的App Engine服务：直接关联为CLB的后端服务
• 在URL Map中配置两条路由规则：
  • 默认规则/*：流量转发到Cloud Storage存储桶后端
  • 自定义规则/api/v1/*：流量转发到App Engine后端服务
• 为CLB配置对应域名的SSL证书，将www.mydomain.com解析到CLB的公网IP即可生效

方案2：Firebase Hosting 反向代理（轻量场景推荐） #

如果业务规模不大，不想单独配置负载均衡，可以用Firebase Hosting做统一接入：

• 把React静态资源部署到Firebase Hosting，也可以直接关联已有的Cloud Storage桶作为Hosting源
• 在项目的firebase.json中添加重写规则：

{
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "/api/v1/**",
        "run": {
          "serviceId": "你的App Engine服务名称",
          "region": "服务部署的GCP区域"
        }
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• 部署配置后将www.mydomain.com绑定到Firebase Hosting即可生效

注意事项 #

• 配置完成后建议先通过GCP控制台的路由测试功能验证规则正确性，再切换生产域名解析
• 如果存在跨域需求，可以直接在App Engine的响应头中添加CORS规则，也可以在负载均衡层统一配置
• 生产场景建议开启CLB的CDN缓存功能，降低Cloud Storage的回源压力，提升静态资源访问速度

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