[Docker] 웹 프론트엔드 프로젝트 Next.js를 Docker로 배포해보자

---

Nest.js 프로젝트 생성

$ npx create-next-app@latest

 

프로젝트 생성 후 정상적으로 로컬에서 실행되는지 확인한다.

npm run dev

 

localhost:3001로 정상적으로 실행되었다.

 

---

Dockerfile + .dockerignore 작성

✔ Dockerfile

# alpine 불 필요한것들 제외하고 용량을 최적화한 버전이다.
FROM node:20-alpine

WORKDIR /app

COPY . .

RUN npm install

RUN npm run build

EXPOSE 3000

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

 

 

✔ .dockerignore

npm을 별도 설치하기 때문에, .dockerignore에서 node_modules는 제외한다.

node_modules

 

---

 

Docker 빌드

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

$ docker build -t my-web-server .

 

 

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

$ docker images

 

 

✔ 생성한 이미지를 컨테이너로 실행

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

 

 

✔ 컨테이너 실행 확인

$ docker ps

 

localhost:80 으로 정상적으로 실행되었다.