[FE] CI 전략

CI 도구

Github Actions

가장 가볍게 사용할 수 있고 Github와 연동이 용이하므로 CI로 선택하였습니다. 각자의 feat 브랜치에서 develop 브랜치로 PR을 날릴 때 빌드와 테스트를 수행하는 역할로 사용하고 있습니다.

스크립트

fe-ci-dev.yml

github actions 를 활용하여 프론트엔드 CI 작업이 이뤄지며, 미리 버그를 발견할 수 있습니다. vscode 상에선 오류가 안나지만 매번 수동으로 하기 어려운 build 작업을 CI에서 처리하여 오류를 방지하도록 하였습니다.

1. develop 브랜치에 PR을 날리면 frontend/** 에서 변경사항이 생겼을 때만 워크플로우를 트리거시킨다.
   • 기본값인 opened, synchronize, reopened 에만 트리거
2. CI 서버에서 원격 저장소의 코드를 내려받는다.
3. Node 20 및 의존성을 설치한다.
4. build-dev 를 통해 빌드 시 오류가 없는지 확인한다.
5. npm test 를 통해 테스트 코드를 실행한다. Github Actions에서 사용하는 yml 파일로 develop 브랜치에 있는 frontend 폴더에 PR이 발생한 경우 빌드와 테스트를 하여 에러 여부를 검사한다.

name: Frontend CI

on:
  pull_request:
    branches:
      - develop
    paths:
      - "frontend/**"

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: "20"
          cache: "npm"
          cache-dependency-path: frontend/package-lock.json

      - name: Install Dependencies
        run: npm ci
        working-directory: ./frontend

      - name: Build
        run: npm run build-dev
        working-directory: ./frontend

      - name: Test
        run: npm test
        working-directory: ./frontend

Husky

git hook 기능을 간편하게 해주는 라이브러리. 현재는 commit시 미리 작성해 둔 스크립트를 실행시키는데 사용하고 있습니다.

스크립트

pre-commit-msg

commit 메세지 작성 후 편집기를 실행하기 전에 실행되는 스크립트입니다. 먼저 commit 메시지가 팀 컨벤션에 맞는 prefix인 검사합니다. 그리고 현재 브랜치에 뒷부분에 있는 이슈 번호를 가져와 commit 메시지의 뒷부분에 추가해줍니다.

#!/bin/sh

COMMIT_MSG_FILE=$1
COMMIT_MSG=$(cat $1)

# 허용하는 commit prefix
ALLOWED_PREFIXES="^(feat|fix|refactor|build|docs|chore|test|style|design|init|merge): "

# 현재 브랜치명
CURRENT_BRANCH=$(git branch --show-current)

# 브랜치명에서 이슈 번호 추출. 브랜치명 : {prefix}/#{issue_number}
ISSUE_NUMBER=$(echo $CURRENT_BRANCH | sed -n 's/.*#\([0-9]*\).*/\1/p')

if ! echo "$COMMIT_MSG" | grep -Eq "$ALLOWED_PREFIXES"; then
  echo "Error: Commit message does not follow the convention."
  echo "Allowed prefixes: feat:, fix:, refactor:, build:, docs:, chore:, test:, style:, design:, init:, merge:"
  exit 1
fi

# 이슈 번호가 이미 커밋 메시지에 있는지 확인
if ! echo "$COMMIT_MSG" | grep -q "#$ISSUE_NUMBER"; then
  # 이슈 번호가 없으면 커밋 메시지 끝에 추가
  NEW_COMMIT_MSG="$COMMIT_MSG #$ISSUE_NUMBER"
  echo "$NEW_COMMIT_MSG" > "$COMMIT_MSG_FILE"
  echo "Issue number #$ISSUE_NUMBER has been automatically added to the commit message."
fi

pre-commit

commit이 완료되기 전에 lint-staged로 eslint와 prettier의 규칙에 따라 코드를 수정해주고 lint:styled로 css 스타일링의 순서를 규칙에 맞게 수정해줍니다.

cd frontend && npx lint-staged && npm run lint:styled