如何通过AWS VPC中的Application Load Balancer从React App访问私有子网上的API？

Question

请参考下面的VPC设计图。 [1]：https://i.sstatic.net/JpZCLQO2.png

我正在开发一个托管在 AWS 上的 React Web 应用程序，具有以下架构：

React Web 应用程序： 托管在私有子网中的 EC2 实例上，可通过应用程序负载均衡器 (ALB) 以及使用 SSH 通过 Bastion 1 进行访问。 Flask API 服务器： 托管在不同私有子网中的另一个 EC2 实例上，只能使用 SSH 通过 Bastion 2 进行访问。 目标： React 应用程序需要向 Flask API 实例发送 HTTP 请求。

我目前面临一些挑战：

1. 网络配置：当我尝试使用 http://$api-private-ip/api/ 从 React 应用程序请求 API 时，请求失败，因为私有 IP 只能在 VPC 内访问。

2. 验证：当我通过 SSH 连接到 Web 实例并运行curl $api-private-ip/api/ 时，我收到来自 API 服务器的有效响应。但是，当我通过浏览器尝试请求时，请求挂起。

问题：

1. 考虑到两个实例都位于私有子网上，我应该使用什么 URL 从 React 应用程序向 API 发出请求？

2. 有没有办法通过ALB或其他机制来路由请求？

3. 我当前的设计是否符合最佳实践，或者我应该考虑采用替代方法来实现客户端和 API 之间的安全通信？

Answer 1

1. AWS 上的基础设施设置 一个。专有网络配置 创建具有公有子网和私有子网的 VPC。 配置路由表：公共子网应具有到 Internet 网关的路由，而私有子网应通过 NAT 网关进行路由。 b.设置您的 API 在私有子网内的 EC2 实例或 AWS Lambda 等服务上部署您的 API。 确保与您的 API 关联的安全组允许来自 ALB 的入站流量。 c.创建应用程序负载均衡器 在您的 VPC 的公有子网中创建 ALB。 配置 ALB 以将流量路由到托管位于私有子网中的 API 的目标（EC2 实例或 Lambda 函数）。 确保 ALB 的安全组允许侦听器端口上的入站流量。 d.设定目标群体 创建包含您的 API 实例的目标组。 为您的 API 指定运行状况检查设置，以确保负载均衡器仅将流量路由到运行状况良好的实例。
2. 安全考虑 安全组：确保 ALB 的安全组允许必要端口 (HTTP/HTTPS) 上的传入流量，并且 API 的安全组允许来自 ALB 安全组的传入流量。 网络 ACL：确保与您的子网关联的网络 ACL 允许必要的流量。
3. 配置您的 React 应用程序 一个。环境配置 将 ALB URL 存储在 React 应用程序的环境配置中。这通常在 .env 文件或配置文件中完成。 b.进行 API 调用 在您的 React 应用程序中，使用存储的环境变量进行 API 调用。您可以使用 axios 等库或本机 fetch 方法。
4. 测试和监控 测试：确保测试您的 React 应用程序，以验证它是否可以通过 ALB 与 API 成功通信。 监控：使用 AWS CloudWatch 监控应用程序负载均衡器和目标的运行状况，以确保流量正确路由。
5. 其他注意事项 CORS：如果您的 React 应用程序托管在与 API 不同的域上，您可能需要在 API 上配置 CORS（跨源资源共享）以允许来自您的 React 应用程序域的流量。 SSL/TLS：对于生产环境，建议通过 ALB 为 API 设置 HTTPS 以加密传输中的数据。 AWS 通过 AWS Certificate Manager (ACM) 提供 SSL 证书选项。 扩展和负载测试：考虑 ALB 背后的实例的容量，并进行负载测试以确保它们处理预期的流量。 通过按所述构建您的 AWS 设置，您的 React 应用程序应该能够通过应用程序负载均衡器安全且高效地访问 API。