04. Jest, GitHub Actions 적용하기

지난주에 포트폴리오 작업하던 게 모두 끝났다. 그래서 기존에 하던 사이드프로젝트를 진행하려고 하니 tailwind css부터 적용해야 할 것이 너무 많아서 다시 할까 조금 고민 중인데..

일단 할 수 있는 만큼 고쳐서 진행해 보는 것으로.. :)

---

🌿 Eslint 설정

설치하기

npm i --save-dev eslint eslint-config-next @typescript-eslint/eslint-plugin @typescript-eslint/parser

초기화 및 설정 파일 생성(.eslintrc.json)

npx eslint --init

패키지 설치하기

npm i --save-dev eslint eslint-config-next @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

🌿 Prettier 설정

설치하기

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

 

실행 시 코드 품질을 확인한다.

npm run lint

 

위 설정들을 적용하면 포맷 형식이 안 맞아서 오류가 많이 발생한다. 우선 일괄 변경으로 처리하였다.

npx prettier --write .

 

---

🌿 Jest 설정

설치하기

npm install --save-dev jest @types/jest ts-jest ts-node

패키지 설치하기

npm install --save-dev jest @types/jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

프로젝트 루트에 jest.config.ts 추가

import type { Config } from "jest";

const config: Config = {
  preset: "ts-jest",
  testEnvironment: "node",
  testMatch: ["**/__tests__/**/*.(test|spec).ts", "**/?(*.)+(spec|test).ts"],
};

export default config;

package.json 수정

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch"
}

__test__/[xxx].test.ts 파일 생성

정상적으로 테스트를 수행하는지 확인

npm test

---

🌿 GitHub Actions 설정

• Repository로 이동 후 Settings
• Pages > GitHub Actions 선택 > 하단에 Next.js 생기고 > Configure 클릭

VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID 설정

VERCEL_TOKEN

• Vercel 대시보드 > 프로필 > Account Settings > Tokens 새로 추가

VERCEL_ORG_ID, VERCEL_PROJECT_ID

vercel 설치, 로그인, 배포를 차례대로 진행하면 .vercel/project.json 파일이 생성됩니다.

npm i -g vercel
vercel login
vercel

• orgId = VERCEL_ORG_ID
• projectId = VERCEL_PROJECT_ID

Repository 이동 후 Settings > Secrets and variables > Actions에 등록

Workflow 생성

• Actions > New workflow > set up a workflow yourself → 에서 생성
• /.github/workflows 하위에 .yml 파일을 생성

린트 확인, 빌드 테스트, Vercel 배포 이렇게 3가지를 각 파일로 생성했다.

lint.yml

name: Lint Check

on: pull_request

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

				# Install Package
      - name: Install dependencies
        run: npm install

				# Run ESLint
      - name: Run Lint
        run: npm run lint

test.yml

name: Build and Test

on: pull_request

jobs:
  build-test:
    runs-on: ubuntu-latest
    needs: lint  # Lint 작업이 성공해야 실행
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Run Tests
        run: npm test

deploy.yml

name: Vercel Deployment

on:
  push:
    branches:
      - master
  pull_request:
    types:
      - opened
      - synchronize
      - reopened

jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

 

push 후 배포되는 것을 확인할 수 있다.