AS-IS

• 현재, CI가 설정이 되어있지 않다. 즉, 배포 과정 전까지 에러가 발생하는 지 알 수가 없다.

TO-BE

• PR을 올릴 시, CI를 먼저 테스트할 수 있도록 한다.

자료조사

Next.js - CI Build Caching

Vercel

Vercel을 사용한다면 알아서 CI/CD를 해주기는 한다.

개발

Typescript와 lint CI

1. script에 두 스크립트를 추가한다.

   // package.json
   {
   	// ..
   	"lint": "next lint",
     "type:check": "tsc --noEmit",
   }
   

2. GitHub Actions를 추가한다

   name: 'CI'
   on:
     pull_request:
       types: [opened, synchronize, reopened]
   jobs:
     ci:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
   
         - name: Install dependencies
           run: yarn install --frozen-lockfile
   
         - name: Check typescript
           run: yarn type:check
   
         - name: Check eslint
           run: yarn lint
   

GitHub 규칙 설정

1. GitHub 설정 > 브랜치 규칙을 추가한다.