基于ALB与私有S3的React SPA路由处理最佳架构方案咨询

核心问题分析 #

当用户直接访问React SPA的嵌套路由（如/dashboard）时，ALB会将该请求转发至S3，S3会尝试查找名为dashboard的对象，因不存在该对象返回404 Not Found。此时React Router的客户端路由逻辑尚未加载，无法接管路由处理，导致错误。

最佳架构方案：ALB路径规则+S3对象访问 #

利用ALB的路由规则区分静态资源与路由请求，将所有非静态资源的请求重定向至SPA的index.html，由React Router在客户端处理路由。具体配置步骤如下：

1. 配置ALB监听器规则 #

在ALB的HTTP/HTTPS监听器中添加两条核心规则（按优先级排序）：

• 规则1：转发静态资源请求
  • 匹配条件：请求路径后缀为*.js、*.css、*.png、*.jpg、*.svg、*.ico、*.json等静态资源格式
  • 动作：直接转发至S3目标组，保持原请求路径不变
• 规则2：转发路由请求至index.html
  • 匹配条件：所有未被规则1匹配的请求（默认规则）
  • 动作：设置**路径转换（Path Transformation）**为/index.html，然后转发至S3目标组

2. 配置S3目标组与VPC Endpoint #

• 确保ALB的S3目标组配置正确，通过S3 VPC Endpoint访问私有存储桶，目标组的协议选择HTTP（对应S3的REST API端口）
• 配置S3桶策略，仅允许来自ALB所在VPC的VPC Endpoint的访问请求，确保桶的私有性

3. React项目打包配置 #

• 确保React项目打包时，package.json中的homepage字段设置为./（或对应ALB的根路径），避免静态资源路径错误
• 使用React Router的BrowserRouter而非HashRouter，保证路由格式符合需求

方案优势 #

• 完全符合架构约束：保留ALB公网入口、S3私有性、VPC Endpoint访问路径，无需引入CloudFront
• 路由处理逻辑统一：所有客户端路由请求均由React Router处理，避免S3返回404错误
• 性能无额外损耗：ALB路径转换为原生功能，无需额外计算资源

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