AWS Amplify部署NextJS应用遇构建输出超出大小限制错误

问题详情 #

用AWS Amplify托管NextJS应用已有6个月，此前一切正常，昨晚起构建时触发以下错误：

!!! CustomerError: The size of the build output (730117307) exceeds the max allowed size of230686720 bytes. Please reduce the size ofyour build output and try again.

仅修改了文本内容，无代码或依赖的大幅改动，甚至重新构建之前成功过的版本也失败。当前环境：NextJS 14.2.3、NodeJS 20.13.0。

关键日志片段 #

## Completed Frontend Build
2024-05-19T12:14:57.541Z [INFO]: ## Build completed successfully
2024-05-19T12:16:26.140Z [ERROR]: !!! CustomerError: The size of the build output (730117307) exceeds the max allowed size of230686720 bytes. Please reduce the size ofyour build output and try again.

当前Amplify.yml配置 #

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - rm yarn.lock
        - rm -rf .next
        - rm -rf node_modules
        - yarn install
    build:
      commands:
        - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
        - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
        - echo "APPLE_CLIENT_ID=$APPLE_CLIENT_ID" >> .env
        - echo "APPLE_SECRET=$APPLE_SECRET" >> .env
        - echo "GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID" >> .env
        - echo "GOOGLE_CLIENT_SECRET_ID=$GOOGLE_CLIENT_SECRET_ID" >> .env
        - yarn run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

修复方案 #

1. 清除Amplify全局缓存 #

本地清理.next和node_modules没用的话，Amplify的远程缓存可能已经污染。操作步骤：

• 打开AWS Amplify控制台，进入你的应用
• 切换到「构建」标签页，点击右上角的「清除缓存」
• 重新触发一次构建

2. 排查NextJS构建产物冗余 #

先本地执行yarn build，查看.next文件夹大小，如果本地也超过220MB，按以下方向排查：

• 静态资源过大：检查public目录是否有未压缩的高清图、视频等大文件，用图片压缩工具处理，或者把大文件移到S3托管，前端通过URL引用。
• 依赖包冗余：用bundle-analyzer分析构建产物：
  1. 安装依赖：yarn add @next/bundle-analyzer --dev
  2. 修改next.config.js：

     const withBundleAnalyzer = require('@next/bundle-analyzer')({
       enabled: process.env.ANALYZE === 'true',
     })
     module.exports = withBundleAnalyzer({})
     

  3. 执行ANALYZE=true yarn build，打开生成的HTML报告，找出占用空间最大的模块，移除不需要的依赖或替换为轻量替代包。

3. 优化Amplify构建产物上传规则 #

当前配置会上传.next下所有文件，很多文件其实不需要部署，修改amplify.yml的artifacts部分：

artifacts:
  baseDirectory: .next
  files:
    - '**/*'
  exclude:
    - 'cache/**/*'          # 排除构建缓存文件
    - 'server/**/*'         # 如果是静态导出/Edge Runtime模式，server目录可排除
    - 'static/chunks/**/*.map' # 生产环境可排除source map（如需调试可保留）

注意：根据你的部署模式（Serverless/Edge/Static）调整排除项，确保不影响应用功能。

4. 锁定构建环境版本 #

Amplify的默认Node环境可能隐性更新，导致构建产物异常。在preBuild阶段添加版本锁定命令：

preBuild:
  commands:
    - nvm use 20.13.0
    - rm yarn.lock
    - rm -rf .next
    - rm -rf node_modules
    - yarn install

也可以临时降级NextJS到之前稳定的版本（比如14.2.2），验证是否是新版本引入的问题。

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