Next.js部署至AWS ECR时next/image加载PNG400报错问题

项目目录结构如下：

|-root
  |-pages
    |-_app.tsx
    |-index.tsx
  |-public
    |-logo.svg
    |-image.png
    |-image2.png
    |-image3.png

本地环境执行yarn build和yarn start启动项目时，所有图片资源均可在对应路径正常访问，相关路径截图如下：

项目通过Vercel平台部署时全功能运行无异常，但采用AWS ECR镜像方式部署时，仅SVG格式文件可正常识别加载，PNG图片全部加载失败，控制台抛出错误：

Failed to load resource: the server responded with a status of 400 ()

直接访问对应图片URL时页面提示"url" parameter is required，报错截图如下：

补充排查信息：部署到AWS环境的构建产物中未生成PNG格式文件，相关截图如下：

问题由两个配置错误叠加导致：

• Docker镜像构建流程存在文件遗漏：编写Dockerfile时未将public目录下的PNG文件完整拷贝到构建镜像、运行镜像的对应工作目录。SVG可正常加载是因为SVG体积满足内联阈值，被直接打包进JS bundle，不需要从静态资源目录读取，因此未受影响。排查时看到构建产物中无PNG文件是该问题的直接证据。
• Next.js默认图片优化配置和自托管环境不匹配：项目默认开启了Next.js图片优化能力，Vercel平台原生提供配套的图片优化服务，因此部署时无异常；自托管部署场景下，当静态PNG资源缺失时，请求会被路由到Next.js自带的/_next/image图片优化接口，接口找不到对应源文件就会直接抛出"url" parameter is required的400错误。

按以下顺序操作即可解决问题：

1. 修正Dockerfile的文件拷贝逻辑，确保public目录下所有静态资源在构建阶段、运行阶段都被正确放入对应工作目录。如果Next.js配置了output: 'standalone'，需要注意standalone模式默认不会将public目录打包进输出产物，必须在运行阶段单独拷贝。参考标准配置片段：

   # 依赖安装与构建阶段
   FROM node:18-alpine AS builder
   WORKDIR /app
   COPY package.json yarn.lock* ./
   RUN yarn install --frozen-lockfile
   # 拷贝全量项目代码，包含根目录下的public文件夹
   COPY . .
   RUN yarn build
   
   # 生产运行阶段
   FROM node:18-alpine AS runner
   WORKDIR /app
   ENV NODE_ENV production
   # 单独拷贝public静态资源目录，切勿遗漏
   COPY --from=builder /app/public ./public
   # 拷贝standalone构建产物与静态资源
   COPY --from=builder /app/.next/standalone ./
   COPY --from=builder /app/.next/static ./.next/static
   
   EXPOSE 3000
   CMD ["node", "server.js"]
   

2. 若业务不需要Next.js的图片自动优化能力，可直接在next.config.js中关闭该能力，避免静态资源请求被路由到图片优化接口触发报错：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     images: {
       unoptimized: true,
     },
   }
   module.exports = nextConfig
   

3. 镜像构建完成后，先本地启动容器，进入容器内执行ls public命令确认所有PNG文件存在，再推送镜像到AWS ECR部署，可提前排查文件遗漏问题。

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