CI 환경 구축

CI는 무엇일까?

continueous integration의 약자로, 레포지토리에 코드를 합치기 전 수행하는 과정

즉, Git과 같은 형상 관리 시스템 레포지토리에 코드를 merge 하기 전 진행하는 task들이라고 생각할 수 있다.

왜 바로 merge 하지 않고 ci라는 과정을 별도로 진행하는 이유에 대해 궁금할 수 있다.

바로 merge 하지 않는 이유

기능 개발이 끝나고 그 기능을 develop이나 production에 합치는 과정에서 코드의 문제가 발생할 경우, 그 코드로 인해 서비스로 까지 영향을 받을 수 있다.

즉, 테스트 및 빌드를 특정 action이 발생할 때 병합하기 위한 task들을 자동화 시킴으로써, 일관된 품질의 코드를 지속적으로 유지할 수 있다.

이를 통해 서비스도 큰 문제 없이 지속될 수 있다.

진행 항목

• 정적 테스트
  • eslint
  • stylelint
• 통합 테스트(react testing library & jest)
• 빌드

이유

ESLint

javascript 구문 오류를 감지해 런타임 에러를 방지하고, 일관된 코딩 스타일을 유지

StyleLint

style 코드의 일관성과 가독성이 높은 코드 유지

빌드 실행

배포 전 프로젝트가 성공적으로 빌드 되는지 확인함으로써, 통합 오류를 조기에 발견

테스트 실행

자동화된 테스트를 실행하여 기존 & 신규 기능이 의도대로 작동 하는지 검증

테스트 결과 PR에 코멘트 등록, 테스트 실패 시 실패한 코드 라인에 체크 코멘트 등록

테스트 결과 및 실패한 테스트의 정확한 위치를 빨리 확인 할 수 있게하여 문제를 빠르게 식별하고 수정

frontend-ci.yml

name: 'frontend-ci'

on:
  pull_request:
    branches:
      - develop/fe
    paths:
      - frontend/**
defaults:
  run:
    working-directory: frontend
jobs:
  frontend-ci:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: 노드 버전 설정
        uses: actions/setup-node@v4
        with:
          node-version: '20.15.1'

      - name: 의존성 캐싱
        id: cache
        uses: actions/cache@v4
        with:
          path: frontend/node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}

      - name: 의존성 설치
        if: steps.cache.outputs.cache-hit != 'true'
        run: yarn install --frozen-lockfile

      - name: eslint 실행
        run: yarn lint

      - name: 빌드 실행
        run: yarn build

      - name: stylelint 실행
        run: yarn lint:styled

      - name: 테스트 실행
        run: yarn test

      - name: 테스트 결과 PR에 코멘트 등록
        uses: EnricoMi/publish-unit-test-result-action@v2
        if: always()
        with:
          files: frontend/test-results/results.xml

      - name: 테스트 실패 시, 실패한 코드 라인에 Check 코멘트 등록
        uses: mikepenz/action-junit-report@v3
        if: always()
        with:
          report_paths: frontend/test-results/results.xml
          token: ${{ secrets.GITHUB_TOKEN }}