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

JSCODE 박재성

2026. 03. 22.

✅ 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기

1. Next.js 프로젝트 만들기

$ npx create-next-app@latest

 

2. Dockerfile 작성하기
Dockerfile

FROM node:20-alpine

WORKDIR /app

COPY . .

RUN npm install

RUN npm run build

EXPOSE 3000

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

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

https://medium.com/@hee98.09.14/docker-layer와-cache-574c12a1e9f7

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

3. .dockerignore 작성하기
.dockerignore

node_modules

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

3. Dockerfile을 바탕으로 이미지 빌드하기

$ docker build -t my-web-server .

 

4. 이미지가 잘 생성됐는 지 확인하기

$ docker image ls

 

5. 생성한 이미지를 컨테이너로 실행시켜보기

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

 

6. 컨테이너 잘 실행되고 있는 지 확인하기

$ docker ps

 

8. localhost:80으로 들어가보기



 

9. 실행시킨 컨테이너 중지 / 삭제하기, 이미지 삭제하기

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

 

✅ 그림으로 이해하기