무슨 Next.js 도커 이미지가 1GB야😮 | 75% 이미지 경량화 시키기 | standalone 설정

최근에 간단한 프로젝트를 진행하면서 페이지가 하나인 NextJS 서버를 배포하게 되었다. 

NextJS 서버 이외에도 ExpressJS 서버와 DB서버도 배포해야했으므로 

도커 허브에 이미지를 업로드한 후 원격서버에서 풀 받아서 docker-compose를 실행시키기로 했다. 

 

근데 push가 너무 느렸다! 한시간정도? 

그래서 확인해보니 NextJS의 이미지 크기가 무려 1.08GB였다. 

 

멀티스테이징 방식으로 이미지를 생성하면 크기가 좀 줄어들겠지 했는데

여전히 1GB였다. 

그래서 NextJS 이미지 경량화에 대해 찾아본 후 standalone라는 빌드 옵션을 이용하여 

이미지를 경량화하는 방법을 알게 되었다. 

 

그래서 이번 포스팅에서는 이 방법을 적용하는 방법에 대해 정리해보려 한다. 

---

standalone 이해하기

standalone이란 최소한의 파일만 포함시켜 단독으로 실행가능한 프로그램을 만드는 방식이다. 

standalone 방식을 사용하면 node.js 서버 위에서 즉시 실행가능한 프로그램을 빌드할 수 있다. 

 

next.config.js Options: output | Next.js

 

---

standalone 적용하기

standalone 적용 프로세스

1. output 타입을 standalone으로 설정 후 빌드

2. .next/standalone 폴더 복사

3. "node server.js" 명령어로 실행

 

* 이때 public 폴더와 static 폴더는 복사되지 않으므로 별도로 복사해야한다. 

---

output 타입 설정

next.config.ts의 nextConfig에 아래와같이 output값을 지정한다. 

const nextConfig = {
    ... ,
    output: "standalone",
};

export default nextConfig;

---

Dockerfile 작성

빌드 후 생성된 파일들을 작업 디렉터리에 복사하여 node server.js 명령어로 어플리케이션을 실행하는 도커파일을 작성한다. 

# 빌드 단계
FROM node:18-slim AS builder

# 작업 디렉터리 설정
WORKDIR /app

# package.json 및 package-lock.json 복사
COPY package*.json ./

# 의존성 설치
RUN npm install

# 앱 소스 전체를 복사
COPY . .

RUN npm run build

# 실행 단계
FROM node:18-slim

# 작업 디렉터리 설정
WORKDIR /app

# ⭐빌드 단계에서 생성된 필요한 파일들만 복사
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

# 애플리케이션이 사용할 포트
EXPOSE 80

# ⭐서버 시작 명령어
CMD ["node", "server.js"]

---

결과

standalone 방식을 적용하여 빌드한 이미지의 크기는 약 250MB로 

standalone 방식을 적용하기 전보다 이미지 크기가 75% 줄어든 것을 확인할 수 있다. 

 

 

앞으로 도커를 통해 nextjs 서버를 배포해야하는 경우

이미지 경량화를 위해 standalone을 사용해야할 것이다.