JS-Developer (프론트엔드 CI CD)

남재상·2025년 5월 27일

JS-Developer

목록 보기
4/5

JS-Developer CI CD

CI CD작업을 합니다.


CI/CD란?

CI/CD지속적인 통합(Continuous Integration)지속적인 제공/배포(Continuous Delivery/Deployment)의 약자입니다.
개발부터 배포까지의 모든 과정을 자동화하여 빠르고 안정적으로 사용자에게 서비스를 제공할 수 있습니다.

CI (Continuous Integration: 지속적인 통합)

  • 개발자가 변경한 코드를 공용 저장소에 자주 통합합니다.
  • 통합된 코드는 자동으로 빌드되고 테스트되어, 문제를 조기에 발견할 수 있습니다.
  • 주요 자동화 항목:
    • 코드 병합 시 빌드 실행
    • 유닛 테스트 수행
    • 린트 검사 및 정적 분석

CD (Continuous Delivery / Deployment)

  • Continuous Delivery (지속적인 제공)

    • 빌드와 테스트를 통과한 코드를 운영 전 단계까지 자동화합니다.
    • 배포 자체는 수동으로 트리거됩니다 (예: 원클릭 배포).
  • Continuous Deployment (지속적인 배포)

    • 테스트를 통과하면 바로 운영 환경에 자동 배포됩니다.
    • 전 과정이 완전 자동화되어 있습니다.

왜 사용하는가?

  • 개발자는 빌드나 배포보다 개발에 집중할 수 있습니다.
  • 전 과정 자동화를 통해 다음을 실현합니다:
    • 수작업 실수 방지
    • 빠른 피드백 제공
    • 배포 속도 향상
    • 서비스 품질 안정화

GitHub Action - Vercel

1. Vercel github 연동

  • 깃허브에 올라가있는 프로젝트를 선택 후 절차대로 수행

2. vercel CICD

  • vercel 공식 홈페이지 참조 후 절차 수행 (전혀 어려운게 없음)

https://vercel.com/guides/how-can-i-use-github-actions-with-vercel

3. lint, build를 확인하는 action추가

name: CI - Lint, Build

on: pull_request

jobs:
  CI-Lint-Build:
    name: run lint, build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      # 패키지가 변경될 때만 재설치
      - name: Cache npm
        uses: actions/cache@v4
        id: npm-cache
        with:
          path: node_modules
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}

      - name: Install Dependencies
        if: steps.npm-cache.outputs.cache-hit != 'true'
        run: npm install

      - run: npm run lint
        if: ${{ always() }} # 에러가 난 경우에도 뒤의 작업을 실행함

      - run: npm run build
        if: ${{ always() }}

profile
작은 코드 하나에도 책임을 담는 개발자입니다!

0개의 댓글