next.js + nginx + docker-compose를 이용하여 erc, ec2 배포하기 - 1

• next.js는 파이어베이스와 연동하여 db를 사용
• nginx를 이용해 next.js의 서버부담을 줄이고자 사용 (보통 사용한다고 하여 구성해보고자)
• 둘 다 도커 이미지로 만들어 환경을 통일하고 이미지를 실행하여 편하게 서비스하고자 함

next.js 도커파일 작성

(next.js sample에서 가져옴)

./docker/next.DockerFile

FROM node:20-alpine AS base

WORKDIR /app

ENV NODE_ENV production

COPY ../.next/standalone ./
COPY ../.next/static ./.next/static


EXPOSE 3000

ENV PORT 3000

CMD node server.js

nginx 도커파일 작성

./docker/nginx/nginx.Dockerfile

# Use the Nginx image from Docker Hub
FROM nginx:stable-alpine


# Remove the default Nginx configuration file
RUN rm /etc/nginx/conf.d/default.conf

COPY ../docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf

기본 설정은 다음과 같이 설정
80번 포트로 들어오면 next.js 프로젝트가 서빙되는 3000번으로 보냄
./docker/nginx/conf.d/default.conf

server {
    listen 80;
    # server_name example.com;

    location / {
        proxy_pass http://nextjs:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

docker-compose 작성

(도커 컴포즈는 여러개의 컨테이너를 하나의 서비스로 정의하여 관리할 수 있는 도구)

./docker-compose.yml

version: "3"
services:
  nextjs:
    build:
      context: .
      dockerfile: ./docker/next.Dockerfile
    ports:
      - 3000:3000

  nginx:
    build:
      context: .
      dockerfile: ./docker/nginx/nginx.Dockerfile
    ports:
      - 80:80
    depends_on:
      - nextjs

테스트

다음 명령어들을 실행해 테스트 해보면된다

docker-compose build
docker-compose up

빌드했을 때

실행했을 때