如何将AWS CloudFront流量指向同域名下的AWS Fargate API？

核心结论 #

不需要购买新域名，直接用现有CloudFront域名d109andj8k4fg5.cloudfront.net即可实现需求。通过给CloudFront添加自定义行为（Custom Behavior），匹配/api/*路径并转发到你的ALB，就能实现同一个域名下前端页面和API接口的分离访问。

具体配置步骤 #

1. 添加ALB作为CloudFront源 #

• 登录AWS控制台，进入CloudFront服务，找到对应前端分发（域名d109andj8k4fg5.cloudfront.net）
• 切换到Origins标签页，点击「Create origin」：
  • Origin domain：选择你的ALB域名test-load-balancer-example.eu-east-2.elb.amazonaws.com
  • Origin path：留空（API路径由后续行为规则匹配）
  • Origin name：自定义命名（如ALB-API-Origin）
  • Origin protocol policy：开发环境选HTTP only，生产环境需先给ALB配置HTTPS，再选HTTPS only
  • 完成源创建

2. 配置/api/*路径的自定义行为 #

• 切换到Behaviors标签页，点击「Create behavior」：
  • Path pattern：填写/api/*（匹配所有以/api开头的请求）
  • Origin or origin group：选择刚创建的ALB-API-Origin
  • Viewer protocol policy：开发环境可选HTTP and HTTPS，生产环境强制Redirect HTTP to HTTPS
  • Cache policy：选择Managed-CachingDisabled（API请求多为动态内容，无需缓存）
  • Origin request policy：选择Managed-AllViewerExceptHostHeader（确保请求头如Authorization、Content-Type能正确转发到ALB）
  • 保存行为配置

3. 验证配置生效 #

CloudFront配置更新通常需要5-15分钟同步，等待后测试：

• 访问https://d109andj8k4fg5.cloudfront.net/：正常加载React前端
• 访问https://d109andj8k4fg5.cloudfront.net/api/data：返回Fargate API的响应

开发与生产环境差异配置 #

开发环境 #

• 可保留ALB的HTTP访问，快速完成测试
• 直接使用CloudFront默认域名，无需额外配置自定义域名
• 禁用API缓存，方便调试接口变更

生产环境 #

1. ALB HTTPS配置：
   • 在ALB所在区域eu-east-2的ACM申请SSL证书，绑定到ALB的443端口监听器，确保API仅通过HTTPS提供服务
2. CloudFront安全优化：
   • 强制Viewer协议为HTTPS，将所有HTTP请求重定向到HTTPS
   • （可选）配置自定义域名：购买域名后通过Route 53解析到CloudFront，同时在us-east-1区域的ACM申请对应域名的SSL证书（CloudFront仅支持该区域的证书）
   • 配置WAF规则，防护SQL注入、XSS等常见攻击
3. 前端适配：
   • React应用的API请求baseURL改为/api，无需硬编码完整域名，避免跨域问题

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