📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - CI/CD 자동 배포 환경 구축

1. CI/CD란 무엇인가?

CI/CD(Continuous Integration & Continuous Deployment)는 소프트웨어 개발과 배포 프로세스를 자동화하는 기법입니다.
이를 통해 코드 변경 사항이 빠르게 테스트되고, 자동으로 서버에 배포될 수 있습니다.

✅ CI/CD의 주요 장점:

코드 변경 시 자동 테스트 및 빌드 실행 → 버그 감소
배포 자동화 → 운영 속도 향상
안정적인 서비스 제공 → 지속적인 업데이트 가능

💡 이 챕터에서는 GitHub Actions를 활용한 Next.js + NestJS 기반 쇼핑몰의 CI/CD 파이프라인 구축 방법을 다룹니다.

2. CI/CD 파이프라인 개요

2.1. CI/CD 흐름

개발자가 코드를 GitHub에 Push
GitHub Actions가 자동으로 테스트 실행
테스트가 통과하면 빌드 및 배포 진행
Next.js 프론트엔드는 Vercel, NestJS 백엔드는 AWS 또는 Railway에 배포

✅ 이제 프론트엔드와 백엔드의 CI/CD를 각각 설정해보겠습니다.

3. 프론트엔드(Next.js) - Vercel 자동 배포 설정

3.1. Vercel을 활용한 자동 배포

Vercel은 Next.js 프로젝트에 최적화된 호스팅 서비스로 자동 배포 및 CI/CD 지원을 제공합니다.

💡 Vercel을 활용한 Next.js 자동 배포 과정

Vercel 공식 사이트에서 계정 생성
GitHub 저장소와 Vercel 연결
자동으로 main 브랜치에 Push하면 Vercel이 배포

✅ Vercel에 Next.js 프로젝트를 추가하면 CI/CD가 자동으로 설정됩니다.

4. 백엔드(NestJS) - GitHub Actions + Railway 배포 설정

4.1. GitHub Actions 설정 파일 생성

GitHub Actions를 사용하여 NestJS를 Railway에 자동 배포하도록 설정합니다.

💡 GitHub Actions 설정 파일 (.github/workflows/deploy.yml)

name: Deploy NestJS to Railway

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: 저장소 체크아웃
        uses: actions/checkout@v3

      - name: Node.js 설정
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'

      - name: 패키지 설치
        run: npm install

      - name: Prisma 마이그레이션 실행
        run: npx prisma migrate deploy

      - name: Railway에 배포
        run: |
          curl -X POST ${{ secrets.RAILWAY_DEPLOY_HOOK }}

✅ 이제 main 브랜치에 Push하면 Railway에 자동으로 NestJS 백엔드가 배포됩니다.

4.2. Railway에서 NestJS 백엔드 배포

Railway는 무료로 사용 가능한 클라우드 백엔드 호스팅 플랫폼입니다.

💡 Railway를 활용한 NestJS 배포 과정

Railway에 가입
새로운 프로젝트 생성 후 GitHub 저장소 연결
.env 파일을 추가하여 환경 변수를 설정
Deploy Hook URL을 GitHub Actions의 RAILWAY_DEPLOY_HOOK에 추가

✅ 이제 GitHub에 Push할 때마다 자동으로 백엔드가 배포됩니다.

5. Docker를 활용한 컨테이너화 배포

5.1. Dockerfile 작성

NestJS와 Next.js를 Docker 컨테이너로 실행할 수 있도록 설정합니다.

💡 NestJS Dockerfile (Dockerfile)

# Node.js 이미지 사용
FROM node:18

# 작업 디렉토리 설정
WORKDIR /app

# 패키지 복사 및 설치
COPY package*.json ./
RUN npm install

# 소스 코드 복사
COPY . .

# 빌드 및 실행
RUN npm run build
CMD ["npm", "run", "start:prod"]

💡 Next.js Dockerfile (Dockerfile)

FROM node:18

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .

RUN npm run build
CMD ["npm", "run", "start"]

✅ 이제 NestJS와 Next.js를 컨테이너로 실행할 수 있습니다.

5.2. Docker Compose 설정

Docker Compose를 사용하면 NestJS + Next.js + PostgreSQL을 한 번에 실행할 수 있습니다.

💡 docker-compose.yml 설정

version: '3.8'

services:
  database:
    image: postgres:latest
    container_name: postgres-db
    restart: always
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: shopdb
    ports:
      - "5432:5432"

  backend:
    build: ./backend
    container_name: nestjs-app
    depends_on:
      - database
    environment:
      DATABASE_URL: postgresql://user:password@database:5432/shopdb
    ports:
      - "4000:4000"

  frontend:
    build: ./frontend
    container_name: nextjs-app
    depends_on:
      - backend
    ports:
      - "3000:3000"

✅ 이제 docker-compose up 명령어로 전체 프로젝트를 실행할 수 있습니다.

6. 배포 후 성능 및 오류 모니터링

6.1. Vercel을 활용한 Next.js 성능 모니터링

Vercel은 프로젝트의 빌드 성능 및 사용자 로그를 모니터링할 수 있는 대시보드를 제공합니다.

Latency 체크: API 응답 시간 분석
Error Tracking: 클라이언트 및 서버 오류 감지
사용자 방문 로그 분석

✅ Vercel에서 성능 및 오류 로그를 실시간으로 확인할 수 있습니다.

6.2. Railway를 활용한 NestJS API 모니터링

Railway에서는 API 성능, 로그 분석, 트래픽 모니터링을 지원합니다.

실시간 로그 확인: NestJS 서버 로그를 실시간으로 모니터링
트래픽 분석: API 요청량 및 응답 시간 체크
오류 감지 및 알림: 장애 발생 시 Slack, 이메일 알림 설정

✅ Railway 대시보드를 활용하여 백엔드 성능을 최적화할 수 있습니다.

🎯 마무리하며

이번 챕터에서는 GitHub Actions를 활용한 Next.js + NestJS의 CI/CD 자동 배포 환경을 구축하는 방법을 살펴봤습니다.

Vercel을 활용한 Next.js 프론트엔드 자동 배포
Railway + GitHub Actions를 이용한 NestJS 백엔드 자동 배포
Docker Compose를 활용한 전체 프로젝트 컨테이너화 배포
배포 후 성능 및 오류 모니터링 방법 정리

다음 단계에서는 7.2. 프로젝트 최종 테스트 및 배포 완료를 다룰 예정입니다. 🚀