如何在AWS Amplify React项目中托管指定JSON文件对接微软API？

方案一：直接利用React项目静态资源 + Amplify部署 #

这是最简便的方案，无需额外配置CloudFront或Route53：

• 在React项目的public目录下创建.well-known子文件夹，将microsoft-identity-association.json放入其中。
• React项目部署到Amplify时，public目录下的文件会被直接托管在域名根路径，且Amplify默认会优先匹配静态文件，而非React Router路由。也就是说，访问mydomain.com/.well-known/microsoft-identity-association.json时，会直接返回该静态文件，不会触发React Router的路径处理。
• 验证方式：本地启动项目后，访问localhost:3000/.well-known/microsoft-identity-association.json，能正常看到文件内容即可，推送代码到Amplify完成部署。

方案二：CloudFront路径转发 + Route53配置（适合已有S3/CloudFront资源的场景） #

如果你坚持用已创建的S3桶和CloudFront分发，可以通过以下步骤整合Amplify和S3资源：

1. 配置CloudFront分发的多Origin与行为规则 #

• 创建新的CloudFront分发（或修改现有分发），添加两个Origin：
  • 默认Origin指向你的Amplify项目域名（格式类似xxx.amplifyapp.com）；
  • 第二个Origin指向存储JSON文件的S3桶，建议使用Origin Access Control（OAC）来确保S3资源的安全访问，避免公开权限。
• 在CloudFront的「行为（Behaviors）」中添加新规则：
  • 路径模式设为/.well-known/microsoft-identity-association.json；
  • 关联到S3的Origin；
  • 缓存策略选择「CachingDisabled」或短TTL缓存（因为该文件极少变动）。
• 将默认行为（路径模式/*）关联到Amplify的Origin，确保除特定JSON路径外，所有请求都转发到Amplify处理React Router路由。

2. 更新Route53域名解析 #

• 将原来指向Amplify的Route53记录（通常是A/AAAA类型的别名记录）修改为指向上述CloudFront分发的域名。
• 这样所有域名请求都会先经过CloudFront，根据路径规则转发到对应的资源（Amplify或S3）。

3. S3桶配置检查 #

• 确保S3桶内的文件路径为.well-known/microsoft-identity-association.json，与CloudFront的路径模式完全匹配；
• 若使用OAC，需在S3桶的权限策略中添加允许CloudFront访问的规则。

方案对比 #

• 方案一：操作简单，无额外资源成本，适合大多数场景；
• 方案二：适合需要独立管理静态资源、或已有CloudFront架构的场景，灵活性更强。

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