React-Storybook을 Chromatic으로 배포하는 과정에서 CI 도구로써 GitHub Actions를 쓰기도 하는 것을 알게 되었고, Chromatic과 storybook docs 내에 있는 actions 코드를 그대로 복붙하니 자꾸 오류가 나게 되어 구체적으로 actions에 대해 파고 들어보게 되었다. 뭐가 뭔지를 알아야 오류를 고칠테니..!
GitHub Actions
GitHub Actions 는 GitHub에서 제공하는 CI/CD 서비스이다. 빌드, 테스트, 배포 파이프라인을 자동화하여 유지보수를 보다 편리하게 해준다는 장점이 있다.
또한, GitHub Actions를 사용하면 GitHub 레포에서 손쉽게 CI/CD 결과를 확인하고 관리할 수 있으며, YAML 포맷을 사용하기 때문에 가독성이 높다.
Workflow
workflow 는 actions의 최상위 개념으로, ‘작업의 흐름’을 뜻하며 특정 목적을 위한 일련의 실행 트리거, 환경, 기능들을 모두 포함한다.
github / workflows / actions.yml
main, develop 브랜치에 커밋이 푸시되거나 pull requests 가 만들어지고 동기화될 때 워크플로우가 실행되도록 하는 yaml 코드 예시)
on:
push:
branches:
- main
- develop
pull_request :Job
workflow가 실행될 때 수행할 job 을 정의한다.
독립된 환경에서 돌아가는 하나의 처리 단위를 의미하며, workflow에는 여러 개의 job을 정의해줄 수 있는데, 각각의 Job는 다른 job들과는 별개의 독립적인 환경에서 실행된다.
Job에서 필수적으로 정의해야 할 속성 2가지
runs-on: job을 실행환 환경을 정의steps: job이 실행될 순서를 정의
예시 코드)
jobs:
echo-hello-world:
runs-on: ubuntu-latest
name: Echo Hello World Job
steps:
- uses: actions/checkout@v2
- run: echo Hello World!echo-hello-world 라는 하나의 job을 실행하기 위해
ubuntu-latest 라는 환경에서 실행되며,
actions/checkout@v2 와 echo Hello World! 명령어를 차례로 실행한다는 뜻.
Workflow 관리
workflow 이벤트 명령어
github actions에서 제공하는 다양한 workflow 이벤트 관련 명령어들은 다음 사이트에서 확인 가능하다.
Events that trigger workflows - GitHub Docs
Github secrets로 변수 관리
비밀번호나 인증서, 토큰 등과 같은 민감한 정보는 Github 내 secrets로 저장하여 환경 변수로 사용 가능하다.
jobs:
example-job:
runs-on: unbuntu-latest
steps:
- name: Retrieve secret
# 환경변수로 저장하고
env:
super_secret: ${{ secrets.SUPERSECRET }}
# 저장한 환경변수를 활용한다.
run: |
example-command "$super_secret"의존적인 작업 구성
이전에 특정 작업이 먼저 끝난 후에 실행시키고 싶다면 needs 키워드를 사용하여 작업이 의존성을 갖도록 지정할 수 있다.
jobs:
setup:
runs-on: ubuntu-latest
steps:
- run: ./setup_server.sh
build:
needs: setup # setup 이후 실행되도록
runs-on: ubuntu-latest
steps:
- run: ./build_server.sh
test:
needs: build # build 이후 실행되도록
runs-on: ubuntu-latest
steps:
- run: ./test_server.sh종속성 캐싱
action이 실행될 때마다 필요한 파일들을 전부 불러오기 때문에 작업 속도가 느려지는 경험을 하게 될텐데, 각각의 작업들이 종속성을 재사용하는 경우 파일들을 캐싱하여 성능을 높이는 방법을 활용할 수 있다. 캐시를 생성할 경우, 해당 저장소의 모든 워크 플로우에서 사용 가능하다.
jobs:
example-job:
steps:
- name: Cache node modules
uses: actions/cache@v2
env:
cache-name: cache-node-modules
with:
# `~/.npm` 디렉토리를 캐시해 성능을 높인다
path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}-⇒ 캐싱에 대해서는 좀 더 깊게 공부할 필요가 있음!
Storybook chromatic action code 뜯어보기
# .github/workflows/chromatic.yml
# Workflow name
name: 'Chromatic'
# Event for the workflow
on: push
# List of jobs
jobs:
chromatic-deployment:
# Operating System
runs-on: ubuntu-latest
# Job steps
steps:
- uses: actions/checkout@v1
- name: Install dependencies
# 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
run: yarn
# 👇 Adds Chromatic as a step in the workflow
- name: Publish to Chromatic
uses: chromaui/action@v1
# Chromatic GitHub Action options
with:
# 👇 Chromatic projectToken, refer to the manage page to obtain it.
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}Chromatic이라는 워크플로우 생성- 어느 브랜치든 상관 없이
push를 할 시에 실행되도록 설정 jobs로 실행될 행동들을 정의ubuntu-latest환경에서 실행될 예정actions/checkout@v1: 해당 명령어는 체크아웃 액션으로,{소유자}/{저장소명}@{참조차}형태로 명시함. Github에서 제공하는 체크아웃 액션의 소유자는actions이고, 저장소 이름은checkout이며, 현재 포스팅 시점에서 사용 가능한 최신 버전은v1임을 뜻함.
name: job의 이름을 지정💡 storybook에서 제공하는 docs는 yarn을 기준으로 설명하는 게 많기 때문에 제공하는 코드에도
run: yarn으로 되어 있다.
근데 내 레포는npm을 사용하기 때문에npm install로 수정해야 할 것 같다!projectToken은 github secrets내 변수로 저장하여 환경변수로 사용.
actions/checkout@v1와 관련된 문서들을 더 찾아보고, 오류가 더 이상 나지 않을 때까지 코드를 만져보고 추후에는 캐싱까지 해봐야할 것 같다.
