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

Next.js 프로젝트 Docker로 배포하기

---

1. next 프로젝트 생성

npx create-next-app@latest

 

 

확인

 

2. 편집기로 열어서 실행해보기

npm run dev

 

3. next.js의 포트번호는 3000 이다. 브라우저를 열어서 확인해보자. 

 

4. Dockerfile 생성

 base 이미지는 node로 한다. 이미지들 중 alpine이라는 태그명이 많다. 실제 이미지를 최적화 해서 이미지 용량을 줄인 것이다. 

 node 20버전의 alpine 이미지를 사용해보자. 

 

FROM node:alpine

WORKDIR /app

COPY . .

RUN npm install

RUN npm run build

EXPOSE 3000

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

 

 

5. dockerignore 파일 추가

node_modules

 

6. 빌드

docker build -t my-web-server .

 

7. 실행

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

이번엔 호스트 컴퓨터의 포트를 80번으로 매핑해보자. 우리가 일반적으로 사이트에 접속할 때 포트를 붙이지 않아도 접속 가능한 것은 80번 포트가 생략되어 있기 때문이다. 

확인해보자. 

 

 

 

 

 

* Inflearn(인프런) ‘비전공자도 이해할 수 있는 Docker 입문/실전’ 강의 참고