Next.js 프로젝트에서 Docker 컨테이너로 로컬 개발환경을 구축하려고 한다.


Dockerfile 작성

프로젝트 루트에 Dockerfile을 생성하고 아래와 같이 설정한다.

# Use Node.js version 20 on Alpine Linux as base image
FROM node:20-alpine

# Set the working directory inside the container
WORKDIR /src/app

# Copy package.json and package-lock.json (if available) to the container
COPY package.json package-lock.json* ./

# Install dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY . .

# Command to start the application
CMD ["npm", "run", "dev"]

docker-compose.yml 작성

프로젝트 루트에 docker-compose.yml 파일을 생성하고 아래와 같이 설정한다

version: '3.5'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile  # Dockerfile 경로
    container_name: next-starter-kit
    ports:
      - '3000:3000'  # 호스트 포트:컨테이너 포트
    volumes:
      - .:/src/app  # 호스트의 소스 코드와 컨테이너의 작업 디렉토리를 연결
      - /src/app/node_modules  # node_modules는 볼륨으로 연결하지 않음

도커 설치 및 실행

Docker Desktop을 설치하고 실행한다.

터미널에서 프로젝트 루트로 이동하여 다음 명령어를 실행하여 Docker 컨테이너를 빌드하고 실행한다.

docker-compose up --build

image.png

브라우저에서 http://localhost:3000을 접속해 정상적으로 동작하는지 확인한다.