如何将AWS Amplify前端与EC2实例连通并解决SSL协议报错问题

一、修正负载均衡监听器配置 #

你当前的监听器配置存在问题：绝大多数通过Elastic Beanstalk部署的Express服务，默认是用HTTP协议监听3000端口，没有在EC2实例层面配置SSL证书，因此不需要让负载均衡器和实例之间走HTTPS协议。
将监听器配置修改为如下即可：

修改后SSL证书验证会在负载均衡层终止，负载均衡到EC2实例的内部通信走普通HTTP即可，既降低性能损耗，也避免实例层面的SSL配置问题。

二、配置API访问路径与前端请求 #

1. 新增API域名解析：在Route53你已托管的域名下，新增一条A类型的别名记录，名称可设为api.你的主域名.com，别名目标选择你当前使用的Classic Load Balancer资源。
2. 确认证书绑定：你在ACM申请的证书必须包含上述api.你的主域名.com，且证书已正常签发，同时已绑定到负载均衡器的443 HTTPS监听器上。
3. 修改前端API基地址：把React项目中所有API请求的基地址，从之前的EC2公网地址改为https://api.你的主域名.com，不要加端口号（HTTPS默认用443端口）。如果使用环境变量管理地址，可以直接在Amplify控制台的项目环境变量中配置REACT_APP_API_BASE_URL为上述地址，重新触发一次Amplify构建部署即可生效。

三、配套检查验证 #

• 负载均衡器安全组入站规则需开放443端口的公网访问权限
• EC2实例的安全组入站规则需开放3000端口，源地址填写负载均衡器的安全组ID即可，不要直接将3000端口开放到公网
• 本地先直接调用https://api.你的主域名.com/测试接口验证接口返回正常，再测试前端调用
• 确认Express的CORS配置中已允许你的Amplify前端域名作为合法请求源

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