Where we left off

지난 시간에는 Github actions를 활용하여 다음과 같은 과정을 수행하는 workflow를 구현하였습니다.
1. 특정 브랜치에 PR을 시도를 감지한다
2. 서버와 클라이언트에 의존성 모듈들을 설치한다
3. 서버와 클라이언트에서 eslint를 체크한다
4. 빌드를 확인한다

name : build + eslint

# 이벤트를 발생시킬 트리거
on:
	pull_request: # pull request, push 등등 가능
			branches: # branches로 지정할 수 있음
				- develop 
jobs: # 실행할 작업들! 병렬적으로 실행된다는걸 의식하자
	check:
		name: check #이름을 적어줘야 branch protection 설정에서 찾아줄 수 있다 
		runs-on: ubuntu-latest
		steps:
      - uses: actions/checkout@v3 
      - name: Install client dependencies # client 폴더에서 npm 설치
        run : |
            cd client
            npm install 
      - name: Install server dependencies # server 폴더에서 npm 설치
        run : |
            cd server
            npm install
            
      - name: Check eslint # eslint 돌리기
        run : |
            ./client/node_modules/.bin/eslint client/src --ext .js,.jsx
            ./server/node_modules/.bin/eslint server --ext .js,.jsx
            
      - name: Run client build check # 클라이언트 돌리기
        run: |
            cd client
            npm run build

      - name: Run server build check # 서버 빌드 돌리기
        run: |
            cd server
            npm run build

너무 느려

답답한 경우가 있다

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1c879625-ca7a-4c25-9ce5-55228661650b/25231.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1c879625-ca7a-4c25-9ce5-55228661650b/25231.png" width="40px" /> PR 올림 → 빌드 기다림(2분 이상) →

빌드 완료 → 통과 못했네? → 빌드 기다림 →

빌드 완료 → 아 맞다 콘솔 로그 지워야하는데 → 또 빌드 …

</aside>

위처럼 check를 한번 하는데 시간이 최소 2분이 걸리다 보니, PR을 올렸을 때 추가 커밋이 생기거나, eslint에서 걸리거나 하면 단순 작업들이 10분 이상 걸리는 일이 비일비재하고 작업 효율을 많이 떨어뜨렸다.
불편하기도 하고, 프로젝트의 규모가 커질수록 체크시간은 훨씬 늘어날 것이라고 판단되어 이부분에 대한 개선이 필요하다고 판단되었다

Workflow 속도를 올려보자 - Node-modules 캐싱

첫번째로 개선할 수 있다고 생각한 요소는 node_modules를 설치하는 부분이다.
- workflow가 돌아갈 때 마다 매번 node_modules 설치에 1분 이상의 시간이 소요되고 있다.
- 추가적인 package가 설치되지 않는 이상 매번 같은 의존성 모듈들을 설치하고있었고, 이부분을 caching하는 기능을 Github actions에서는 지원하고 있다
- 얘네들은 병렬로도 못함

check:
        name: check
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v3

            - name: Setup Node.js
              uses: actions/setup-node@v2

변경된 부분
=======================================================================================
            - name: Cache client node_modules
              id: cache-client
							# 위의 checkout 과 유사한 github에서 제공하는 actions
              uses: actions/cache@v3
              with:
									# 캐싱할 대상을 지정합니다. 모노레포이기때문에 client 폴더로 진입
                  path: client/node_modules
									# 캐시의 변경 기준은 package-lock.json
                  key: npm-packages-client-${{hashFiles('**/package-lock.json')}}
									#이걸 넣어야 캐시 실패했을때 이전 캐시를 사용합니다 안그러면 계속 쌓여요
									restore-keys: |
                      npm-packages-client-

            - name: Install client dependencies
							# 이전 package-lock.json과 현재가 동일할 경우 cache hit
              if: steps.cache-client.outputs.cache-hit != 'true'
              run: cd client && npm install

            - name: Cache server node_modules
              id: cache-server
              uses: actions/cache@v3
              with:
                  path: server/node_modules
                  key: npm-packages-server-${{hashFiles('**/package-lock.json')}}
									restore-keys: |
                      npm-packages-server-

            - name: Install server dependencies
              if: steps.cache-server.outputs.cache-hit != 'true'
              run: cd server && npm install
=======================================================================================

            - name: Check eslint
              run: |
                  ./client/node_modules/.bin/eslint client/src --ext .ts,.tsx
                  ./server/node_modules/.bin/eslint server/src --ext .ts,.tsx
            - name: Run client build check
              run: |
                  cd client
                  npm run build
            - name: Run server build check
              run: |
                  cd server
                  npm run build

Workflow 속도를 올려보자 - 서버/클라이언트 분할

두번째로 개선할 수 있을것이라고 생각한 부분은 서버 코드와 클라이언트 코드 체크의 분리

백엔드 작업만 진행했는데, 클라이언트 코드까지 eslint, 빌드…😓

프론트엔드 코드만 바꿨는데, 백엔드 코드까지 빌드와 lint..

⇒ 바뀐 코드를 감지해서, 원하는 job만 실행시킬수는 없을까?

변경된 파일들을 감지해주는 actions도 누군가가 만들어서 제공하고 있습니다
dorny/paths-filter@v2
일단 서버에서 진행하는 작업과 클라이언트에서 진행하는 작업들을 묶어보자

name: build + eslint check

on:
    pull_request:
        branches:
            - ci-test

jobs:
    check:
        name: check
        runs-on: ubuntu-latest
        outputs:
            client: ${{steps.filter.outputs.client}}
            server: ${{steps.filter.outputs.server}}
        steps:
            - uses: dorny/paths-filter@v2
              id: filter
							# 클라이언트/서버 폴더 내부에 변경된 파일이 있다면
							# outputs.로 내보내줍니다
              with:
                  filters: |
                      client:
                        - 'client/**'
                      server:
                        - 'server/**'

		# 클라이언트에서 변경된 파일이 있을경우에 실행되는 job
    client:
        needs: check
        if: ${{needs.check.outputs.client=='true'}}
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v3

            - name: Nodejs Setup
              uses: actions/setup-node@v2

            - name: Cache client node modules
              id: cache-client
              uses: actions/cache@v3
              with:
                  path: client/node_modules
                  key: npm-packages-client-${{hashFiles('**/package-lock.json')}}
									restore-keys: |
                      npm-packages-client-

            - name: Install client dependencies
              if: ${{steps.cache-client.outputs.cache-hit != 'true'}}
              run: cd client && npm install

            - name: Client eslint check
              run: ./client/node_modules/.bin/eslint client/src --ext .ts,.tsx

            - name: Run client build check
              run: cd client && npm run build

		# 서버에서 변경된 파일이 감지될경우 실행되는 job
    server:
        needs: check
        if: ${{needs.check.outputs.server=='true'}}
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v3

            - name: Nodejs Setup
              uses: actions/setup-node@v2

            - name: Cache server node modules
              id: cache-server
              uses: actions/cache@v3
              with:
                  path: server/node_modules
                  key: npm-packages-server-${{hashFiles('**/package-lock.json')}}
									restore-keys: |
                      npm-packages-server-

            - name: Install server dependencies
              if: ${{steps.cache-server.outputs.cache-hit != 'true'}}
              run: cd server && npm install

            - name: server eslint check
              run: ./server/node_modules/.bin/eslint server/src --ext .ts,.tsx

            - name: Run server build check
              run: cd server && npm run build

수정 결과

Untitled

🤔만약 테스트코드 등을 추가한다면 어떻게 해야 할까?

Unit Test / E2E Test

Workflow status check가 status 브랜치 설정에 안보여요

이게 workflow 등록을 했는데 안나오는 경우가 있다

출처

https://blog.banksalad.com/tech/github-action-npm-cache/