cleanUrl: /blogs/github-actions-matrix
description: "평균 빌드 속도 43% 개선"
ogImage: "<https://nashil.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F82f738b5-a0a1-4979-bc81-2daaaacec47b%2Fbf81a943-587e-4925-bb44-c237a4f1d224%2Fnashu.png?table=block&id=2d971f08-b0d9-440a-9e4d-0cfdfb7b600e&spaceId=82f738b5-a0a1-4979-bc81-2daaaacec47b&width=1440&userId=&cache=v2>"
utterances: 
  repo: choinashil/utterances

프론트엔드 앱들을 모노레포로 운영한지도 2년. 앱이 점점 늘어나자 CI 레벨에서 불편한 점들이 발생했다.

현재 우리 팀에서 빌드를 위해 사용하는 CI 는 아래 두 가지이다.

1. Github Actions: PR을 올릴 때 머지 전 빌드에 문제가 없는지 확인하기 위한 용도
2. Jenkins: 통합 테스트 환경이나 운영 환경에 배포하기 위한 용도

이번 글에서는 이 중 1번에 대한 개선 과정을 작성하고자 한다.

개선 전 (AS-IS)

작업자가 PR을 오픈하거나 push를 할 때마다 nx의 affected 커맨드를 이용해 이번 PR로 인해 영향을 받는 앱을 판단한 후 해당 앱들만 빌드하도록 CI를 구축해놓았다.

기존 yml 파일의 주요 코드는 다음과 같다.

name: Build Affected Apps

on:
  pull_request:
    types: [opened, synchronize, reopened]
    
jobs:
  build:
		...
	  steps:
		  ...
		  - name: Build affected apps
			  run: |
				  # 1
          APPS=("store-manager" "editor" "website" "review" "qna" "board" "coupon" "point" "message"...)

					# 2
          AFFECTED_APPS=$(npx nx affected:apps --plain --base=HEAD^ --head=HEAD) || (echo "Error running nx affected:apps" && exit 1)

          echo "💡 Affected Apps: $AFFECTED_APPS"

          BUILD_ERROR_OCCURRED=false

					# 3
          for APP in "${APPS[@]}"; do
            if echo "$AFFECTED_APPS" | grep -q $APP; then
              echo "🟢 - Building $APP"
	            yarn build $APP dev || BUILD_ERROR_OCCURRED=true
            else
              echo "🛑 - Skipping $APP"
            fi
          done

          if [ "$BUILD_ERROR_OCCURRED" = true ]; then
            echo "Script completed with errors"
            exit 1
          else
            echo "Script completed successfully"
          fi

1. 프로젝트에 존재하는 앱 목록
2. nx affected 커맨드를 사용해 이번 변경사항으로 인해 영향 받은 앱 파악
3. APPS를 순회하면서 영향 받은 앱은 빌드하고, 영향 받지 않았다면 스킵