👨‍💻
Hello, I’m JungHyeon
Blog
Next.js 도커 이미지 생성 + Nginx 리버스 프록시

Next.js 도커 이미지 생성 + Nginx 리버스 프록시

요약
Next.js 도커 이미지를 생성하고 Nginx를 리버스 프록시로 사용
작성일
Dec 4, 2024
태그
Docker
Nginx
Next.js
최근 진행하고 있던 프로젝트의 개발이 끝나 배포에 대한 방법을 고민하던 중 이전에 데모 어플리케이션으로 사용해본 docker와 github action을 사용한 배포 자동화를 적용해보기로 하였습니다. 사실 데모가 아닌 프로젝트에 CI/CD 전체의 자동화를 적용해보려는 것은 처음이라 많이 헷갈렸습니다.. (회사에서 근무할 당시에는 사용자가 없는 시간에 수동 배포를 했던 기억이 난다..)
 

요약

  • Next.js 서버를 메인으로, Nginx를 리버스 프록시 서버로 구성
  • dockerfile 설정 및 docker image 생성
  • 로컬에서 정상 작동 확인 - Nginx 리버스 프록시 확인
  • 서버 측 렌더링(SSR) 방식을 위주로 설명
 

Next.js Dockerfile 생성

해당 Dockerfile은 두 단계로 나뉘어 있어 멀티스테이지 빌드 방식을 활용하고 있습니다. 프로젝트 최상단 경로에 파일명을 dockerfile로 지정하고 아래 코드를 넣어 정의합니다.
  1. 빌드 단계로, Next.js 애플리케이션을 빌드하여 .next 디렉토리와 public 디렉토리 등 준비
  1. 실행 단계로, 실제로 프로덕션 환경에서 애플리케이션을 실행하는 설정. 여기서 불필요한 빌드 파일들을 제외하고, 최종 실행에 필요한 파일만을 포함하여 이미지 크기를 최소화
 
# 1단계: 빌드 환경 설정
FROM node:18-alpine AS builder
 
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
 
# 2단계: 실행 환경 설정
FROM node:18-alpine AS runner
 
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
 
RUN npm install --production
 
ENV NODE_ENV production
ENV PORT 3000
 
EXPOSE 3000
 
CMD ["npm", "start"]
 

Nginx 설정

프로젝트 최상단에서 nginx/default.conf 파일을 생성 후 아래 코드를 넣어 사용합니다.
 
server {
    listen 80;
 
    location / {
        proxy_pass http://app:3000;  # 'app'은 Docker Compose에서 정의된 서비스 이름
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
 

docker-compse.yml 설정

Nginx와 Next.js를 하나의 서비스로 관리하기 위해 도커 컴포스를 만들어 줍니다.
version: '3.8'
 
services:
  app:
    image: junghyeonkim/studyhub-next-nginx:latest
    ports:
      - '3000:3000'
    environment:
      NODE_ENV: production
 
  nginx:
    image: nginx:alpine
    ports:
      - '80:80'
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - app
 

실행 및 테스트

도커 컴포스를 실행하여 만들어진 이미지와 컨테이너는 아래 이미지와 같습니다.
도커 이미지
도커 이미지
도커 컨테이너
도커 컨테이너
최종적으로 localhost:80으로 접속한다면 프로젝트가 정상적으로 실행된 것을 확인할 수 있습니다.
 

참고문헌

Manuals
Learn how to install, set up, configure, and use Docker products with this collection of user guides
Manuals
https://docs.docker.com/manuals/
Manuals