[실습] 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기

author

JSCODE 박재성


$ npx create-next-app@latest

Dockerfile


FROM node:20-alpine

WORKDIR /app

COPY . .

RUN npm install

RUN npm run build

EXPOSE 3000

ENTRYPOINT [ "npm", "run", "start" ]

심화) Docker 이미지 생성 시 캐시를 활용해서 최적화할 수 있는 방법이 있다. 입문자한테는 불필요한 내용이기 때문에 별도로 설명하지 않았다. 관심 있는 분들은 아래 링크를 참고하자.

alpine : 불필요한 프로그램을 포함하지 않고 이미지 크기를 최소화한 버전. 실제 배포 할 때도 되도록이면 alpine 버전을 사용한다.

.dockerignore


node_modules

이미지를 생성할 때 npm install을 통해 처음부터 깔끔하게 필요한 의존성만 설치한다. 따라서 호스트 컴퓨터에 있는 node_modules는 컨테이너로 복사해갈 필요가 없다.


$ docker build -t my-web-server .


$ docker image ls


$ docker run -d -p 80:3000 my-web-server


$ docker ps


$ docker stop {컨테이너 ID}
$ docker rm {컨테이너 ID}
$ docker image rm {이미지 ID}

author


$ npx create-next-app@latest

Dockerfile


FROM node:20-alpine

WORKDIR /app

COPY . .

RUN npm install

RUN npm run build

EXPOSE 3000

ENTRYPOINT [ "npm", "run", "start" ]

심화) Docker 이미지 생성 시 캐시를 활용해서 최적화할 수 있는 방법이 있다. 입문자한테는 불필요한 내용이기 때문에 별도로 설명하지 않았다. 관심 있는 분들은 아래 링크를 참고하자.

alpine : 불필요한 프로그램을 포함하지 않고 이미지 크기를 최소화한 버전. 실제 배포 할 때도 되도록이면 alpine 버전을 사용한다.

.dockerignore


node_modules


$ docker build -t my-web-server .


$ docker image ls


$ docker run -d -p 80:3000 my-web-server


$ docker ps


$ docker stop {컨테이너 ID}
$ docker rm {컨테이너 ID}
$ docker image rm {이미지 ID}