[Next.js14 강의] 26강 - 지속적인 통합 및 배포(CI/CD) 설정

안녕하세요! 그레이 해커 월횽입니다. 이번 강의에서는 지속적인 통합(CI)과 지속적인 배포(CD)의 개념을 이해하고, Next.js 프로젝트에 이를 설정하는 방법을 배웁니다. 이를 통해 코드가 변경될 때마다 자동으로 테스트 및 배포가 진행되어 안정적인 애플리케이션을 유지할 수 있습니다. 특히, GitHub Actions와 Vercel을 활용한 실습을 진행합니다.

 

1. CI/CD 개요

 

1-1. 지속적인 통합(CI)

지속적인 통합(CI)는 개발자가 새로운 코드를 정기적으로 소스 코드 저장소에 병합하는 프로세스를 의미합니다. CI는 코드 병합 시 자동으로 빌드와 테스트가 실행되어 코드 품질을 높이고, 버그가 빠르게 발견되도록 합니다.

반응형

1-2. 지속적인 배포(CD)

지속적인 배포(CD)는 코드가 저장소에 병합되면 자동으로 배포 파이프라인이 실행되어 애플리케이션을 프로덕션 환경에 배포하는 것을 의미합니다. 이를 통해 코드 변경 후 빠르게 사용자에게 업데이트가 반영됩니다.

 

 

2. CI/CD의 장점

· 빠른 피드백: 코드가 병합될 때마다 테스트와 빌드가 자동으로 이루어져, 코드 품질 저하를 방지하고 버그를 조기에 발견할 수 있습니다.
· 안정적인 배포: 배포 파이프라인이 자동으로 처리되기 때문에 수동 배포에서 발생하는 실수를 방지할 수 있습니다.
· 팀 협업 강화: 여러 개발자가 동시에 작업해도 충돌을 최소화하고, 코드 품질을 유지할 수 있습니다.

 

 

3. GitHub Actions를 이용한 CI 설정

GitHub Actions는 GitHub 리포지토리 내에서 자동화된 작업(CI/CD)을 설정할 수 있는 도구입니다. 이를 통해 코드 병합 시 자동으로 테스트, 빌드, 배포 등의 작업이 이루어지도록 설정할 수 있습니다.

728x90

3-1. GitHub Actions 설정

· 프로젝트 루트 디렉토리에 .github/workflows 폴더를 생성합니다.
· 그 안에 ci.yml 파일을 생성하여 CI 작업을 정의합니다.

name: CI for Next.js

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

      - name: Build Next.js app
        run: npm run build

 

 

3-2. CI 설정 설명

- on: 어떤 이벤트에서 CI가 실행될지 정의합니다. push 및 pull_request 이벤트에서 main 브랜치로 코드가 푸시되거나 PR이 발생하면 이 작업이 실행됩니다.
- jobs: 각 작업을 정의하는 부분입니다.
· checkout: 코드를 체크아웃하여 작업이 실행되는 서버에 다운로드합니다.
· setup-node: Node.js 환경을 설정합니다.
· install dependencies: 애플리케이션에 필요한 의존성 패키지를 설치합니다.
· run tests: 테스트 코드를 실행합니다.
· build: Next.js 애플리케이션을 빌드합니다.

 

 

4. Vercel과 GitHub Actions 연동을 통한 CD 설정

Vercel은 GitHub와 쉽게 연동되어 자동 배포를 지원합니다. CI가 통과되면 Vercel에서 자동으로 CD 파이프라인을 실행하여 배포가 이루어집니다.

 

4-1. Vercel과 GitHub 연동

· Vercel 대시보드에서 새 프로젝트를 추가할 때 GitHub 리포지토리를 선택합니다.
· GitHub Actions에서 CI 작업이 성공하면, Vercel이 자동으로 해당 리포지토리의 코드를 빌드하고 배포합니다.
· main 브랜치에 코드가 병합되면 Vercel은 자동으로 새로운 버전을 배포합니다.

SMALL

4-2. 배포 환경 구성

· Vercel은 프로덕션과 프리뷰 배포 환경을 제공합니다.
· 프로덕션 배포: main 브랜치에 병합될 때 실행됩니다.
· 프리뷰 배포: 다른 브랜치에서 푸시되면 실행되며, 팀원들이 검토할 수 있는 임시 URL이 제공됩니다.

 

 

5. 배포 파이프라인 최적화

 

5-1. 테스트 자동화

· Jest나 React Testing Library를 사용하여 Next.js 애플리케이션의 컴포넌트, API, 페이지를 테스트할 수 있습니다.
· CI 단계에서 테스트가 자동으로 실행되므로, 코드 품질을 유지할 수 있습니다.

 

5-2. 캐싱 활용

GitHub Actions에서 캐싱을 사용하여 반복적인 의존성 설치 시간을 줄일 수 있습니다. 다음과 같이 캐시를 설정할 수 있습니다.

- name: Cache dependencies
  uses: actions/cache@v2
  with:
    path: node_modules
    key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

5-3. 빌드 성능 최적화

Next.js의 정적 페이지 생성(SSG)을 활용하여 빌드 시간을 줄이고, 빌드 후에는 캐시된 이미지와 정적 자산을 활용하여 빠르게 배포할 수 있습니다.

 

 

6. CI/CD 도구 비교

· GitHub Actions: GitHub 내에서 직접 설정할 수 있으며, GitHub과의 통합이 뛰어납니다.
· CircleCI: 직관적인 UI와 다양한 설정 옵션을 제공하며, 대규모 팀에서 많이 사용합니다.
· Travis CI: 오랜 역사를 가진 CI 도구로, 많은 오픈소스 프로젝트에서 사용됩니다.
· GitLab CI/CD: GitLab과 함께 사용될 때 강력한 파이프라인 설정이 가능합니다.

 

이번 강의에서는 CI/CD의 개념을 이해하고, GitHub Actions와 Vercel을 사용하여 Next.js 애플리케이션의 지속적인 통합 및 배포를 설정하는 방법을 배웠습니다. CI/CD는 코드 품질을 높이고, 안정적인 배포를 통해 사용자 경험을 개선하는 핵심적인 개발 프로세스입니다.

 

 

 

 

 

- 이전 수업 목록