AWS EC2에서 Next.js 앱을 Docker, NGINX로 배포 및 GitHub Actions 자동화하기

2025-04-21 18:17:27

nextjsdockernginxaws

AWS EC2에서 Next.js 앱을 Docker, NGINX로 배포 및 GitHub Actions 자동화하기

Next.js는 서버 사이드 렌더링, 정적 사이트 생성 및 API 경로를 제공하는 강력한 React 프레임워크입니다. AWS EC2 인스턴스에 Next.js 앱을 배포하면 호스팅 환경에 대한 더 나은 제어와 맞춤화가 가능합니다. 이 가이드는 Docker와 NGINX를 사용하여 AWS EC2에 Next.js 애플리케이션을 설정하고 GitHub Actions로 배포를 자동화하는 과정을 안내합니다.

참고: 자세한 코드는 GitHub Repository에 제공됩니다.

프로젝트 설정

터미널을 열고 프로젝트를 생성할 디렉토리로 이동하세요. 이 튜토리얼에서는 next-tutorial-app이라는 디렉토리를 생성할 것입니다.

> mkdir next-tutorial-app
> cd next-tutorial-app

next-tutorial-app 디렉토리 안에 새 Next.js 프로젝트를 생성하기 위해 다음 명령어를 실행하세요.

npx create-next-app@latest

이제 디렉토리를 변경하여 개발 서버를 시작합니다.

cd website # 앱 이름
npm run dev # 개발 서버 시작

Step 2: Next.js 애플리케이션 도커화하기

다음으로 website 폴더 루트 디렉토리에 Dockerfile을 작성합니다.

FROM node:23.10.0-alpine
WORKDIR /app
COPY ./package*.json ./
RUN yarn
COPY . .
EXPOSE 3000

그리고 불필요한 파일들을 제외하기 위해 .dockerignore 파일을 생성하세요.

node_modules
.next
.DS_Store
dist

프로젝트 루트 디렉토리에서 docker-compose.yml 파일을 생성하여 멀티 컨테이너 애플리케이션 구성을 추가합니다.

services:
  website:
    build:
      context: ./website
      dockerfile: Dockerfile
    command: yarn dev
    ports:
      - "3000:3000"

다음 명령어를 실행하여 테스트 해보세요.

docker-compose up

작업을 중단하려면 다른 터미널에서 아래 명령어를 사용하여 실행중인 컨테이너와 관련된 리소스를 삭제합니다.

docker-compose rm -v

Step 3: Docker에서 NGINX 리버스 프록시 설정

프로젝트 디렉토리의 루트에 nginx라는 NGINX 디렉토리를 생성한 후, nginx.conf라는 구성 파일을 추가합니다.

server {
     listen 80;
     server_name localhost; 

    location / {
        proxy_pass http://website: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;
     }
}

같은 디렉토리에 Dockerfile을 생성하여 사용자 정의 NGINX Docker 이미지를 빌드합니다.

FROM nginx:latest
RUN rm /etc/nginx/conf.d/*
COPY nginx.conf /etc/nginx/conf.d/
EXPOSE 80

개발 환경에서 테스트하기 전, docker-compose.yml 파일에 Nginx 서비스를 추가합니다.

services:
  website:
    build:
      context: ./website
      dockerfile: Dockerfile
    ports:
    - 3000:3000

  nginx:
    build:
     context: ./nginx
     dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - website

다음으로, next.config.js 파일에 output: 'standalone'을 설정해 Docker 배포를 위한 최적화를 수행했는지 확인합니다.

docker-compose up

http://localhost:80 또는 http://127.0.0.1:80에서 테스트합니다. 작업을 중단한 후, 아래 명령어로 리소스를 삭제합니다.

docker-compose rm -v

GitHub Actions를 사용한 AWS EC2 배포 자동화

docker-compose.ci 및 docker-compose.prod 파일을 생성하여 프로덕션 및 워크플로우를 위한 환경을 구성합니다.

docker-compose.ci

services:
  website:
    container_name: website
    build:
      context: ./website
      dockerfile: Dockerfile
      cache_from:
        - '${NEXT_APP_WEBSITE_IMAGE}'
    image: '${NEXT_APP_WEBSITE_IMAGE}'
    env_file:
      - ./.env
    ports:
      - '3000:3000'

  nginx:
    container_name: nginx
    build:
      context: ./nginx
      dockerfile: Dockerfile
      cache_from:
        - '${NEXT_APP_NGINX_IMAGE}'
    image: '${NEXT_APP_NGINX_IMAGE}'
    ports:
      - '80:80'
    restart: always
    depends_on:
      - website

docker-compose.prod

services:
  website:
    container_name: website
    image: '${NEXT_APP_WEBSITE_IMAGE}'
    env_file: .env
    ports:
      - '3000:3000'

  nginx:
    container_name: nginx
    image: '${NEXT_APP_NGINX_IMAGE}'
    ports:
      - '80:80'
    depends_on:
      - website
    restart: always

GitHub Actions를 통해 배포 과정을 자동화하여 클라우드 환경에서 손쉽게 Next.js 애플리케이션을 운영해 보세요.

결론

이 가이드를 통해 Next.js 애플리케이션을 Docker와 NGINX를 활용하여 AWS EC2에서 배포하고, GitHub Actions로 효율적으로 자동화하는 방법에 대해 알게 되셨길 바랍니다. 이러한 자동화는 DevOps 프로세스를 간소화하기 때문에 개발자들이 실제 비즈니스 로직 개발에 집중할 수 있도록 도와줍니다.

R_11

AWS EC2에서 Next.js 앱을 Docker, NGINX로 배포 및 GitHub Actions 자동화하기