🐳Next.js와 Docker를 사용한 빌드 최적화하기

목차

• 개요
• 기존 빌드 방식
• Standalone 빌드 방식

개요

이번 글에서는 Next.js와 Docker를 사용하여 빌드 최적화를 진행한 방법에 대해 설명하겠습니다.

기존 빌드 방식

먼저 기존 방식은 Next.js의 default build 방식을 사용하였습니다. 해당 빌드 방식은 .next 폴더를 생성합니다. 다음과 같이 멀티 스테이지 방식으로 Next.js 애플리케이션을 빌드한 후 production에 필요한 .next, node_modules, package.json, public 을 복사하는 식으로 Docker 이미지를 생성하였습니다.

# 1. 빌드 단계
# 생성할 Docker 이미지의 베이스가 되는 이미지를 지정합니다.
# node - 개발 편의성 및 다양한 도구가 포함된 이미지로, 개발 환경이나 복잡한 빌드 작업에 적합합니다.
# node:alpine - 크기가 작고 가벼운 이미지로, 프로덕션 환경이나 리소스가 제한된 환경에 적합합니다.
FROM node:20-alpine AS build

# 1-1. 작업 디렉토리 설정
# 애플리케이션 파일을 저장하고 실행할 기본 작업 디렉토리를 지정합니다.
# /app 디렉토리가 자동으로 생성되며, 이후의 모든 명령어가 이 디렉토리에서 실행됩니다.
WORKDIR /app

# 1-2. 의존성 파일 복사
COPY package.json package-lock.json ./

# 1-3. 의존성 설치
# 컨테이너 안에서 명령어를 실행하고 이미지를 빌드합니다.
RUN npm install --force

# 1-4. 애플리케이션 코드 복사
# 현재 디렉토리의 모든 파일을 /app 디렉토리로 복사합니다.
COPY . .

**# 1-5. 환경 변수 설정
ARG NEXT_PUBLIC_BACKEND_URL
ARG BACKEND_API_URL
ARG NEXT_PUBLIC_BACKEND_API_URL
ENV NEXT_PUBLIC_BACKEND_URL=${NEXT_PUBLIC_BACKEND_URL}
ENV BACKEND_API_URL=${BACKEND_API_URL}
ENV NEXT_PUBLIC_BACKEND_API_URL=${NEXT_PUBLIC_BACKEND_API_URL}**

# 1-6. 애플리케이션 빌드
RUN npm run build

# 2. 런타임 단계
FROM node:20-alpine

# 2-1. 빌드 결과물과 필요한 파일만 복사
**WORKDIR /app
COPY --from=build /app/.next ./.next
COPY --from=build /app/node_modules ./node_modules
COPY --from=build /app/package.json ./package.json
COPY --from=build /app/public ./public**

# 2-2. 포트 설정
# 컨테이너가 사용하는 포트를 명시적으로 지정하는 명령어로, 호스트와 통신할 포트를 설정합니다.
EXPOSE 3000

# 2-3. 애플리케이션 실행
# 컨테이너가 시작될 때 실행할 기본 명령어를 지정합니다.
# CMD는 Dockerfile에서 한 번만 사용할 수 있습니다.
**CMD [ "npm", "run", "start" ]**

이와 같이 Docker 이미지를 빌드한 결과 크기가 1.2GB로 상당히 컸습니다.

Standalone 빌드 방식

빌드 파일 용량을 줄일 수 있는 방법을 찾아보던 중, 다음과 같이 Next.js 공식 문서에서 빌드 출력물 유형을 결정하는 방식을 확인할 수 있었습니다.

https://nextjs.org/docs/app/api-reference/next-config-js/output)](https://nextjs.org/docs/app/api-reference/next-config-js/output

공식 문서에 따르면 standalone 빌드 방식은 production에 필요한 최소한의 파일과 의존성만 복사함으로써 용량을 상당히 줄일 수 있습니다. 특히 해당 빌드 방식은 Docker로 배포할 때 유용하다고 설명되어 있었습니다. 이는 VSCode에서도 확인할 수 있었습니다.

따라서 빌드 출력물 유형을 standalone 으로 변경한 후 다음과 같이 Dockerfile을 수정한 후 Docker 이미지를 생성하였습니다.

// next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: false,
  **output: 'standalone',**
};

export default nextConfig;

// .dockerignore

# Node.js 환경
node_modules

# Git 관련 파일
.git
.gitignore

# env 파일
.env

# 빌드 결과물
.next

# 테스트 관련 파일
__tests__
.swc
playwright-report
test_results
tests
node_modules

# 1. 빌드 단계
# 생성할 Docker 이미지의 베이스가 되는 이미지를 지정합니다.
# node - 개발 편의성 및 다양한 도구가 포함된 이미지로, 개발 환경이나 복잡한 빌드 작업에 적합합니다.
# node:alpine - 크기가 작고 가벼운 이미지로, 프로덕션 환경이나 리소스가 제한된 환경에 적합합니다.
FROM node:20-alpine AS build

# 1-1. 작업 디렉토리 설정
# 애플리케이션 파일을 저장하고 실행할 기본 작업 디렉토리를 지정합니다.
# /app 디렉토리가 자동으로 생성되며, 이후의 모든 명령어가 이 디렉토리에서 실행됩니다.
WORKDIR /app

# 1-2. 의존성 파일 복사
COPY package.json package-lock.json ./

# 1-3. 의존성 설치
# 컨테이너 안에서 명령어를 실행하고 이미지를 빌드합니다.
RUN npm install --force

# 1-4. 애플리케이션 코드 복사
# 현재 디렉토리의 모든 파일을 /app 디렉토리로 복사합니다.
COPY . .

**# 1-5. client-side 환경 변수 설정
ARG ARG_NEXT_PUBLIC_BACKEND_URL
ARG ARG_NEXT_PUBLIC_BACKEND_API_URL
ENV NEXT_PUBLIC_BACKEND_URL=${ARG_NEXT_PUBLIC_BACKEND_URL}
ENV NEXT_PUBLIC_BACKEND_API_URL=${ARG_NEXT_PUBLIC_BACKEND_API_URL}**

# 1-6. 애플리케이션 빌드
RUN npm run build

# 2. 런타임 단계
FROM node:20-alpine

# 2-1. 빌드 결과물과 필요한 파일만 복사
**WORKDIR /app
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
COPY --from=build /app/public ./public**

**# 2-2. server-side 환경 변수 설정
ARG ARG_BACKEND_API_URL
ENV BACKEND_API_URL=${ARG_BACKEND_API_URL}**

# 2-3. 포트 설정
# 컨테이너가 사용하는 포트를 명시적으로 지정하는 명령어로, 호스트와 통신할 포트를 설정합니다.
EXPOSE 3000

# 2-4. 애플리케이션 실행
# 컨테이너가 시작될 때 실행할 기본 명령어를 지정합니다.
# CMD는 Dockerfile에서 한 번만 사용할 수 있습니다.
**CMD [ "node", "server.js" ]**

그 결과 Docker 이미지 크기를 202 MB 로 상당히 줄일 수 있었습니다.