CI 개선하기

[KimKyuHoi]

Pull request

Related issue

• Resolve 프론트엔드 통합 CI 파일 설정 #51 @KimKyuHoi
• Resolve [리팩토링] CI 개선하기 #321 @KimKyuHoi

Motivation and context

Solution

순차적인 태스크를 통해 구축한 CI 파이프라인은 여러 개의 작업으로 나누고 순차적으로 연결하게 되면서, 각 작업이 이전 작업의 완료를 기다리면서 초기화 오버헤드가 누적되어 전체 실행 시간이 늘어나게 되었습니다. (약 1m 43s)

1️⃣fe-ci.yml파일 개선

두 버전의 파이프라인을 비교해보면:

• 첫 번째 버전 (복잡한/섞인 코드): (첫번째 개선했던 version 59s)
  • 설정 단계:
    • fetch-depth: 2로 체크아웃, 두 개의 커밋 이력을 가져오고 있음
    • pnpm/action-setup@v3 (pnpm 버전 8)와 글로벌 pnpm 설치(npm install -g pnpm) 등 중복 및 버전 충돌 가능성이 있음
    • Node.js 버전도 22로 설정되어 있는데, 이는 실제 로컬과 차이가 있을 수 있음
  • 캐싱 설정:
    • 여러 경로(예: ~/.pnpm-store, */node_modules, src/frontend/node_modules)에 대해 복원 시도
    • 이로 인해 캐시 액션 실행 오버헤드가 추가됨
  • 실행 태스크:
    • 의존성 설치 후, turbo를 이용해 typescript, lint, format, build 등 여러 태스크를 한 번에 실행
  • 실행 시간: 평균 약 59초
• 두 번째 버전 (간소화된 코드):
  • 설정 단계:
    • Checkout에서 기본(fetch-depth 기본값, 또는 1)이 사용되어 불필요한 이력을 가져오지 않음
    • pnpm/action-setup@v4를 사용하여 최신 pnpm(9.12.3)으로 일관되게 설정
    • Node.js는 20 버전과 캐시 옵션(cache: 'pnpm', cache-dependency-path)을 사용하여 빌드 도구 캐시를 효과적으로 활용
  • 캐싱 설정:
    • 불필요한 복잡한 캐시 복원 단계를 제거하고, 오직 actions/setup-node에서 제공하는 pnpm 캐시를 활용
    • 따라서 추가 캐시 액션에 의한 오버헤드가 줄어듦
  • 실행 태스크:
    • 의존성 설치 후, turbo를 이용해 필요한 태스크( lint와 build )만 실행
    • 태스크 실행이 단순해져서 오버헤드가 줄어듦
  • 실행 시간: 평균 약 51초

개선된 이유와 효과:

1. 불필요한 중복 제거:
   • 복잡한 캐시 복원 단계(예: 여러 경로에 대해 캐시 복원, 글로벌 pnpm 설치 등)를 제거함으로써 각 스텝 간 오버헤드를 크게 줄였습니다.
2. 일관된 도구 설정:
   • pnpm과 Node.js 버전을 최신 상태(또는 일관된 버전)로 설정하여, 버전 충돌이나 설정 재실행으로 인한 시간이 줄었습니다.
3. 실행 태스크 단순화:
   • 필요한 태스크( lint와 build )만 실행하도록 하여, 불필요한 작업(typescript, format 등)을 생략했습니다.
   • 팀원과 이미 코드 자체내에서 prettier나 타입 같은 경우 코드리뷰를 주고 받는다고 생각하여 typescript, format을 생략하였습니다.
4. 캐시 활용 최적화:
   • 원래 캐시 설정은 복잡한 캐시 복원으로 의존성 설치 속도를 높이려는 목적이었지만, 실제로는 그 단계들이 오버헤드를 발생시켰습니다. 간소화된 코드에서는 actions/setup-node의 기본 pnpm 캐시를 효과적으로 활용하여 설치 속도가 개선되었습니다.

결론:

간소화된 두 번째 버전은 불필요한 단계와 중복된 캐시 설정을 제거함으로써, 전체 파이프라인의 오버헤드를 줄이고 실행 시간을 약 8초 단축(59초 → 51초)하는 효과를 보였습니다. 이처럼 CI 파이프라인에서는 복잡한 캐시 복원보다는 필요한 설정만 간단하게 구성하는 것이 오히려 빠른 실행으로 이어질 수 있습니다.

2️⃣ fe-ci-storybook.yaml파일 개선

• 불필요한 단계 제거 및 단일 스크립트 실행
  • 글로벌 pnpm 설치, 중복된 캐시 복원 단계 등을 제거하고, 의존성 설치 및 빌드 작업을 한 스크립트로 통합하여 오버헤드를 크게 줄였습니다.
• 도구 버전 및 설정 일관화
  • 최신 pnpm(9.12.3)과 Node.js를 일관되게 사용하고, 최소한의 fetch-depth로 체크아웃하여 불필요한 데이터를 가져오지 않음으로써 실행 시간이 단축되었습니다.

이러한 최적화로 인해 전체 실행 시간이 약 40% 개선되어, CI 파이프라인의 효율성이 크게 향상되었습니다.

How has this been tested

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the docs/CONTRIBUTING.md document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[netlify]

✅ Deploy Preview for jootalkpia canceled.

Name	Link
🔨 Latest commit	8d66341
🔍 Latest deploy log	https://app.netlify.com/sites/jootalkpia/deploys/67c9c2a0c4f52100083e9d0d