• 참고 | Automate Chromatic with GitHub Actions
  워크서버개발팀의 GitHub Actions 적용기
  Github Actions으로 배포 자동화하기
  

---

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-hell-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 와 관련된 문서들을 더 찾아보고, 오류가 더 이상 나지 않을 때까지 코드를 만져보고 추후에는 캐싱까지 해봐야할 것 같다.