Next.js 15部署AWS Amplify后Public目录图片404问题咨询

一、生产环境直接从应用提供Public目录文件 #

1. 处理Standalone输出的资源复制（若启用） #

如果你的Next.js配置了output: 'standalone'，默认不会自动将public目录复制到输出目录，需要手动补充复制步骤：

• 在Next.js应用（如apps/web）的package.json中修改build脚本：

"scripts": {
  "build": "next build && cp -r public .next/standalone/public"
}

跨平台环境可使用copyfiles工具（先执行npm install copyfiles --save-dev）：

"scripts": {
  "build": "next build && copyfiles -u 1 public/**/* .next/standalone/public"
}

2. 修正AWS Amplify构建规范 #

确保Amplify正确识别Next.js的输出目录，在项目根目录创建或修改amplify.yml：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install # 替换为pnpm install/yarn install，匹配你的包管理器
    build:
      commands:
        - turbo build # 执行Turborepo构建命令
  artifacts:
    baseDirectory: apps/web/.next/standalone # 替换为你的Next.js应用实际路径
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

3. 清理错误的assetPrefix配置 #

若之前为CDN设置过assetPrefix，在next.config.ts中移除或仅在CDN模式下启用：

import { defineNextConfig } from 'next/config';

const isCdnEnabled = process.env.USE_CDN === 'true';

export default defineNextConfig({
  assetPrefix: isCdnEnabled ? 'https://your-cloudfront-domain' : undefined,
  // 其他配置项
});

直接从应用提供资源时，确保isCdnEnabled为false。

二、构建时自动将Public文件上传至S3 #

1. 配置Amplify的S3访问权限 #

• 在AWS Amplify控制台进入目标应用的Settings > Service role，确保该IAM角色拥有S3的PutObject、ListBucket、DeleteObject权限；
• 不推荐的备选方案：在Amplify环境变量中添加拥有S3权限的IAM用户的AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY。

2. 添加构建后同步脚本 #

在Next.js应用的package.json中添加postbuild脚本，用AWS CLI同步public目录到S3：

"scripts": {
  "build": "next build",
  "postbuild": "aws s3 sync public/ s3://your-s3-bucket-name/ --delete --content-type-mapping 'woff2=font/woff2' --content-type-mapping 'woff=font/woff' --content-type-mapping 'ttf=font/ttf'"
}

• --delete：删除S3中本地已不存在的文件，保持资源同步；
• --content-type-mapping：指定字体等资源的正确MIME类型，避免加载失败。

3. 配置Next.js的assetPrefix #

在next.config.ts中设置assetPrefix指向CloudFront域名，确保所有静态资源请求导向CDN：

export default defineNextConfig({
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://your-cloudfront-domain' : undefined,
  // 其他配置项
});

4. 确保Turborepo执行postbuild步骤 #

在项目根目录的turbo.json中添加postbuild流水线配置：

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "postbuild": {
      "dependsOn": ["build"],
      "outputs": []
    }
  }
}

然后在Amplify的构建命令中执行turbo build postbuild，确保同步脚本被触发。

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