React CI/CD 파이프라인 구축과 자동 배포

개요

React 프로젝트를 안정적으로 운영하려면 CI/CD 파이프라인이 필수다. 자동화된 테스트와 빌드, 배포 과정을 도입하면 변경 시 위험을 줄이고 릴리즈 속도를 높일 수 있다. 이 글에서는 react ci cd 설정 관점에서 필요한 요소를 단계별로 설명한다. 예제로는 GitHub Actions를 사용한 github actions react 배포 흐름을 다룬다.

사전 요구사항

• Node.js와 npm 설치
• GitHub 저장소 연결
• 기본적인 React 앱 구조(create-react-app 또는 Vite 등)

단계별 구성

1. 로컬 스크립트 준비

먼저 package.json에 테스트, 린트, 빌드 스크립트를 정의한다. CI에서 동일한 명령을 실행하게 된다.

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --watchAll=false",
    "lint": "eslint src --ext .js,.jsx"
  }
}

2. 테스트와 린트 도입

테스트는 Jest와 React Testing Library를 사용하면 진입 장벽이 낮다. 린트는 ESLint와 Prettier 조합으로 코드 스타일을 유지한다. 로컬에서 통과하는지 확인한 뒤 CI로 이행한다.

3. GitHub Actions 워크플로우 작성

워크플로우는 풀 리퀘스트 검증용과 메인 브랜치 배포용으로 나누는 것이 좋다. 아래 예시는 main에 푸시되면 테스트·빌드 후 gh-pages 또는 배포 액션으로 업로드하는 흐름이다.

name: CI CD

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build_and_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm ci
      - name: Run lint
        run: npm run lint
      - name: Run tests
        run: npm run test
      - name: Build
        run: npm run build

  deploy:
    needs: build_and_test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

4. 배포 대상 선택

배포는 GitHub Pages, Netlify, Vercel, S3+CloudFront 등 다양하다. 각 서비스는 장단점이 있다.

• GitHub Pages: 무료로 간단한 정적 사이트 배포 가능
• Netlify/Vercel: 자동 롤백, 환경변수 관리, 프리뷰 배포 기능 제공
• S3+CloudFront: 대규모 트래픽에 유리한 구성

5. 환경변수와 시크릿 관리

API 키나 민감 정보는 GitHub Secrets에 저장한다. 워크플로우에서 secrets.NAME 형태로 참조한다. 환경변수가 필요한 빌드는 .env 파일 대신 시크릿을 통해 주입한다.

6. PR 검증과 코드 품질 유지

풀 리퀘스트마다 자동으로 lint와 test가 실행되도록 설정하면 리뷰 부담이 줄어든다. 필요하면 Coverage 보고서를 생성해 기준을 설정한다.

7. 모니터링과 롤백 전략

배포 후 에러 추적은 Sentry나 Log 서비스로 연결한다. 문제가 발생하면 이전 안정 버전으로 롤백하는 절차를 문서화한다. 자동 배포 파이프라인에는 수동 승인을 추가해 보호할 수 있다.

실제 예시: 간단한 React 컴포넌트

테스트 대상이 될 간단한 컴포넌트를 예로 둔다. JSX는 <pre> 내부가 아니므로 코드 블록에서는 <와 >를 이스케이프한다.

import React from 'react';

function Hello({ name }) {
  return <div>Hello, {name}!</div>;
}

export default Hello;

정리

react ci cd 설정은 작은 단계부터 시작하는 것이 중요하다. 먼저 테스트와 린트를 자동화한 뒤 빌드와 배포를 연결한다. github actions react 배포 예제를 통해 CI 파이프라인을 구성한 뒤, 서비스 특성에 맞는 배포 대상을 선택하면 된다. 일단 자동화가 되면 배포 속도와 안정성이 동시에 개선된다.

추가 참고

• 테스트 커버리지 기준 설정
• 보안 스캔 도구 통합
• 롤백 절차 문서화