如何从AWS VPC内私有子网的React应用通过ALB访问私有子网API？

1. React应用请求API的URL选择 #

你这里的核心误解是React前端运行在用户的浏览器中，而非部署它的EC2实例上。浏览器发起的请求是从用户的本地网络发出的，根本不在你的VPC私有子网范围内，所以直接用API的私有IPhttp://$api-private-ip/api/必然失败——私有IP仅VPC内部可见，外部网络（包括用户浏览器）无法访问。

如果要让浏览器能发起请求，你有两个方向的URL选择：

• 给Flask API配置公网可访问的入口（比如绑定弹性IP、配置外部ALB），使用公网IP或ALB的域名作为API请求URL，比如https://api.yourdomain.com/api/。
• 利用React应用的ALB做反向代理：在ALB上配置路径规则，将/api/*的请求转发到Flask API的私有IP/端口，此时React应用可以用相对路径/api/或者ALB的域名+路径https://web.yourdomain.com/api/发起请求。

2. 通过ALB或其他机制路由请求的方案 #

完全可以，推荐两种主流方案：

方案一：给Flask API配置内部/外部ALB #

• 内部ALB：如果不想让API直接暴露给公网，可以创建内部ALB挂载Flask API的EC2实例，然后给React应用的EC2安全组开放访问内部ALB的权限。但注意，这种情况下依然需要通过React的ALB做反向代理，因为浏览器无法直接访问VPC内部ALB。
• 外部ALB：创建面向公网的ALB，绑定Flask API的EC2，同时配置安全组仅允许React应用的ALB安全组或特定IP段访问，避免API被任意公网请求访问。此时React可以直接用外部ALB的域名作为API地址。

方案二：使用AWS API Gateway #

将Flask API注册到API Gateway，通过API Gateway的公网域名暴露API接口，同时配置VPC链路让API Gateway能访问私有子网中的Flask实例。这种方式更适合微服务架构，还能提供认证、限流、监控等附加能力。

方案三：React ALB反向代理 #

在你的Web应用ALB中添加一条路由规则：匹配路径/api/*，转发目标组设置为Flask API的EC2实例（或其内部ALB）。这样用户浏览器请求https://web.yourdomain.com/api/时，ALB会把请求转发到私有子网内的Flask API，浏览器无需直接访问API的私有IP。

3. 架构最佳实践与安全通信建议 #

当前设计存在几个不符合最佳实践的点，优化建议如下：

• 前端部署方式：不要用EC2部署React静态应用，改用S3存储静态文件+CloudFront分发，这是AWS托管前端的标准方案，更稳定、成本更低且无需维护EC2实例。CloudFront可以配置自定义域名和HTTPS，还能缓存静态资源提升访问速度。
• API访问控制：
  • 永远不要直接给Flask API的EC2绑定弹性IP暴露公网，必须通过ALB或API Gateway做入口层，配合安全组严格控制访问来源：比如API的安全组只允许ALB/API Gateway的安全组访问，拒绝其他所有流量。
  • 启用HTTPS加密：用AWS Certificate Manager（ACM）申请免费SSL证书，绑定到ALB或CloudFront，确保前端与API、用户与前端的通信都是加密的，避免明文传输数据。
• 私有子网资源访问：Bastion主机用于管理私有EC2是合理的，但可以考虑改用AWS Systems Manager Session Manager替代SSH登录Bastion，无需开放22端口，安全性更高。

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