한 문장 요약

항상 안정적으로 돌아가는 서비스 = 작은 단위로 배포하고(자주), 자동으로 점검하고(헬스체크·스모크), 필요하면 바로 되돌립니다(롤백).

용어 30초 요약

• CI: 코드를 푸시하면 자동으로 테스트/빌드를 실행
• CD: 빌드 결과를 자동으로 배포(Amplify/GitLab)
• 프리뷰 배포: PR마다 별도 URL로 실제처럼 확인
• 헬스체크: /api/healthz 같은 경로로 OK 여부 확인
• 롤백: 실패 시 이전 정상 릴리즈로 즉시 돌아가기

그림으로 이해

개발자 → PR 생성 → 프리뷰 배포(URL)
                ↓ 확인/리뷰 후 머지
        main → 빌드 → 헬스체크 → 트래픽 전환(무중단)
                          ↘ 실패: 즉시 롤백

작동 방식(3단계)

• Build: 의존성 설치 → 타입/린트 → 빌드
• Verify: /api/healthz 200 확인 + 핵심 화면 스모크
• Release: 정상 시 트래픽 전환, 실패 시 자동/수동 롤백

Amplify 예시(무중단)

• 브랜치 연동: PR → 프리뷰 URL 자동 발급
• main 머지: 자동 빌드/배포 + 이전 릴리즈 롤백 가능
• 환경변수 분리: PREVIEW/PROD 각각 설정

# amplify.yml (예시)
        version: 1
        frontend:
          phases:
            preBuild:
              commands:
                - npm ci
            build:
              commands:
                - npm run build
          artifacts:
            baseDirectory: .next
            files:
              - '**/*'
          cache:
            paths:
              - node_modules/**/*

GitLab CI 예시(간단)

# .gitlab-ci.yml (요약 예시)
        stages: [install, test, build, deploy]
        install:
          stage: install
          script: ["npm ci"]
          artifacts: { paths: [node_modules/] }
        test:
          stage: test
          script: ["npm run lint", "npm run type-check"]
        build:
          stage: build
          script: ["npm run build"]
          artifacts: { paths: [.next/] }
        deploy:
          stage: deploy
          script: ["./scripts/deploy.sh"]
          when: manual  # 필요 시 수동 승인

헬스체크/스모크

// app/api/healthz/route.ts (Next.js)
        export async function GET() {
          return new Response('OK', { status: 200 });
        }

• 헬스체크: 배포 직후 /api/healthz 200 확인
• 스모크: 홈/로그인/핵심 버튼 클릭 정도 자동 확인
• 실패 시: 트래픽 전환 차단 → 이전 릴리즈로 롤백

모니터링(기본)

• Sentry 최소 연동: 에러 수/페이지 기준 알림
• GA4: 전환 퍼널(방문→가입→활성)만 우선
• 릴리즈 태깅: 배포 버전과 에러를 연결

// sentry.client.config.ts (개념 예시)
        import * as Sentry from '@sentry/nextjs';
        Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, tracesSampleRate: 0.1 });

운영 체크리스트(쉬운 것부터)

• PR마다 프리뷰 URL 확인(화면 깨짐·로그인)
• 배포 직후 /api/healthz 확인
• 이상 알림 오면 즉시 롤백, 원인 분석은 이후
• 환경변수/시크릿은 프리뷰/프로덕션 분리

결과(지표)

• 배포 중 다운타임 0초
• 프리뷰로 UI 버그 사전 발견률 증가
• 롤백 평균 소요 5분 → 1분(버튼/스크립트화)

향후 보완 로드맵(가벼운 단계부터)

• 캐시: React Query staleTime/TTL 가이드 도입
• 복구 UX: 오프라인 배너/재시도 토스트 추가
• 관찰성: Sentry Release Health·에러 버짓 시범 적용
• 배포: 롤백 자동화 스크립트 → 버튼 1회로 단축