通过子域名与IP访问Next.js平台时表现异常问题排查

• 检查CloudFront缓存策略

  • 确认缓存键是否包含Host请求头：IP和子域名的Host不同，如果缓存键未包含Host，CloudFront会将不同Host的请求视为相同缓存条目，返回错误资源。在CloudFront控制台的「缓存策略」中查看配置，确保Host被纳入缓存键。
  • 手动触发缓存失效：执行aws cloudfront create-invalidation --distribution-id 你的分发ID --paths "/*"，清除现有缓存后重新测试。

• 验证CloudFront源站配置

  • 检查源站的Host头传递：在CloudFront的「源」设置中，确认是否为源站添加了自定义Host头，或者是否开启了「转发所有请求头」（按需）。如果Next.js应用依赖Host头解析资源路径，错误的Host会导致返回不匹配的资源。
  • 确认源域名和端口配置正确：确保CloudFront指向的是EC2的正确IP或内部域名，源协议策略（HTTP/HTTPS）与EC2上Next.js服务的监听协议一致。

• 排查Next.js资源处理逻辑

  • 检查静态资源路径：如果是public目录下的图片，确认构建后的文件名是否带有哈希（Next.js默认行为），若动态加载图片（比如从数据库获取路径），确保路径是绝对路径或与Host无关的相对路径。
  • 查看EC2上的Next.js日志：对比IP访问和子域名访问时的请求URL、Host头，确认请求的资源路径是否一致，排查是否存在路径重写或解析错误。

• 测试绕过CloudFront的直接访问

  • 修改本地hosts文件，将子域名映射到EC2的IP，直接通过子域名访问（若源站配置了HTTPS则用HTTPS）。如果此时图片正常，说明问题在CloudFront配置；若仍异常，说明Next.js应用对Host头的处理有问题，需调整next.config.js中的basePath或assetPrefix配置，确保资源路径与访问域名匹配。

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