Chromatic으로 Storybook 지속적 배포하기 (Github Actions)

TL;DR

1. 스토리북을 도입하게 된 계기
2. chromatic으로 스토리북 배포하기
3. Github Actions를 이용해 Pull Reqeust에서 바로 컴포넌트 확인하기

 

스토리북을 도입하게 된 계기

협업을 진행하면서 여러 사람이 컴포넌트를 개발하게 되었습니다.

아래와 같은 컴포넌트 코드들이 PR로 올라오기 시작했습니다.

 

그래서 이게 어떻게 생긴 컴포넌트인데?

PR을 열심히 작성하더라도 위 코드를 보고 쉽게 머리에 컴포넌트를 떠올리기는 어렵습니다.

게다가, PR을 열심히 작성한다는 것은 개발자가 매번 꼼꼼히 작성해야하고 PR을 읽는 개발자는 또 신경써서 읽어야합니다. 불필요하게 높은 소통 비용이 발생하고 있었습니다.

그리고 매번 pull을 받아서 개발 서버를 실행하고 어떤 UI인지 확인하고 제대로 작동하는지 손수 테스트를 진행해야했습니다.

 

이러한 점들을 해결하고자 스토리북을 도입하기로 하였습니다.

 

스토리북 도입 이전의 문제점

1. 코드를 보고 컴포넌트를 떠올리기 어려움
2. PR을 꼼꼼하게 작성하고 읽는데 사용하는 불필요하게 높은 소통 비용
3. 컴포넌트의 UI와 테스트를 위해 직접 실행해봐야하는 불편함

 

chromatic으로 스토리북 배포하기

chromatic?

스토리북 관리자가 만든 무료 배포 서비스로 스토리북을 간단하게 배포할 수 있습니다.

vercel, netflify로도 스토리북을 배포할 수 있지만 chromatic은 컴포넌트 미리보기, 빌드 과정 등을 스토리북에 최적화해서 보여주기 때문에 chromatic에 배포하였습니다.

 

1. chromatic 가입하기

Github로 연동해서 chromatic에 간단하게 가입할 수 있습니다.

 

https://www.chromatic.com/

Automatically review, test, and document Storybook

 

Choose Github Repo 버튼을 누르면 깃허브 레포지토리와 동기화할 수 있습니다.

 

2. 설치하기

깃허브 레포지토리와 동기화가 끝나면 아래와 같은 화면이 보여집니다.

1. chromatic을 설치해줍니다.

npm install --save-dev chromatic

2. 스토리북을 chromatic에 배포합니다.

npx chromatic --project-token <your-project-token>

 

간단하게 스토리북을 배포할 수 있습니다.

 

배포된 스토리북

 

이를 통해 스토리북 도입 이전의 문제점 중 1번과 2번의 문제점을 해결할 수 있게 되었습니다.

스토리북 도입 이전의 문제점

1. 코드를 보고 컴포넌트를 떠올리기 어려움
2. PR을 꼼꼼하게 작성하고 읽는데 사용하는 불필요하게 높은 소통 비용
3. 컴포넌트의 UI와 테스트를 위해 직접 실행해봐야하는 불편함

---

Pull Request에서 컴포넌트 UI를 확인할 수 없을까?

하지만 아직 스토리북 도입 이전의 문제점 중 마지막 문제점인 컴포넌트의 UI와 테스트를 위해 직접 실행해봐야하는 불편함에 대해서는 해결하지 못했습니다.

 

스토리북을 도입했지만 여전히 아래와 같은 불편함이 발생하고 있었습니다.

 

코드를 pull 받고 → 스토리북을 로컬에서 실행하고 → 컴포넌트가 제대로 작동하는지 확인

어쩐지 스토리북의 장점을 극대화하지 못하는 방법인 것 같습니다

 

Github Action 추가하기

PR로 올라온 컴포넌트 변경사항을 배포된 환경에서 확인할 수 있도록 Github Action을 추가해보겠습니다.

 

크로마틱 명령어를 생성하면 아래와 같은 내용이 터미널에 나타납니다.
Github Action으로 CI를 사용할 것이기 때문에 package.json에서 chromatic 명령어는 제거해주었습니다.

 

 

1. Chromatic 토큰 설정하기

레포지토리의 Settings > Secrets > New repository secret에 크로마틱 토큰을 넣어줍니다.

Settings > Secrets > New repository secret

yml 파일에 넣어줄 이름으로 작성해주시면 됩니다.

2. .github/workflows/storybook.yml 생성

• develop 브랜치에 PR이 올라가면 스토리북이 배포되도록 설정하였습니다.

name: Storybook Deployment
run-name: ${{ github.actor }}의 스토리북 배포
on:
  pull_request:
    branches:
      - develop
jobs:
  storybook:
    runs-on: ubuntu-20.04
    outputs:
      status: ${{ job.status }}
    steps:
      - name: checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: cache dependencies
        id: cache
        uses: actions/cache@v3
        with:
          path: "**/node_modules"
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-storybook

      - name: depedency install
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm ci

      - name: publish to chromatic
        id: chromatic
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

 

 

추가로 PR 코멘트로 바로 스토리북 배포 링크를 확인할 수 있도록 액션을 추가해주었습니다.

...

jobs:
  storybook:
    runs-on: ubuntu-20.04
    outputs:
      status: ${{ job.status }}
    steps:
    
     ...
     
      - name: comment PR
        uses: thollander/actions-comment-pull-request@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"

 

위 액션을 실행하면 develop 브랜치에 PR이 올라가면 깃허브 봇이 코멘트를 남겨줍니다

액션 실행 시, 깃허브 봇이 PR에 코멘트를 남겨줍니다.

 

참고로 코멘트를 남기기 위해서는 Workflow permissions를 Read and write로 설정해주어야 정상적으로 액션이 작동합니다

Settings > Actions > General

 

---

참고

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/

Storybook Tutorials

https://www.chromatic.com/docs/github-actions

Introduction • Chromatic docs