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 설정 > 브랜치 규칙을 추가한다.

   

CI 캐싱 기능

uses: actions/cache@v4
with:
  # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
  path: |
    ~/.npm
    ${{ github.workspace }}/.next/cache
  # Generate a new cache whenever packages or source files change.
  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
  # If source files changed but packages didn't, rebuild from a prior cache.
  restore-keys: |
    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

최종 코드

name: 'CI'
on:
  pull_request:
    types: [opened, synchronize, reopened]
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
      name: Checkout repository
      
    - name: Cache dependencies
      uses: actions/cache@v4
      with:
        path: |
          ~/.npm
          ${{ github.workspace }}/.next/cache
        key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
        restore-keys: |
          ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

    - name: Install dependencies
      run: yarn install --frozen-lockfile

    - name: Check typescript
      run: yarn type:check

    - name: Check eslint
      run: yarn lint

PR

link_preview

Reference

https://velog.io/@rkd028/Next-js-Serverless로-Next-js-배포-및-자동화하기

https://velog.io/@qkralsgud1324/Next.js-프로젝트-Vercel로-배포-및-CICD-구축

https://nextjs.org/docs/pages/building-your-application/deploying/ci-build-caching#github-actions

https://kyoung-jnn.com/posts/nextjs-build-optimization-in-ci