如何通过Route 53配置CNAME记录实现子路径域名指向AWS Amplify应用

首先明确：Route 53的CNAME记录无法直接处理路径映射，它只能映射完整子域名（如my-library.ourdomain.com）到Amplify站点。要实现带路径的URL转发且保持地址栏不变，可采用以下几种可行方案：

方案一：CloudFront + Lambda@Edge（推荐，全AWS生态联动） #

• 创建CloudFront分发，将主源设置为你的Amplify站点域名（比如xxx.amplifyapp.com），额外添加WP-Engine的WooCommerce站点作为备用源
• 在CloudFront中配置缓存行为：将路径/my-library/*指向Amplify源，剩余路径指向WooCommerce站点
• 部署Lambda@Edge函数，在Origin Request阶段修改请求路径：把/my-library/xxx重写为/xxx，确保Amplify能正确解析React路由
• 将Route 53中www.ourdomain.com的A/AAAA记录指向CloudFront分发域名
• 在Amplify控制台的域名管理中，添加www.ourdomain.com为自定义域名，通过AWS Certificate Manager申请覆盖该域名的SSL证书

方案二：WP-Engine侧配置反向代理 #

若不想依赖额外AWS服务，可在WP-Engine端设置反向代理：

• 登录WP-Engine控制台，找到站点的高级设置或nginx配置入口
• 添加反向代理规则，将/my-library开头的请求转发到Amplify站点域名，示例nginx规则：

location /my-library {
    proxy_pass https://xxx.amplifyapp.com;
    proxy_set_header Host xxx.amplifyapp.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

• 在React应用的CORS配置或Amplify控制台跨域设置中，添加www.ourdomain.com为允许的来源
• 给React路由配置basename="/my-library"（以React Router为例），避免路由跳转错误

方案三：Amplify自定义域名+路径重写 #

如果Amplify的路由规则支持，可直接通过平台配置实现：

• 在Amplify控制台域名管理中，添加www.ourdomain.com为自定义域名
• 进入「重写和重定向」设置，添加规则：
  • 源地址：^/my-library/(.*)
  • 目标地址：/$1
  • 类型：200 (Rewrite)
• 将Route 53中www.ourdomain.com的A/AAAA记录指向Amplify提供的解析目标
• 在WP-Engine的WooCommerce站点中，排除/my-library路径，避免WordPress接管该路径请求

通用注意事项 #

• 确保SSL证书覆盖www.ourdomain.com，避免浏览器安全警告
• 测试前清空浏览器缓存，防止旧DNS或缓存影响结果
• 验证React应用的静态资源路径是否适配/my-library前缀，避免资源加载失败

内容的提问来源于stack exchange，提问作者Pedro-Goncal