NextJS部署ECR/ECS时Docker容器体积过大问题求助

背景 #

我有一个轻量Next.js博客应用，以静态形式展示博客列表及详情，部署在ECS（镜像存储于ECR）。初始Docker镜像体积高达1.4GB，对比Angular应用的23MB镜像、NestJS API的185MB镜像，差距明显。我已更新Dockerfile将体积降至250MB，现寻求进一步的优化建议。

初始Dockerfile #

FROM node:20-alpine as builder

WORKDIR /app

COPY package.json yarn.lock ./

RUN yarn install --frozen-lockfile

COPY .env.production .env
COPY . .

RUN yarn build

FROM node:20-alpine as runner

WORKDIR /app

COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/yarn.lock ./yarn.lock
COPY --from=builder /app/.env.production ./.env.production
COPY --from=builder /app/next.config.js ./
RUN yarn install --production

EXPOSE 3000

CMD ["yarn", "start"]

更新后的Dockerfile #

FROM node:20-alpine AS deps
WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
COPY .env.production .env

ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/next.config.js ./


EXPOSE 3000

ENV PORT 3000

CMD ["yarn", "start"]

进一步优化建议 #

1. 启用Next.js静态导出模式 #

由于你的应用是纯静态展示场景，完全可以使用Next.js的静态导出功能，生成纯静态HTML/CSS/JS文件，无需Node.js运行时。改用Nginx这类轻量基础镜像，体积可压缩至几十MB级别。

• 修改next.config.js添加静态导出配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 其他现有配置
}

module.exports = nextConfig

• 调整Dockerfile使用Nginx镜像：

FROM node:20-alpine AS builder
WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

COPY .env.production .env
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1
RUN yarn build

FROM nginx:alpine
COPY --from=builder /app/out /usr/share/nginx/html
# 可自定义nginx配置文件优化静态资源服务
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 裁剪生产依赖，仅复制必要文件 #

当前runner阶段复制了完整的node_modules，但Next.js生产运行不需要所有依赖。可以拆分依赖安装步骤，单独安装生产依赖：

FROM node:20-alpine AS deps
WORKDIR /app

COPY package.json yarn.lock ./
# 仅安装生产依赖
RUN yarn install --frozen-lockfile --production

FROM node:20-alpine AS builder
WORKDIR /app
# 安装完整依赖用于构建
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

COPY . .
COPY .env.production .env

ENV NEXT_TELEMETRY_DISABLED 1
RUN yarn build

FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=deps /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/next.config.js ./

EXPOSE 3000
ENV PORT 3000

CMD ["yarn", "start"]

3. 使用Next.js独立构建模式 #

Next.js 12+支持独立构建，生成最小化的运行时文件，减少需要复制的内容：

• 修改next.config.js启用独立构建：

const nextConfig = {
  output: 'standalone',
  // 其他现有配置
}

• 调整Dockerfile的runner阶段：

FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
ENV PORT 3000

CMD ["node", "server.js"]

4. 清理构建冗余文件 #

在builder阶段构建完成后，清理不必要的缓存和冗余文件：

# 在builder阶段的RUN yarn build后添加
RUN rm -rf node_modules && yarn cache clean

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