Github Actions 설정
깃허브 액션 핸즈온
깃허브 액션은 빌드, 테스트, 배포 파이프라인을 자동화할 수 있는 CI 및 CD 플랫폼
깃허브 액션은 깃허브 저장소에
yaml파일을 배치시키는것 만으로 테스트를 자동화할 수 있음
워크플로우 파일 작성
깃허브 액션에서 워크프로는 일련의 작업들로 구성된 자동화 프로세스를 의미
.github/workflows라는 디렉터리를 생성하고 워크플로 파일을 배치한다.이 작업만으로 깃허브 액션을 실행시킬 수 있음
name: CI
on: push # 저장소에 푸시할 때마다 실행됨
jobs:
test:
runs-on: ubuntu-latest # 운영체제는 최신 버전의 우분투 사용
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3 # CI환경에선 Node.js 사용
with:
node-version: 18
- name: Install dependencies # CI 환경에 package.json을 설치
run: npm ci
- name: Jest unit test # CI 환경에서 npm test 실행
run: npm test # 테스트 실행 스크립트테스트가 실패한 풀 리퀘스트를 병합할 수 없도록 설정하기
새로 생성한 저장소는 테스트가 실패한 상태여도 병합이 가능하다.
의도치 않은 병합이 일어나지 않게 하려면 [Settings] -> [Branches] 페이지에서 브랜치 보호 규칙을 설정해야함
규칙을 적용하려는 브랜치명 패턴을
Branch name pattern에 입력Require status checks to pass before merging에 체크상태 검사 검색 박스에 작업 이름을 입력해서 해당 작업을 상태 검사 대상으로 선택할 수 있음
yml 파일에 지정했던 작업 이름을 입력하고 목록에서 선택
페이지 하단에 [Create] 버튼을 클릭해서 설정 완료
워크플로 파일 작성법
워크플로를 실행시킬 트리거와 워크플로의 내용을 기술하는 작업을 조합하면 CI/CD 파이프라인을 구축 가능
이름(name)
워크플로 파일 맨 위에 있는
name은 워크플로를 잘 나타내는 이름으로 작성이름은 실행 결과 등을 쉽게 식별할 수 있도록 지어야함
PR이나 액션 이력에서 식별을 위한 레이블로 사용됨
name: Test UI환경 변수(env)
워크플로 파일 상단에 위치한
env워크플로에 있는 작업에서 참조할 수 있는 환경 변수들을 정의한다.
주로 ID, 비밀번호, 토큰 등 민감한 크리덴셜 정보를 참조할 때 사용함
저장소마다 있는
Actions secrets에 환경 변수를 설정하면 워크플로 파일에서 참조 가능${{ secrets.환경 변수명 }}형식의 템플릿 문자열해당 방식으로
Actions.secrets에 저장된 정보를 참조함
env:
REG_NOTIFY_CLIENT_ID: asdf
AWS_BUCKET_NAME: asdf트리거(on)
워크플로를 실행할 타이밍을 지정
on: push # 푸시할 때 마다 워크플로 실행모노레포로 구성된 저장소에서는 다르게 지정해야 한다.
테스트 대상과 상관없는 파일이 푸시됐을 때에도 워크플로가 실행되기 떄문
특정 패키지에 포함된 소스코드가 푸시됐을 때만 워크플로가 실행되도록 세부 경로를 지정해야함
on:
push:
paths:
- packages/app/**작업(jobs)
워크플로에서 수행할 작업들을 단계별로 지정함
runs-on
작업을 실행할 가상 환경의 운영체제를 지정
상황에 맞는 여러 운영체제를 선택할 수 있으며 선택 가능한 운영체제는 공식문서에서 확인
runs-on: ubuntu-lateststeps
작업에서 실행할 모든 스텝을 그룹화함
그룹에는 개별 액션, 또는 셸 스크립트를 포함시킬 수 있음
steps:uses
스탭에서 액션을 사용할 때 선언한다.
actions/checkout은 가장 많이 사용되는 액션CI 환경에서 저장소에 접근할 때 사용하는 액션
대부분 작업에서 사용됨
- uses: actions/checkout@v3프론트엔드 프로젝트는
actions/setup-node도 대부분의 작업에서 사용함버전을 같이 지정하면 특정 버전의 Node.js가 CI 환경에서 설치됨
- uses: actions/setup-node@v3
with:
node-version: 18run
CI 환경에서 실행할 커맨드를 작성
프로젝트에서 실행할 수 있는 커맨드를 모두 사용할 수 있으므로 package.json에 작성한 npm scripts도 실행 가능
run: npm test작업을 병렬처리해서 워크플로 최적화하기
작업을 실행한 결과물(설치한 모듈 혹은 빌드된 파일 등)은 캐싱이 가능하다.
캐시를 활용하면 실행 시간을 단축시킬 수 있고 여러 작업에서 결과물을 공유할 수 있음
깃허브 액션의 워크플로는 여러 작업의 병렬처리도 가능함
모든 작업이 완료될 때까지 걸리는 시간을 단축 가능
병렬 및 캐싱처리하여 작업을 재조합하면 실행 시간을 단축시킬 수 있음
테스트 코드가 많아질수록 작업을 병렬처리한 효과도 극대화 된다.
한개의 작업만 가진 워크플로
name: Test UI
on: push
env:
REG_NOTIFY_CLIENT_ID: ${{ secrets.REG_NOTIFY_CLIENT_ID }}
AWS_BUCKET_NAME: ${{ secrets.AWS_BUCKET_NAME }}
jobs:
tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@master
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ap-northeast-2
- name: Install dependencies # 의존 모듈 설치
run: npm ci
- name: Run Type Check # 타입 검사 실행
run: npm run typecheck
- name: Run Lint
run: npm run lint
- name: Run Unit Tests
run: npm test
- name: Build Storybook
run: npm run storybook:build --quiet
- name: RUn Storybook Tests
run: npm run storybook:ci
- name: Run Storycap
run: npm run vrt:snapshot
- name: Run reg-suit
run: npm run vrt:run작업 간 병렬처리 계획하기
의존관계에 따라 병렬처리
개발환경과 동일하게 CI 환경에
node_modules를 설치하면 다음과 같은 테스크를 실행할 수 있게 됨세 가지 테스크에는 의존 관계가 없기에 각각을 하나의 작업으로 분할해서 병렬처리 가능
타입 검사, Lint 실행
단위 테스트 실행
스토리북 빌드
빌드된 스토리북을 대상으로 테스트하는 작업
UI 테스트와 시각적 회귀 테스트는 서로 의존하지 않기 때문에 병렬처리
스토리북을 활용한 UI 테스트
스토리북을 활용한 시각적 회귀 테스트
# 스텝별로 병렬처리 가능
jobs:
install: ... # 1.의존 모듈 설치
check: ... # 2.타입 검사, Lint
unit-test: ... # 2.단위 테스트
build-storybook: ... # 2.스토리북 빌드
test-storybook: ... # 3.스토리북을 활용한 UI 테스트
vrt-storybook: ... # 3.스토리북을 활용한 시각적 회귀 테스트작업 간 의존관계 구성하기
워크플로를 구성하려면 작업들 간 의존관계를 설정해야 함
작업의
needs라는 프로퍼티에 의존하는 작업 명칭을 지정하면 의존하는 작업이 완료될 때까지 해당작업을 실행하지 않고 대기한다.이것이 작업간 의존관계 설정
jobs:
install: ...
check: ...
needs: install
steps: ...
unit-test: ...
needs: install
steps: ...
build-storybook: ...
needs: install
steps: ...
test-storybook: ...
needs: build-storybook
steps: ...
vrt-storybook: ...
needs: build-storybook
steps: ...의존하는 작업들 간에 캐시 활용하기
모든 작업에는 프로젝트에 설치된
node_moduels가 필요함따라서
npm ci로node_modules를 먼저 설치해야 하지만 단순히 설치한다고 해서 후속 작업에서 공유할 수 없음깃허브 액션이 지원하는
actions/cache를 사용하면 지정하 명칭의 에셋을 캐싱하거나 캐싱된 에셋을 불러올 수 있음한 작업에서 캐싱한 에셋을 다른 작업에서 불러올 수 있게되면 독립된 여러 작업 간에 에셋을 공유할 수 있게됨
install부분에if문으로 작성한 조건은 'node_modules_cache라는 ID로 특정 가능한 캐시가 없다면' 이다.즉, 캐시가 없으면 설치를 시작하고 캐시가 있으면 스텝을 종료한다는 의미
path에는 캐시의 경로를,key에는 캐시에 사용할 키를 지정hasFiles함수를 사용해package-lock.json내용으로 해시 키를 생성함package-lock.json에 갱신된 내용이 없으면 캐시를 재활용하게 됨
jobs:
install:
runs-on: ubuntu:latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Cache node_modules # 캐시가 있는지 검사
uses: actions/cache@v3
id: node_modules_cache
with:
path: node_modules # 캐싱할 의존 모듈
key: ${{ runner.os }}-${{ hasFiles('**/package-lock.json') }}
- name: Install dependencies # 캐시가 없으면 설치
if: steps.node_modules_cache.outputs.cache-hit != 'true'
run: npm ci캐싱한 node_modules 불러오기
check라고 명명한 작업에는 타입 검사와 Lint를 실행하고 있음Restore node_modeuls에서는install에서 캐싱했던node_modules를 불러온다.캐싱했을 때와 코드는 동일하지만 지금은 워킹 디렉터리에 캐싱한 에셋을 불러오는 역할임
동시에 병렬처리하는
unit-test에서도 같은 방식으로 캐시를 불러와 테스트 실행
jobs:
install: ...
check:
nddes: install
runs-on: ubuntu:latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Restore node_modules # 캐싱한 의존 모듈을 불러옴
id: node_modules_cache
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-${{ hasFiles('**/package-lock.json') }}
- name: Run Type Check # 타입검사 실행
run: npm run typecheck
- name: Run Lint # Lint 실행
run: npm run lint빌드된 스토리북 캐싱하기
스토리북 테스트를 안정적으로 실행하려면 미리 CI 환경에서 스토리북을 빌드 한 후,
node_modules설치와 동일하게 후속 작업을 위해 빌드된 스토리북을 캐싱지금은 캐시용 키로
github.sha를 사용해서 같은 커밋 내에서만 캐시를 공유 가능
jobs:
install: ...
check: ...
unit-test: ...
build-storybook:
needs: install
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Restore node_modules # 캐싱한 의존 모듈을 불러옴
id: node_modules_cache
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-${{ hasFiles('**/package-lock.json') }}
- name: Cache Storybook # 빌드된 스토리북을 캐싱
uses: actions/cache@v3
id: storybook_cache
with:
path: storybook-static
key: ${{ runner.os }}-${{ github.sha }}
- name: Build Storybook # 캐싱한 빌드 결과물을 불러옴
if: steps.storybook_cache.outputs.cache-hit != 'true'
run: npm run storybook:build --quiet빌드된 스토리북을 불러와서 테스트에 활용
끝으로 빌드된 스토리북을 불러와서 테스트를 실행
빌드된 스토리북은 UI 테스트 및 시각적 회귀 테스트에 사용됨
jobs:
install: ...
check: ...
unit-test: ...
build-storybook: ...
test-storybook:
needs: build-storybook
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Restore node_modules # 캐싱한 의존 모듈을 불러옴
id: node_modules_cache
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-${{ hasFiles('**/package-lock.json') }}
- name: Restore Storybook # 캐싱한 빌드된 스토리북을 불러옴
id: storybook_cache
uses: actions/cache@v3
with:
path: storybook-static
key: ${{ runner.os }}-${{ github.sha }}
- name: Install Playwright # 스토리북을 활용한 UI 테스트에 필요한 의존 모듈
run: npx playwright install --with-deps chromium
- name: Run Storybook Tests
run: npm run storybook:ciLast updated