AWS EC2에서 Next.js 앱을 Docker, NGINX로 배포 및 GitHub Actions 자동화하기
2025-04-21 18:17:27AWS 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.js 애플리케이션 도커화
- Docker에서 NGINX 리버스 프록시 설정
- GitHub Actions를 사용한 AWS EC2 배포 자동화
프로젝트 설정
터미널을 열고 프로젝트를 생성할 디렉토리로 이동하세요. 이 튜토리얼에서는 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 프로세스를 간소화하기 때문에 개발자들이 실제 비즈니스 로직 개발에 집중할 수 있도록 도와줍니다.