如何在Google Cloud Storage部署支持React Router的React应用？

核心思路 #

静态存储服务默认会按请求路径查找对应文件，不存在则返回服务商自带的404页面。要实现React Router的客户端路由，关键是让所有非静态资源的请求（比如/profile这类路由路径）都返回根目录的index.html，由客户端JS接管路由逻辑。

Google Cloud Storage（GCS）配置步骤 #

• 开启存储桶的静态网站托管功能，在「网站配置」中：
  • 设置主页为index.html（根路径默认返回的文件）
  • 设置404页面为index.html：所有找不到对应文件的请求，都会返回index.html，React Router就能处理路由渲染。
• 上传npm run build生成的build目录下所有文件到GCS桶根路径，确保文件的Content-Type配置正确（GCS通常会自动识别，异常时可手动调整）。

AWS S3配置步骤 #

• 开启桶的静态网站托管，在「静态网站托管」配置中：
  • 设置索引文档为index.html
  • 设置错误文档为index.html：此配置会让所有不存在的路径请求返回index.html，交由React Router处理。
• 上传build目录下的所有文件到S3桶，保留文件结构，确保静态资源（如static/js/xxx.js）的访问路径正确。

额外优化点 #

• 在React路由配置中添加全局匹配路由，实现自定义软404：

  import { Route, Routes } from 'react-router-dom';
  import NotFoundPage from './NotFoundPage';
  
  function App() {
    return (
      <Routes>
        {/* 其他业务路由配置 */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    );
  }
  

• 若需要让路由请求返回200状态码（而非默认的404）：
  • GCS可配合Cloud CDN，添加自定义错误规则，将404状态码重写为200并返回index.html
  • S3可配合CloudFront的Lambda@Edge函数，在Origin Response阶段修改响应状态码为200

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