部署在AWS S3的Angular应用通过Route 53调用ECS任务失败如何解决？

方案可行性结论 #

你期望使用Route53域名替代固定IP的方案逻辑是可行的，当前无法访问的核心原因是域名解析可见性不匹配。

问题根因 #

部署在S3上的Angular应用是客户端代码，会下载到用户本地浏览器执行，所有服务端API请求的域名解析逻辑发生在用户的公网网络环境：

• 如果你配置的test-service.test是Route53私有托管区的记录，仅AWS对应VPC内部的资源可以解析，公网用户的浏览器无法识别该域名，自然请求失败
• ECS任务的公网IP属于公网可路由地址，所以直接填写IP可以正常访问

修复当前方案的操作步骤 #

如果要继续使用自定义域名的方案，按以下配置调整即可：

1. 注册一个公网可解析的自有域名，在Route53中创建公有托管区关联该域名
2. 给ECS服务前置部署公网应用型负载均衡器（ALB），将ALB的目标组关联到你的ECS服务，ALB安全组放开8080端口的对应访问规则
3. 在Route53公有托管区中添加A类型别名记录，指向你部署的ALB地址，不需要绑定具体ECS任务的IP，ECS任务重启/扩缩容都不需要修改配置
4. 确认Spring Boot应用的CORS配置允许你的Angular站点域名的跨域请求

调整后你期望的代码可以正常运行：

find() {
    return this.http.get('http://test-service.test:8080' + '/all');
}

替代解决方案 #

如果不想额外维护域名，可以选择以下更简单的方案：

方案1：CloudFront路径转发（推荐） #

给S3静态站配置CloudFront分发，新增行为规则：

• 匹配路径/api/*的请求，源站设置为ECS前置的ALB地址
• Angular代码中直接使用相对路径发起请求，不需要填写任何固定域名/IP，天然解决跨域问题

  find() {
      return this.http.get('/api/all');
  }
  

方案2：API Gateway代理 #

部署AWS API Gateway公网端点，将所有API请求路径集成转发到你的ECS服务，Angular代码直接调用API Gateway的公网端点即可，不需要自己维护负载均衡和域名。

注意事项 #

无论选择哪种方案，都需要确保ECS任务的安全组允许对应上游（ALB/API Gateway）的8080端口入站访问，避免网络不通。

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