[React] Deep Dive 모던 리액트(23) gitHub Action CI

728x90

CI(Continuous Integration)

소프트웨어를 구성하는 코드는 여러 개발자들이 계속해서 기여하게 된다. 이러한 코드의 변화를 관리하는 저장소에서 코드들을 지속적으로 빌드하고 테스트하는 과정을 CI라고한다. 즉 저장소에서 변화가 있을 때마다 전체 소프트웨어의 정합성을 확인하기 위한 작업을 실행해야 한다.

이 과정들은 테스트,빌드,정적 분석, 보안 취약점 분석 등이 있다.

이 CI환경 구축을 위해서 가장 자주사용된 솔루션은 젠킨스였다. 이 젠킨스는 별도 서버를 구축해야 하고 서버안에서도 젠킨스를 설치해야 하며 저장소와 연결하는 작업 등 설치 및 유지보수가 번거롭다는 단점이 있었다.

github action을 사용하면 깃헙 저장소와 함께 사용하여 위 작업을 쉽게 할 수 있다. 깃헙에 푸시가 일어나거나 PR이 일어나면 빌드나 테스트 등의 작업을 자동적으로 수행할 수 있게 해준다.

이 github action을 활용하면 CI/CI ( Continuous Integration / Continuous Delevery ) 솔루션을 쉽게 대체할 수 있다.

깃허브 액션의 기본 개념

러너(runner) : 작성된 깃허브 액션이 실행되는 서버

액션(action) : 러너에서 실행되는 하나의 작업단위 (yaml 파일)

이벤트(event) : 깃헙 액션의 실행을 일으키는 이벤트 (PR,issues,push,schedule)

잡(jobs) : 하나의 러너에서 실행되는 여러 스텝의 모음

스탭(steps) : 잡 내부에서 일어나는 하나하나의 작업

즉, 깃헙 액션은 스텝들을 엮어 잡을 만들고 이 잡들은 병렬적으로 실행되며 이 잡들을 엮은 것을 액션이라고 한다.

깃허브 액션 예시

name : chapter7 build //액션 이름
run-name : ${{github. actor }} has been added new commit. 
//액션이 실행될 때 구별할 수 있는 타이틀이름

on: //언제 액션이 실행할지 정의
	push:
    	branches-ignore:
        	- 'main' //main 브렌치에 push가 일어난 경우

jobs:
	build: //build는 예약어가 아니라 job의 이름을 정해주는 것이다.
    	runs-on: ubuntu-latest //어느 환경에서 작업을 실행할 것인지 설정
        steps:
        	- uses : actions/checkout@v3 //해당 브랜치의 마지막 커밋을 기준으로 체크아웃
            - uses : actions/setup-node@v3 //해당 러너에 Node.js를 설치
              with:
                node-version: 16 //Node.js의 버전 설정
            - name: 'install dependencies' //스텝의 이름 설정
              workiing-directory: ./chapter7/my-app
              run: npm ci
            - name: 'build'
              working-directory: ./chapter7/my-app
              run: npm run build

위 액션은 Next.js의 빌드를 확인하는 CI액션이다.

브랜치 보호 규칙

머지하기 전에 꼭 성공해야 하는 액션이 있따면 저장소에 브랜치 보호 규칙을 추가할 수 있다.

Settings -> Code and automation -> Branches로 이동한 후

Add branch protection rule을 눌러보자.

예를들어서 머지전에 상태체크를 필수로 하거나 브랜치가 최신 내용인지 확인하는 등의 옵션을 넣을 수 있따. 또 액션의 파일명을 선택하고 저장한다면 해당 액션의 성공 유무를 확인한 이후 머지가 진행될지 결정할 수 있다.

즉 테스트,빌드와 같은 CI가 성공한 코드만 푸시될 수 있도록 설정하는게 가능하다

유용한 액션 / 깃허브 앱 가져다 쓰기

먼저 깃헙에서 제공하는 기본 액션들을 보자.

1. actions/checkout : 깃헙 저장소를 체크아웃하는 액션

2. action/setup-node : Node.js를 설치하는 액션

3. action/github-script : GitHub API가 제공하는 기능을 사용할 수 있게 도와주는 액션

4. action/stale : 오래된 이슈나 PR을 자동으로 닫거나 커뮤니케이션 못하게 닫음

5. action/dependency-review-action : 의존성 그래프에 대한 변경이 되었을때 실행되는 액션

6. action/codeql-action : 깃헙 코드분석 솔루션인 code-ql을 활용하여 코드 내 취약점을 분석해줌

calibreapp/images-actions

저장소에 있는 이미지를 최적화하는 액션

lirantal/is-website-vulnerable

특정 웹사이트를 방문하여 해당 웹사이트에 라이브러리 취약점이 존재하는지 확인하는 깃허브 액션

Lighthouse CI

구글에서 제공하는 액션으로 웹 성능 지표인 라이트하우스를 CI기반으로 실행할 수 있도록 도와주는 도구