Docker을 이용해 NextJs Application 빌드하기

서론

NextJs Framework 기반의 Application을 build하는 방법중 많이 쓰이는 방법은 패키지 매니저를 활용한 빌드입니다. 는 패키지 매니저와 더불어 Docker를 활용하여 빌드 및 이미지화 하는 방법을 포스팅하려 합니다. 본 포스팅에서는 yarn 패키지 매니저를을 활용합니다. 

---

본론

1. Node 버전 확인

nextJs는 react기반의 프레임워크로써 버전에 따라 최소 지원되는 NodeJs버전이 다릅니다. 저는 nextJs 14 버전의 어플리케이션을 빌드할 예정이고 Node.js 버전은 최소 18.17.0 버전을 사용해야하는데 저는 20버전을 활용합니다. package manager로 yarn을 사용하기 때문에 docker hub에서 node 20버전중 yarn이 함께 설치되어있는 apline 버전을 사용하려 합니다.

https://hub.docker.com/layers/library/node/20-alpine/images/sha256-fd261b08aa280adee9ba4ea89afe80a7c248799b01084cde9d418c7429f821f1

 

---

 

2. .env.k8s-dev 파일 생성

본 포스팅은 k8s 클러스터에 NextJs 프로젝트를 배포할 때 필요한 이미지를 만들기 위해 작성하는 것이기 때문에 프로젝트 디렉토리에 .env.k8s-dev 파일을 생성해줘야 합니다. 해당 env 안에는 nextJs에서 사용할 환경변수들을 설정할 수 있습니다.

# .env.k8s-dev
NEXT_PUBLIC_API_MINGYU="https://dev-api.mingyu.co.kr"
NEXT_PUBLIC_API_MINGYU2="https://dev-api.mingyu2.co.kr"
NEXT_PUBLIC_MINGYU_ACCESS_TOKEN_KEY="token"
NEXT_PUBLIC_COOKIE="dev-www.mingyu.co.kr"
NEXT_PUBLIC_CRYPTO_SECRET="secret"

 

저는 도커파일을 작성할 때 보통 Build Stage와 Runtime Stage를 나눠서 작성하는데, 그 이유는 이전 포스팅에 적어놨으니 참고하여주시기 바랍니다.

Docker을 이용해 SpringBoot Application 빌드하기

 

---

 

3. Dockerfile 작성

FROM node:20-alpine AS builder
WORKDIR "/app"
COPY . .
RUN yarn install
RUN yarn add sharp --ignore-engines
COPY .env.k8s-dev .env
RUN yarn build

FROM node:20-alpine AS development
WORKDIR "/app"
ENV NODE_ENV development
COPY .env.k8s-dev .env.development
COPY --from=builder /app/next.config.mjs /app/next.config.mjs
COPY --from=builder /app/public /app/public
COPY --from=builder /app/.next/standalone /app
COPY --from=builder /app/.next/static /app/.next/static

# health check 용으로 추가 설치 및 타임존 설정
RUN apk --no-cache add curl tzdata && \
    cp /usr/share/zoneinfo/Asia/Seoul /etc/localtime && \
    echo "Asia/Seoul" > /etc/timezone && \
    apk del tzdata

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

 

---

 

4. Docker 빌드하기

Docker 명령어를 사용하여 Dockerfile을 기준으로 mingyu-cms 라는 이름의 0.1 버전의 이미지를 생성합니다.

$ docker build -t mingyu-cms:0.1 -f Dockerfile .

빌드가 정상적으로 완료되는것을 확인할 수 있습니다.

 

---

 

5. Docker 이미지 확인하기

docker 명령어를 사용하여 이미지가 잘 생성됬는지 확인합니다. 

$ docker images

아래와 같이 0.1버전의 mingyu-cms 이미지가 정상적으로 생성된 것을 확인할 수 있습니다.

 

---

결론

각자의 Node 버전 및 NextJs 버전, 패키지 매니저에 따라 취향껏 커스텀하며 도커파일을 작성할 수 있습니다. 도커의 확장성은 무궁무진합니다. 너무 어려워 하지 말고 많이 작성해보고 빌드해보면서 사용해보도록 합시다.