如何通过Cloudfront实现Amplify React与EB Express同域名接口调用

首先可以明确：用CloudFront做多源路径分发是完全正确的思路，这也是AWS上同域名同时服务静态前端和动态接口的标准实现方案。结合你当前的场景，有两种可落地的方案，操作难度从低到高如下：

方案一：使用Amplify内置重写规则（推荐，无需手动操作CloudFront） #

你不需要自行创建CloudFront，Amplify本身已经提供了路径重定向到外部源的能力，全程在Amplify控制台操作即可：

• 进入Amplify对应应用的控制台，打开左侧菜单栏的「重写和重定向」配置页
• 点击「添加规则」，按以下参数填写：
  • 源地址：/api/<*>
  • 目标地址：http://app-name.region.elasticbeanstalk.com/api/<*>
  • 类型：选择200（重写）（注意不要选301/302重定向，否则会触发跨域问题）
• 拖拽这条新建的规则到所有规则的最顶部，保证优先级最高，保存配置即可。
• 无需修改现有DNS解析，原有mydomain.com的指向保持不变即可。

方案二：自定义CloudFront分发（适合需要更精细化配置的场景） #

如果你后续需要更多缓存、安全相关的自定义配置，可以自行创建全新的CloudFront分发，统一接管前端和后端的流量：

• 准备两个源站点信息：
  • 前端源：Amplify分配的默认应用域名（格式为xxxx.amplifyapp.com，不要填写你自定义的mydomain.com）
  • 后端源：你的Elastic Beanstalk域名，提前为EB配置HTTPS访问能力
• 创建新的CloudFront分发：
  • 默认行为（匹配路径*）绑定前端源，缓存策略选择CachingOptimized，开启Host头转发，保证Amplify可以正常识别请求
  • 新增路径行为，匹配规则填/api/*，绑定后端源，缓存策略选择CachingDisabled（动态接口无需缓存），允许所有你需要的HTTP方法（GET/POST/PUT/DELETE等），配置转发所有查询字符串、请求头、Cookie，保证后端可以正常拿到请求参数
• 将你的mydomain.com绑定到新建的CloudFront分发，同时绑定us-east-1区域签发的对应域名ACM证书，最后把域名的DNS解析从原来的Amplify默认CloudFront地址修改为你新建的CloudFront地址即可。

通用注意事项 #

• 你的Express后端需要配置CORS规则，允许https://mydomain.com的跨域请求，示例代码如下：

const cors = require('cors');
app.use(cors({
  origin: 'https://mydomain.com',
  credentials: true // 如果需要携带Cookie则开启
}));

• 如果使用方案二，可以配置EB的安全组仅允许CloudFront的IP段访问，避免EB原生域名被直接调用。

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