将Next.js应用部署至AWS Amplify时出现上传超时错误

问题描述 #

• 本地可正常构建启动Next.js应用，通过Bitbucket仓库关联Amplify自动部署，每次推送后卡在「Uploading files」环节，已将构建超时设为2小时，其他环节无异常
• 部署时出现警告：

2025-02-12T11:56:53.406Z [WARNING]: ! Unable to write cache: {"code":"ERR_BAD_REQUEST","message":"Request failed with status code 404"})}

• 构建生成的.next文件夹大小达880MB

当前配置 #

amplify.yml #

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build -- --debug
  artifacts:
    baseDirectory: .next


    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

.gitignore #

# Node artifact files
node_modules/
dist/

# Compiled Java class files
*.class

# Compiled Python bytecode
*.py[cod]

# Log files
*.log

# Package files
*.jar

# Maven
target/
dist/

# JetBrains IDE
.idea/

# Unit test reports
TEST*.xml

# Generated by MacOS
.DS_Store

# Generated by Windows
Thumbs.db

# Applications
*.app
*.exe
*.war

# Large media files
*.mp4
*.tiff
*.avi
*.flv
*.mov
*.wmv

.next

.env.local

问题排查与解决方案 #

1. 优先优化构建产物体积 #

880MB的.next文件夹是导致上传卡住的核心原因，常规Next.js应用构建产物通常在几十MB以内：

• 检查是否有未压缩的大型媒体文件（高清图、视频）被直接打包进构建产物，建议将这类静态资源迁移到AWS S3存储，通过CDN访问，不要包含在.next中
• 启用Next.js静态资源压缩，在next.config.js中配置compression选项，或使用next-compress插件
• 用@next/bundle-analyzer分析打包体积，定位大文件或冗余代码，清理无用依赖、组件

2. 修复缓存写入警告 #

缓存写入404错误可能干扰上传流程，可尝试：

• 暂时禁用缓存，修改amplify.yml的cache配置：

  cache:
    paths: []
  

  部署成功后再重新启用缓存，排查是否为缓存路径配置问题
• 检查Amplify应用的构建角色权限，确保其拥有读写缓存存储的权限

3. 优化上传配置 #

• 缩小上传文件范围，修改amplify.yml的artifacts配置，只上传必要文件：

  artifacts:
    baseDirectory: .next
    files:
      - 'static/**/*'
      - '*.html'
      - '*.json'
      - 'server/**/*' # SSR应用需保留该行
  

• 在Amplify控制台开启增量构建功能，减少每次上传的文件量

4. 其他排查点 #

• 确认Bitbucket仓库推送完整，所有必要文件已提交
• 在Amplify控制台手动触发重新构建，排除自动部署的触发异常
• 查看完整构建日志，定位上传环节的具体错误（可能隐藏在警告之后）

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