🎯 프론트엔드·백엔드 애플리케이션을 빌드, 테스트, 패키징, 배포, 검증하는 CI/CD 파이프라인 구축을 정리합니다.

📗 Today I Learned

CI/CD 파이프라인 설계

CI 파이프라인 (Continuous Integration)

• Code Checkout

  • Jenkins가 GitHub에서 git clone 하기 위한 credentials 설정 필요

  • 각자의 Private Repository에서 소스코드를 가져와 빌드

• Unit Test

  • builder 에이전트에서 Node.js v18 환경으로 npm test 실행

  • Coverage Report를 위한 설정 추가 예정

• Build

  • 동일한 builder 에이전트에서 npm run build

  • 결과물:

    • frontend/build

    • backend/build

• Packaging

  • JNLP 에이전트에서 docker build 및 docker push

  • ECR 접근을 위해 Jenkins에 AWS credentials 및 관련 플러그인 설정 필요

---

CD 파이프라인 (Continuous Delivery)

• Staging

  • Terraform 사용 → EC2에 띄운 Minikube 클러스터에 컨테이너 배포

  • ECR 접근 및 S3 상태 저장을 위해 AWS 인증 필요

• Acceptance Test

  • Selenium Standalone 인스턴스를 로컬 클러스터에 띄움 (WD 허브로 사용)

  • tester 에이전트에서 Python 기반 E2E 테스트 실행

  • pytest, selenium 라이브러리 사용

  • Selenium Grid 기반 브라우저 자동화 테스트

---

Release & Smoke Test

• Release

  • Staging과 동일 방식으로 프로덕션 배포

  • Terraform 및 컨테이너 환경 변수만 변경하여 적용

• Smoke Test

  • 배포된 앱이 “정상 배포되었는지” 확인

  • 실제 기능 테스트는 아님

---

Post-Build Actions (리소스 해제)

• Staging 서버 자원 해제

  • terraform destroy로 k8s 오브젝트 제거

  • EC2도 동적으로 관리 가능

• Selenium 인스턴스 해제

  • 테스트 외에는 불필요 → 자원 회수 고려
    
    

---

단위 테스트 및 코드 커버리지

프론트엔드 & 백엔드 공통 사항

• 테스트 도구: npm test

• 커버리지 도구: c8

• 제외 설정 (tsconfig.json, c8 설정)

"exclude": ["src/**/*.test.ts", "src/**/__mocks__/*.ts"]

---

커버리지 리포트 설정

리포트 경로

• 프론트엔드: ${PROJECT_ROOT}/frontend/coverage/index.html

• 백엔드: ${PROJECT_ROOT}/backend/coverage/index.html

Makefile

• frontend/Makefile , backend/Makefile

test:
	npm ci
	c8 -r html -o coverage --all npm test -- --watchAll=false

---

Jenkins Build Agent 제작

• Dockerfile

FROM ubuntu:22.04

RUN apt update && apt upgrade -y
RUN apt install -y curl make
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
RUN apt install -y nodejs
RUN npm i -g c8

• 생성한 이미지는 sheayun/jenkins-agent-node-18 로 등록

• Jenkins가 이 이미지를 이용해 테스트 실행

Jenkins Pipeline 구성

• Pipeline 이름: lecture

• Jenkins Credentials: github-credentials (SSH private key 사용

Jenkins Pipeline Script 구성

• Kubernetes pod

pipeline {
  agent {
    kubernetes {
      yaml '''
apiVersion: v1
kind: Pod
spec:
  containers:
  - name: builder
    image: sheayun/jenkins-agent-node-18
    command:
    - cat
    tty: true
'''
    }
  }

• checkout

stage("Checkout") {
  steps {
    git url: "git@github.com:sheayun/lecture.git",
        branch: "main",
        credentialsId: "github-credentials"
  }
}

• unit test

stage("UT") {
  steps {
    script {
      container("builder") {
        sh '''
        (cd backend && make test)
        (cd frontend && make test)
        chmod -R 777 backend/coverage
        chmod -R 777 frontend/coverage
        '''
      }
    }
  }
}

• code coverage report

stage("Code Coverage") {
  steps {
    publishHTML(target: [
      reportDir: 'backend/coverage',
      reportFiles: 'index.html',
      reportName: 'Backend Coverage'
    ])
    publishHTML(target: [
      reportDir: 'frontend/coverage',
      reportFiles: 'index.html',
      reportName: 'Frontend Coverage'
    ])
  }
}