nextJS의 도커 이미지 크기 줄이기

나는 nextJS 프레임워크를 사용하여 React에서 개발된 레거시 프로젝트에서 작업할 기회를 가졌습니다. 저는 도커 컨테이너를 구축하고 클러스터에 배포하는 일을 담당하고 있습니다. Dockerfile을 보고 만들다보니 이미지 크기가 엄청나더군요.




레거시 Dockerfile은 다음과 같습니다.

FROM node:16

WORKDIR /app
COPY . .
RUN yarn install --frozen-lockfile
CMD ["yarn","start"]

첫 번째 문제가 발생했습니다. Dockerfile에서.

첫 번째 솔루션

도커 이미지 크기를 줄이기 위해 다단계 빌드를 사용하려고 합니다.

FROM node:16 AS dependency

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

FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=dependency /app/node_modules ./node_modules
COPY . .
RUN env
RUN yarn build

CMD [ "yarn","start" ]

그러나 이미지의 크기는 여전히 만족스럽지 않습니다.

초

도커 이미지를 사용하여 nextjs 애플리케이션을 빌드하고 배포하는 방법을 조사하려고 노력했고 next.js에서 솔루션을 찾았습니다Github.

독립 실행형 출력 사용
next.config.js 편집

module.exports = {
  // ... rest of the configuration.
  output: 'standalone',
}

예제에 따라 Dockerfile을 편집합니다.

FROM node:16-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
  else echo "Lockfile not found." && exit 1; \
  fi

FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN yarn build

FROM node:16-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]

불필요한 파일을 무시합니다. 이를 무시하기 위해 .dockerignore를 추가했습니다.

node_modules
build
.dockerignore
Dockerfile
Dockerfile.*

결과

이미지 크기가 1GB 이상에서 약 1xxMB로 줄어듭니다.

캐시 사용

이 프로젝트에서는 실을 패키지 종속성으로 사용합니다. 우리가 실행하면 Dockerfile에서

yarn --frozen-lockfile

매우 오랜 시간이 걸리므로 패키지 종속성에서 캐시를 사용하도록 Dockerfile을 변경했습니다.

FROM node:16-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY yarn.lock* package-lock.json* pnpm-lock.yaml* ./
# RUN \
#   if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
#   elif [ -f package-lock.json ]; then npm ci; \
#   elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
#   else echo "Lockfile not found." && exit 1; \
#   fi
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --frozen-lockfile

...