[타타로] GitHub Actions를 활용한 CI 구축

이 전 프로젝트에서는 초기에 vercel을 사용하여 배포를 미리했기 때문에 CI/CD 설정이 따로 필요하지 않았지만

새로 시작하는 프로젝트는 배포를 미리 하지 않았기에 향후 개발 과정을 위해 최소한 CI가 필요하다고 판단하여

GitHub Actions를 활용해 CI 환경을 구축하기로 결정했다!

 

CI/CD 란?

CI (Continuous Integration, 지속적 통합)

코드가 변경될 때마다 자동으로 빌드, 테스트, 코드 검사를 실행하여 코드 품질 유지
여러 개발자가 협업할 때, 문제가 생기지 않도록 예방

 

CD (Continuous Deployment, 지속적 배포)

코드가 CI를 통과하면 자동으로 배포까지 진행하여 빠른 배포 가능

 

---

GitHub Actions를 이용한 CI 파이프라인 구축하기

먼저 CI를 구축해주고자하는 프로젝트 파일의 최상위에 .github폴더를 만들고 그 안에 workflows폴더를 또 만들어준다

그리고 파일명.yml 을 생성해 줄 건데 파일명은 원하는 이름으로 만들면 된다

 

나는 ci.yml로 생성을 했다!

 

그렇다면 파일 경로는 .github/workflows/ci.yml 이렇게 될 것이다

📂 프로젝트 폴더
 ┣ 📂 .github
 ┃ ┗ 📂 workflows
 ┃    ┗ 📜 ci.yml  ← [💡 CI 설정 파일]
 ┣ 📜 package.json
 ┗ 📜 README.md

 

GitHub Action 설정 시 기본 구조

name: Simple CI

on: 
  push:
    branches:
      - main

jobs: 
  build:
    runs-on: ubuntu-latest 

    steps:  
      - name: Checkout code 
        uses: actions/checkout@v3

 

github actions 설정할 때 필수로 포함되어야 하는 요소는 아래와 같다

필수 요소	설명
name	(선택 사항) 워크 플로우의 이름
on	필수 | CI/CD 실행 트리거 (언제 실행될지)
jobs	필수 | 하나 이상의 작업(Job)을 정의
runs-on	필수 | GitHub Actions이 실행될 환경 (예: ubuntu-latest)
steps	필수 | 실행할 단계 (Commands, Scripts)

최소한 on, jobs, runs-on, steps가 있어야 CI가 정상적으로 작동될 수 있지만

실행할 실제 명령어(run)이 없기 때문에 원하는 작업을 추가해줘야 한다

 

그리고 위 기본 구조에서 추가하면 좋은 요소들은 아래 표의 내용과 같다!

추가 요소	설명
strategy	여러 환경에서 병렬 실행 (예: Node.js, 16, 18, 20)
matrix	여러 버전으로 테스트할 때 유용
needs	Job 간의 실행 순서 지정 가능
timeout-minutes	작업이 일정 시간 초과 시 실패 처리

 

---

나의 CI.yml

name: CI Pipeline

on:
  push:
    branches:
      - main
      - develop
      - feature/**
  pull_request:
    branches:
      - main
      - develop
      - feature/**

jobs:
  lint-and-build:
    runs-on: ubuntu-latest

    steps:
      # 1. 코드 체크아웃
      - name: Checkout code
        uses: actions/checkout@v3

      # 2. Node.js 및 pnpm 설정
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 9

      # 3. 의존성 설치
      - name: Install dependencies
        run: pnpm install

      # 4. Prettier 검사
      - name: Run Prettier Check
        run: pnpm format --check

      # 5. ESLint로 코드 검사
      - name: Run ESLint
        run: pnpm lint

      # 6. TypeScript 빌드 검사
      - name: Check TypeScript
        run: pnpm build

내가 프로젝트를 하며 작성한 CI 코드는 이렇고 각 부분을 잘라서 아래에서 설명을 하도록 하겠다!

 

CI 파이프라인 설정

name: CI Pipeline

on:
  push:
    branches:
      - main
      - develop
      - feature/**
  pull_request:
    branches:
      - main
      - develop
      - feature/**

코드가 main,develop,feature/** 브랜치에 Push 될 때 CI가 실행된다

 

feature/**인 이유는 팀원들과 협업할 때 feature/이름/#이슈번호 식으로 브랜치를 생성해서 작업했는데

해당 브랜치 CI를 적용시키기 위해서 뒤에 슬래쉬(/)가 붙는 만큼 *을 붙이면 된다는 것을 알게 되었다!

 

그리고 Push 할 때 뿐만 아니라 PR이 생성될 때도 동일한 CI 검사를 수행한다

 

실행 환경 설정

jobs:
  lint-and-build:
    runs-on: ubuntu-latest

CI 작업(Job) 이름은 lint-and-build로 실행 환경은 최신 Ubuntu 서버로 설정해 줬다

 

코드 체크아웃

steps:
  - name: Checkout code
    uses: actions/checkout@v3

이 과정은 github actions가 실행될 때, 코드를 가져와야 실행이 가능하기 때문에 필수 단계!

 

actions/checkout@v3를 사용하여 최신 코드를 다운받는다

 

Node.js 및 pnpm 환경 설정

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

  - name: Setup pnpm
    uses: pnpm/action-setup@v2
    with:
      version: 9

이건 본인 프로젝트의 Node와 Pnpm 버전을 확인하여 설정을 해주는데 

나는 Node.js 20버전을 설치하여 실행 환경을 설정해 줬고, 패키지 관리자로 pnpm 9 버전을 설치해주는 코드를 입력했다

 

프로젝트 의존성 설치

  - name: Install dependencies
    run: pnpm install

pnpm install을 실행하여 프로젝트의 필요한 패키지를 설치하는 부분

 

이 단계가 없으면 빌드 및 테스트가 실행되지 않는다!

 

Prettier 코드 스타일 검사

  - name: Run Prettier Check
    run: pnpm format --check

Prettier를 실행하여 코드 스타일이 일관적인지 확인

 

코드 스타일이 맞지 않으면 CI가 실패한다

 

ESLint 코드 품질 검사

  - name: Run ESLint
    run: pnpm lint

ESLint를 실행하여 잘못된 코드 스타일이나 오류를 잡아냄

 

코드 퀄리티 유지에 필수적인 단계

 

협업을 하면서 대부분 ESLint에서 CI 걸리는 경우가 가장 많았다.. 필수필수!!!

 

TypeScript 빌드 검사

  - name: Check TypeScript
    run: pnpm build

TypeScript를 빌드하여 컴파일 에러가 없는지 확인

 

만약 pnpm build에서 에러가 발생하면 CI 실패

 

실행 결과 확인 방법

GitHub에서 'Actions' 탭을 클릭하면 실행된 CI 결과를 확인할 수 있다!

 

1. GitHub 레포지토리 > Actions 탭 클릭
2. 최근 실행된 Workflow 선택
3. 각 Job이 성공 또는 실패했는지 확인 가능

 

로컬에서도 동일한 검사를 하고 싶다면 아래의 코드를 입력하면 된다!

pnpm format --check  # Prettier 검사
pnpm lint            # ESLint 검사
pnpm build           # TypeScript 빌드 확인

 

---

CI를 도입함으로써 얻는 장점

• 자동화된 코드 검증 -> 개발자가 실수로 잘못된 코드 푸시하는 것을 방지
• 협업 시 코드 품질 유지 -> 여러 개발자가 동시에 작업해도 코드 스타일 & 빌드 유지 가능
• PR 머지 전에 문제 확인 -> PR이 생성될 때 자동으로 검사하여 안정적인 배포 가능

 

 

결국 이 프로젝트도 후에 Vercel을 이용하여 배포를 하긴 했지만 그 시기를 늦춘 덕분에 github actions를 활용하여 CI 구축을 해보는 경험을 해 볼 수 있었다!

 

다음에는 Vercel과 같은 PaaS 플랫폼을 사용해서 자동 CI/CD 배포를 하는 것이 아닌 CI/CD를 모두 구축하고 직접 프론트를 배포해보는 공부를 해봐야겠다