Next.js静态JS文件滚动更新时出现404问题求助

核心原因 #

滚动更新阶段Kubernetes集群内新旧版本Pod共存，CloudFront对/_next/static/*路径的请求会随机路由到两类Pod：

• 新版本Pod返回的页面引用带新内容哈希的静态资源，若该资源请求被分发到旧Pod，旧Pod无对应文件导致404
• 旧版本Pod的页面引用旧哈希资源，若旧Pod已进入销毁流程，也会触发404

具体解决方案 #

1. 优化CloudFront静态资源路由与缓存策略 #

• 给/_next/static/*路径设置长TTL缓存（如365天）：Next.js静态资源文件名包含内容哈希，资源更新时文件名自动变更，不会出现缓存脏数据
• 滚动更新前预热CDN：提前将新版本静态资源推送到CloudFront节点，避免请求回源到集群内的旧Pod

2. 调整Kubernetes滚动更新规则 #

• 修改Deployment的滚动更新策略，设置maxUnavailable: 0，确保旧Pod仅在新Pod完全就绪后才被销毁：

  spec:
    strategy:
      rollingUpdate:
        maxSurge: 25%
        maxUnavailable: 0
      type: RollingUpdate
  

• 配置精准的就绪探针，保证新Pod加载完所有静态资源后才接收流量：

  readinessProbe:
    httpGet:
      path: /_next/static/[固定哈希的资源文件名]  # 比如取一个构建后必然存在的静态资源路径
      port: 3000
    initialDelaySeconds: 12
    periodSeconds: 4
  

3. 调整Next.js构建配置 #

• 在next.config.js中设置assetPrefix，让静态资源请求直接指向CloudFront域名，绕过Kubernetes服务路由：

  module.exports = {
    assetPrefix: 'https://你的CloudFront域名',
  };
  

• 启用output: 'standalone'模式构建，确保静态资源完整打包且镜像体积更小：

  module.exports = {
    output: 'standalone',
  };
  

4. 静态资源独立托管 #

• 将构建生成的.next/static目录同步到S3存储桶，配置CloudFront直接从S3读取静态资源，彻底脱离集群Pod的依赖：
  • 构建后执行同步命令：aws s3 sync .next/static/ s3://你的存储桶名/_next/static/
  • 在CloudFront中新增行为，将/_next/static/*路径指向S3源站

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