Github Acitons CI 세팅하기

 

요약
yml 문서 작성해서 github actions로 prettier, lint, tsc 체크하고 vercel 배포하기
코드래빗 웹페이지에서 리뷰 세팅하기

목차

1. github_actions로 CI 돌리기

2. ci.yml - lint/tsc 체크 및 라이브러리 자동 업데이트

3. deploy.yml - main vercel 배포

4. pr-title-check.yml - pr title 검사

5. 코드래빗 리뷰

 

---

1. github actions로 CI 돌리기

ci 세팅을 github actions로 할 거여서 이슈 생성하고 .github/workflows에 yml 파일들을 작성해봤다.

할 일들은 아래의 내용들이다.

• lint/tsc 체크
• main vercel 배포
• CodeRabbit 리뷰
• pr title 검사
• 라이브러리 자동 업데이트

---

2. ci.yml - lint/tsc 체크 및 라이브러리 자동 업데이트

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lint-and-typecheck:
    name: Lint & Type Check
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code #1. 저장소 코드 다운로드
        uses: actions/checkout@v4

      - name: Setup Node.js #2. Node.js 환경 설정
        uses: actions/setup-node@v4
        with:
          node-version: '22.x'
          cache: 'pnpm' # pnpm 캐시를 활성화하여 설치 속도 향상

      - name: Install pnpm  #3. pnpm 패키지 매니저 설치
        uses: pnpm/action-setup@v4
        with:
          version: 10.19.0

      - name: Install dependencies  #4. 프로젝트 의존성 설치
        run: pnpm install --frozen-lockfile --prefer-offline
        # --frozen-lockfile: lock 파일과 정확하게 일치하는 버전 설치
        # --prefer-offline: 가능한 캐시를 사용

      - name: Run Prettier  #5. Prettier로 포맷팅 검사
        run: pnpm exec prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,md}"

      - name: Run ESLint  #6. ESLint로 코드 품질 검사 (경고도 허용x)
        run: pnpm exec eslint "src/**/*.{js,jsx,ts,tsx}" --max-warnings=0

      - name: Run TypeScript Check  #7. TS 타입 검사
        run: pnpm exec tsc --noEmit

 

CI는 문제가 생겼을 때 빨리 멈춰서 비용을 줄여야 한다. 

보면 버전이 명시되어 있는 것들이 있는데 latest를 지원하지 않아서 직접 작성해주어야 한다고 한다.

버전 확인은 아래 제목에 걸어둔 링크를 통해 확인할 수 있다.

 

1. Checkout code

• 저장소 코드를 다운 받는다. 이후 모든 단계는 저장소 코드가 있어야 실행 가능하기 때문이다.

2. Install pnpm

• 프로젝트 패키지 매니저를 pnpm으로 지정했다. 뒤에 이어질 의존성 설치 전에 필요하다.
• Node.js보다 먼저 설치하는 이유는 node.js에서 pnpm 캐시르 사용하려면 pnpm 설치가 먼저 이루어져야하기 때문이다.

 

3. Setup Node.js

• pnpm은 내부적으로 Node.js로 작성된 CLI 도구이므로, Node 환경에 의존하기 때문에 세팅이 필요하다.
• cache: pnpm을 설정하면 pnpm 캐시를 활성화해서 설치 속도를 향상시킬 수 있다.
  pnpm은 매번 의존성 패키지를 인터넷에서 다운로드하여 node_modules 폴더를 생성한다.
  여기서 캐시를 사용하면 한 번 받은 패키지는 Github 서버에 저장하여 다음 CI에서 재다운로드를 하지 않는다.
  속도 개선 및 네트워크 이슈 감소에 필요하다.

 

4. Install dependencies (pnpm install --frozen-lockfile --prefer-offline)

• 검사할 prettier, eslint, tsc는 모두 node_modules에 의존하여, 의존성 설치가 필요하다.
• --frozen-lockfile로 항상 같은 버전을 설치하면 환경 불일치를 차단할 수 있다.
• --prefer-offline으로 역시 캐시를 사용하도록 하여 비용을 아낄 수 있다.

5. Run Pretteir, Run ESLint, Run TypeScript Check

• pnpm으로 prettier, eslint, type check를 진행한다.
• prettier 속도가 가장 빠르며, 코드 스타일 문제를 초기에 즉시 차단할 필요가 있기 때문에 가장 빠른 순서로 있다.
• ESLint는 --max-warnings=0으로 경고도 허용하지 않도록 품질 기준을 강제하도록 했다.
• tsc 체크는 가장 느리고 무거운 동작이다. 어차피 pretteir, eslint가 필수로 지켜져야할 동작이기 때문에 마지막에 있다.

 

---

3. deploy.yml - main vercel 배포

name: Deploy

on:
  push:
    branches: [main]

  # CI 워크플로우가 성공적으로 완료된 후 실행
  workflow_run:
    workflows: ["CI"]
    types: [completed]
    branches: [main]

jobs:
  deploy:
    name: Deploy to Vercel
    # CI 워크플로우가 성공한 경우에만 실행
    if: |
      github.event_name == 'push' || 
      (github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'success')
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v41.1.4
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'
          github-token: ${{ secrets.GITHUB_TOKEN }}

 

1. on 설정

• push 키워드로 main 브랜치에 push할 때 즉시 배포하도록 했다. 1인 프로젝트이기 때문에 간결하다.
• workflow_run으로 CI 워크 플로우가 끝난 후에 동작하도록 했다. 테스트를 통과한 코드만 배포하는 것이다.

2. jobs 설정

• if 조건문이 들어가있다. 'push'로 직접 트리거 되었거나', 'ci가 성공했을 때만' 아래 내용을 실행하도록 한다.
• 이 조건이 없으면 뭔가 꼬여서 CI가 실패해도 Deploy가 실행될 수도 있다.
• vercel이 배포할 소스코드를 checkout으로 가져오고, 버셀로 배포를 진행한다.
  amondnet/vercel-action을 사용한다.
  → vercel cli를 대신 실행해주는 Action으로, 내부에서 프로젝트 식별, 빌드, 배포까지 수행한다.

3. vercel 관련 설정값

• vercel-token : github가 vercel 계정으로 배포할 권한 (필수)
• vercel-org-id, vercel-project-id : 어떤 조직/프로젝트에 배포할 지 명시
• vercel-args: '--prod' : preview가 아닌 production으로 배포
• github-token : 배포 결과를 github pr/commit에 연결하여 배포 상태 표시

여기서 github-token은 내가 따로 설정하지 않아도 되지만 버셀 토큰들은 내가 받아서 레포지토리 설정에 넣어주어야 한다.

 

vercel-token 받기

vercel의 프로필을 누르면 나오는 팝업에서 Settings - Tokens - Create로 얻을 수 있다.

토큰값은 모달로 한 번 보여주고 다시는 안보여주니까 필요하면 잘 간직해야한다.

 

organization id, project id는 조직, 프로젝트의 각 Settings/General/ 에서 얻을 수 있다.

버셀 초기 화면에서 팀 설정, 프로젝트 설정 다 보인다.

organization = team

 

 

---

4. pr-title-check.yml - pr title 검사

name: PR Title Check

on:
  pull_request:
    types: [opened, edited, synchronize]

jobs:
  validate-title:
    name: Validate PR Title
    runs-on: ubuntu-latest
    steps:
      - uses: amannn/action-semantic-pull-request@v6
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          types: |
            feat
            fix
            docs
            style
            refactor
            test
            chore
          requireScope: false
          subjectPattern: ^#\\d+-.+
          subjectPatternError: |
            PR 제목 형식이 올바르지 않습니다.
            예시: feat/#13-이미지-업로드-추가

pr 품질 유지를 위해서 추가했다. 은근 pr 제목에서 실수를 많이해서 넣었다.

 

1. on 설정

• pr 생성, 제목 수정, 커밋 추가마다 검사 한다.

2. amannn/action-semantic-pull-request

• PR 제목을 분석해서 type에 해당하는 형식인지 확인한다.
  허용하는 타입은 간단하게만 두었다.

3. GITHUB_TOKEN

• gihub token을 주어서 PR 정보 조회 권한을 준다.

4. subjectPattern

• feat/#13-description과 같이 /#num을 붙이도록 강제했다. 

 

---

5. 코드래빗 리뷰

코드래빗도 yml로 작성할까 하다가 그냥 웹에서 세팅했다.

https://www.coderabbit.ai/

CodeRabbit: AI Code Reviews

로그인하고 organization 생성해서 github repo를 불러와서 세팅하면 된다.

기본 세팅으로 두면 다이어그램도 그리고 시도 쓰고 이것저것 하는게 많아서 꺼야하는 게 좀 많다.

이건 자세히 알아보지는 않고 다른 프로젝트에 세팅한 거 거의 그대로 가져다 썼다.

세팅마다 타이틀 옆에 붙은 info 버튼으로 툴팁을 띄워줘서 바로 무슨 세팅인지 확인할 수 있다.

---

6. 세팅 완료

 

 

 

 

 

참고

https://github.com/actions/starter-workflows

GitHub - actions/starter-workflows: Accelerating new GitHub Actions workflows