AWS同域名下如何配置CloudFront路由S3前端与EC2后端请求

整体选型逻辑 #

该场景的标准适配方案是 CloudFront + Route53 + 应用负载均衡(ALB) + S3 + EC2，完全可以覆盖你的需求，不需要额外引入其他服务。

分步配置流程 #

1. 后端EC2侧配置 #

• 为EC2（单实例或多实例集群均可）创建应用负载均衡(ALB)，将EC2实例挂载到ALB的目标组，ALB监听器开放80/443端口，同时在AWS证书管理器(ACM)申请覆盖example.com的SSL证书绑定到ALB的443监听器
• 不需要给EC2或ALB单独绑定公网域名，后续直接作为CloudFront的源站使用即可

2. 前端S3侧配置 #

• 开启S3的静态网站托管能力，推荐通过CloudFront的源访问控制(OAC)配置S3的访问权限，禁止S3公开访问，仅允许CloudFront读取存储桶内的静态资源
• 如果React应用使用了BrowserRouter前端路由，后续需要在CloudFront配置错误页规则：将404、403错误重定向到index.html，返回200状态码，避免前端路由刷新时出现404问题

3. CloudFront核心路由配置 #

你的路径分流规则完全可以通过CloudFront的多源站+缓存行为能力实现，注意缓存行为的优先级越高，越先被匹配：

• 首先添加2个源站：
  • 源站1：前端S3存储桶，命名为s3-react-origin
  • 源站2：后端ALB，命名为alb-api-origin
• 配置2条缓存行为：
  1. 优先级设为最高的缓存行为：路径模式填写/api/*，源站选择alb-api-origin，动态接口建议关闭缓存（缓存TTL设为0），同时放开POST/PUT/DELETE等业务需要的HTTP请求方法
  2. 优先级次高的默认缓存行为：路径模式为默认的*，源站选择s3-react-origin，按业务需求配置静态资源缓存规则（JS/CSS/图片等静态资源可设置较长缓存时间，html文件建议设置短缓存或协商缓存）
• 为CloudFront分发配置ACM SSL证书（必须选择us-east-1区域的证书，CloudFront仅支持该区域的ACM证书），CNAME配置中添加你的业务域名example.com

4. Route53域名解析配置 #

• 进入Route53中example.com的托管区域，添加一条A记录（如需支持IPv6可同时添加AAAA记录），记录类型选择「别名」，指向你刚创建的CloudFront分发域名即可
• 不需要再为S3或ALB单独配置解析记录，所有公网流量统一经过CloudFront分发

配置完成后等待CloudFront分发生效（通常需要10~15分钟）即可验证规则：访问example.com下除/api/*以外的路径都会返回React应用内容，访问/api/*前缀的路径会自动转发到EC2的后端服务。

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