As-is

• MSA Front-end
  • Component Project
    • Github Action (CI)
    • Private NPM Registry Server (CD)
  • Admin / Worker / Client
    • AWS CodeBuild (CI)
    • AWS S3 & CloudFront (CD)

To-be

• Migration CI/CD

  • Component Project
    • CircleCI (CI)
    • Private NPM Registry Server (CD)
  • Admin / Worker / Client
    • CircleCI (CI)
    • AWS S3 & CloudFront (CD)

• CircleCI 선택 이유

  • 강점으로 성능을 내세움
  • 친절하고 다양한 use-case 가 담긴 문서
  • Orb 지원, 간단한 문법으로 비교적 간단한 스크립트 작성
  • 보일러 플레이트, Webhook, Env variable 등 편의 기능 다수 지원
  • Github 같은 저장소에 익숙하다면 금방 익숙해질 가독성 좋은 UI/UX

• 기존 CI 에서의 해결하고자 했던 문제

  • Build Time 개선이 ****최우선시 됨 (백엔드는 테스트 및 빌드, DB Migtation 까지 무려 30분(!) 이 걸림)
  • Back-end 우선 CI 이주, 프론트엔드 또한 빌드 속도 개선에 동참하기 위해 이주하게 됨
  • Front-end 컴포넌트 빌드 시간
    • 기존 : 4m 40s ~ 7-8m
    • 개선 : 3m 35s ~ ?

• NPM 패키지 배포 스크립트 예시

# .circleci/config.yml

version: 2.1

orbs:
  node: circleci/[email protected]

jobs:
  publish:
    executor:
      name: node/default
      tag: '16.15.0'
    steps:
      - checkout
			- run:
          name: Set Scope
          command: npm set @<SCOPE_ORG_NAME>:registry=https://npm.pkg.github.com
      - run:
          name: Authorize to NPM
          command: npm set //npm.pkg.github.com/:_authToken=$NODE_AUTH_TOKEN
      - run:
          name: Install Dependency
          command: yarn install --frozen-lockfile
      - run:
          name: Build Package
          command: yarn build
      - run:
          name: Publish to Private NPM
          command: npm publish
workflows:
  publish-workflow:
      jobs:
        - publish:
						# organization setting - context 이름, 조직에서 관리되는 환경 변수 사용 가능
						# context 사용하지 않으면 project setting - env variable 에서 설정해줘야 함
						context:
							- <CONTEXT_NAME>
						# filters - OR 연산으로 작동 (따라서, tags & branch 동시에 작동됨)
            filters:
              tags:
                only: /^v\\d+\\.\\d+\\.\\d+$/ # ex) v0.0.101
              branches:
                ignore: /.*/ # 모든 브랜치 ignore trigger

전체적인 평가

• 장점
  • 상대적으로 준수한 성능
  • 매우 다양한 기능과 편의성
  • 문서화 잘되어 있음, 커뮤니티 관리 잘되어 있음
• 단점
  • AWS CodeBuild 와 비교하여 다소 비싼 요금
  • 일부 필요한 피드백의 반영이 느림

Front-end Worker Project 에서 간단한 코드 몇줄 수정한 커밋을 배포했을때의 Build Time 차이

AWS Codebuild 컴퓨팅 환경