在Google Cloud Storage托管带路由的静态SPA的可行方案

我之前帮不少开发者解决过这个问题，明确告诉你：完全可以在GCP Cloud Storage上托管带React Router的单页应用，而且能完美处理路由跳转，同时解决大家吐槽的ErrorDocument导致的HTTP响应状态码问题。下面是具体的实现步骤和优化方案：

一、基础托管配置（避坑版） #

先做好基础的存储桶配置，但要避开常规指南的坑：

• 创建Cloud Storage存储桶，若用自定义域名，存储桶名称必须和域名完全匹配；用默认域名则随意命名
• 上传你React项目build后的所有静态文件（index.html、css、js、图片等）到存储桶根目录
• 开启静态网站托管：
  • 进入存储桶「配置」标签，找到「静态网站」模块
  • 设置「主页面后缀」为index.html
  • 重点：不要把「错误页面」设为index.html——这就是导致所有路由返回404状态码的根源，后续用更合理的方案解决路由问题

二、核心路由解决方案：Cloud Functions + 负载均衡 #

要让React Router的所有路径都返回index.html且保持200状态码，最优雅的方式是用Cloud Functions拦截请求，配合负载均衡统一处理：

1. 部署路由处理Cloud Function #

创建一个Node.js类型的Cloud Function（比如命名为spaRouter），代码如下：

exports.spaRouter = (req, res) => {
  const requestPath = req.path;
  // 定义静态资源后缀列表，确保静态文件直接返回
  const staticAssetExtensions = ['.css', '.js', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico', '.json'];
  
  if (staticAssetExtensions.some(ext => requestPath.endsWith(ext))) {
    // 静态资源直接转发到Cloud Storage对应文件
    res.redirect(307, `https://storage.googleapis.com/你的存储桶名称${requestPath}`);
  } else {
    // 非静态资源返回index.html，保持200状态码
    res.set('Content-Type', 'text/html');
    // 这里可以直接读取存储桶里的index.html内容返回，或者在函数包中带上build后的index.html
    res.status(200).sendFile('/index.html', { root: './build' });
  }
};

2. 配置Cloud Load Balancer（实现统一入口） #

为了让所有请求都经过Cloud Function处理，需要配置HTTP(S)负载均衡：

• 创建一个HTTP(S)负载均衡器，设置后端服务为你刚才部署的Cloud Function
• 配置URL映射，将所有路径（/*）指向该Cloud Function
• 若使用自定义域名，将域名解析到负载均衡器的IP，并配置GCP管理的SSL证书实现HTTPS访问

三、简易替代方案（适合小项目） #

如果不想用Cloud Functions和负载均衡，也可以用存储桶的重定向规则，但有局限性：

• 进入存储桶「配置」标签的「重定向」模块
• 添加规则：
  • 来源路径：/*
  • 目标路径：/index.html
  • 重定向类型：302临时重定向
• 缺点：所有路由都会跳转到/index.html，URL会被修改，不符合SPA路由的美观需求，仅适合对URL要求不高的场景

四、常见问题处理 #

• HTTP状态码问题：Cloud Functions方案确保所有合法路由返回200状态码，静态资源返回对应状态码，解决了ErrorDocument方案导致的404状态码异常问题
• 缓存优化：在Cloud Storage中给静态资源设置缓存头（比如Cache-Control: public, max-age=31536000），提升加载速度
• SEO友好：配合Server-Side Rendering（SSR）或静态生成（SSG），可以进一步提升SPA的SEO表现，Cloud Functions也支持SSR逻辑扩展

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