프론트엔드 CI ‐ Github Actions

github action 설명서

https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions https://docs.github.com/ko/actions/learn-github-actions/expressions#status-check-functions

사용한 action 작업들

• checkout
• setup-node
• cache
• action-slack

frontend-ci.yml

name: Frontend CI

on:
# 워크플로우를 실행할 수 있는 이벤트
  pull_request:
  # PR에서만
    branches: [main]
    # main 브랜치에 merge하는 PR에서만
    types: [opened, synchronize, reopened]
    # 열렸을 때, 동기화할 때, 닫힌 PR을 다시 열 때
    paths:
    # branches 필터와 paths 필터 둘 다 사용하는 경우 둘 필터 모두 충족될 때 워크플로우 실행
      - 'frontend/**'

jobs:
# 워크플로우 실행은 기본적으로 병렬로 실행되는 하나 이상의 `jobs`로 구성됨
  test:
  # job_id
    runs-on: ubuntu-latest
    # 작업을 실행할 머신
    env:
    # 환경 변수
      working-directory: ./frontend
      # 프론트 프로젝트는 frontend에 있으므로 directory 설정(npm 명령어를 frontend 폴더에서 실행할 예정)

    strategy:
    # 작업에 행렬 전략 사용
      matrix:
      # 매트릭스 전략 - 단일 작업 정의에서 변수를 사용하여 변수의 조합을 기반으로 여러 작업 실행
      # 아래와 같이 3 * 2 매핑 가능
      # ex)
      # version: [10, 12, 14]
      # os: [ubuntu-latest, windows-latest]
        node-version: [18.16.1]
        # NOTE: 현재 우리 작업에서는 matrix 전략이 필요 없어서 환경변수로 수정함.
        # 18.16.1은 node.js 18 버전의 lts

    steps:
    # 작업들
      - name: Checkout
      # 단계의 이름
        uses: actions/checkout@v3
        # 실행할 작업 - 저장소로 부터 코드를 내려받기 위한 checkout 액션

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        # node.js 설치 액션
        with:
        # 작업에 정의된 입력 매개 변수의 map 자료(key-value)
          node-version: ${{ matrix.node-version }}
          # node-version이 여러개 들어있었다면 여러개 다 실행

      - name: Cache dependencies
        id: cache
        # steps.[id]
        uses: actions/cache@v3
        # cache 해주는 액션
        with:
          path: '**/node_modules'
          # node_moduels 캐시
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          # package-lock.json 기준으로 캐시
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        # cache가 없으면 실행
        run: npm ci
        # package-lock.json 기준으로 패키지 설치
        working-directory: ${{ env.working-directory }}
        # 위에 환경변수로 선언해준 디렉토리에서 실행

      - name: ESLint
        if: always()
        # 항상 실행 (위에서 실패해도 액션이 멈추지 않고 이 작업도 실행)
        run: npm run lint
        # eslint
        working-directory: ${{ env.working-directory }}

      - name: Test
        if: always()
        run: npm test
        # jest
        working-directory: ${{ env.working-directory }}

      - name: Build
        if: always()
        run: npm run build
        # build 테스트
        working-directory: ${{ env.working-directory }}

      - name: Notify slack on CI fail
        if: failure()
        # 작업의 이전 단계가 실패하거나 종속 작업 체인이 있는 경우 상위 작업이 실패하면 실행
        uses: 8398a7/action-slack@v3
        # 슬랙 알림 액션
        with:
          status: ${{ job.status }}
          author_name: 프론트엔드 테스트 실패 알림
          fields: repo, message, commit, author, action, eventName, ref, workflow, job, took
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}