[GitHub Action / Chromatic] 스토리북 PR 미리보기 배포 (feat. yarn)

시작하며...

이번 프로젝트에서 Storybook 을 사용하게 되었다.

 

그런데 공통 컴포넌트를 만들고 Storybook 을 작성한 후 Pull Request 를 올렸을 때, 리뷰어들을 Storybook 에 반영된 것을 바로 시각적으로 확인할 수 없다.

 

그래서 이를 해결하기 위해 GitHub Action 을 사용하여 Storybook 을 Chromatic 배포를 하여 PR 을 올릴 때, 미리 보기 배포 주소를 보여주는 것을 구현하였다.

 

스토리북 pr 미리보기

 

Chromatic 배포

Storybook 은 Chromatic 을 사용하여 배포를 할 수 있다.

Visual testing & review for web user interfaces

 

1. Chromatic 프로젝트 생성

Chromatic 배포를 할 프로젝트를 선택하거나 생성한다.

 

 

2. Chromatic 설치

설치 및 배포

화면에 나온 대로 그대로 복붙 해서 chromatic 를 설치하고,

npm install --save-dev chromatic

 

 

참고로 난 yarn 을 사용했다.

yarn add --dev chromatic

 

 

Storybook 을 chromatic 에 배포한다.

npx chromatic --project-token=chpt_이것저것문자

 

참고로 "chpt_이것저것문자" 가 해당 프로젝트의 chromatic 토큰이다.

 

Github Action 으로 Chromatic 자동 배포

이제 Github Action 을 사용해서 Chromatic 을 PR 을 올릴 때마다 자동 배포할 것이다.

 

1. Chromatic 토큰 등록

위에서 배포하기 위해 사용된 "chpt_이것저것문자" 형태의 토큰을 깃허브에 등록을 해준다.

 

Settings -> Secrets and variables -> Actions 에서 New repository secret 버튼을 클릭하여 

CHROMATIC_PROJECT_TOKEN 라는 name 을 가진 secret 에 "chpt_이것저것문자" 토큰을 등록한다.

(name 다르게 해도 됨)

 

토큰 등록

 

2. .github/workflows 폴더 생성

프로젝트에서 해당 폴더를 생성하고 나는 storybook.yml 이라는 파일을 생성하였다.

 

.github/workflows

 

3. Githib Action 코드 작성

https://min-kyung.tistory.com/160 해당 블로그를 참고해서 만들었다.

 

추가적으로 다른 점은 4가지 정도 있는 것 같다.

• yarn
• onlyChanged / autoAcceptChanges
• comment_tag
• 배포된 시간

 

onlyChaged / autoAcceptChanges

두 가지 속성을 true 로 하였다.

onlyChanged: true
autoAcceptChanges: true

 

onlyChanged

이전에 테스트된 storybook 과 비교하여 변경된 부분만 다시 테스트하여 빌드 시간과 불필요한 리소스 사용을 방지할 수 있다.

 

autoAcceptChanges

변경 사항을 자동으로 승인하여 작업 흐름을 단순화하였다.

 

comment_tag

수정사항이 있어 계속 Pull Request 에 push 를 하면 계속 깃허브 봇이 댓글을 남기게 된다. 그러면 가독성도 좋지 않고 불필요한 주소가 여전히 남아있게 된다.

 

그래서 댓글을 고유하게 식별할 수 있는 comment_tag 를 사용하였다. 그러면 기존 댓글 대체하게 되어 한 개의 댓글에서만 새로운 주소가 계속 업데이트된다.

 

나는 pr 번호로 댓글을 고유하게 식별하였다.

comment_tag: ${{github.event.number}}-storybook

 

배포된 시간

comment tag 를 추가했으니깐 해당 댓글에 있는 링크가 언제 업데이트된 것인지 알려주기 위해 현재 시간을 보여주었다.

- name: 현재 시간 가져오기
  uses: josStorer/get-current-time@v2
  id: current-time
  with:
    format: "YYYY년 MM월 DD일 HH시 mm분 ss초"
    utcOffset: "+09:00"

 

전체코드

전체코드는 다음과 같다.

name: Preview

on:
  pull_request:
    branches: ["main", "develop"]

permissions:
  contents: write
  pages: write
  deployments: write
  id-token: write
  issues: write
  pull-requests: write

jobs:
  storybook-preview:
    runs-on: ubuntu-20.04
    steps:
      - name: 저장소 체크아웃
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: 캐시 종속성
        id: cache
        uses: actions/cache@v3
        with:
          path: "**/node_modules"
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-storybook

      - name: 종속성 설치
        if: steps.cache.outputs.cache-hit != 'true'
        run: yarn install

      - name: Chromatic에 게시
        id: chromatic
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
          onlyChanged: true
          autoAcceptChanges: true

      - name: 현재 시간 가져오기
        uses: josStorer/get-current-time@v2
        id: current-time
        with:
          format: "YYYY년 MM월 DD일 HH시 mm분 ss초"
          utcOffset: "+09:00"

    outputs:
      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
      currnent_time: ${{ steps.current-time.outputs.formattedTime }}

  github-bot-storybook:
    runs-on: ubuntu-latest
    needs: [storybook-preview]
    steps:
      - name: PR 코멘트 남기기
        uses: thollander/actions-comment-pull-request@v2
        with:
          comment_tag: ${{github.event.number}}-storybook
          message: |
            💄 Storybook: ${{ needs.storybook-preview.outputs.storybook_url }}
            🕖 Update: ${{ needs.storybook-preview.outputs.currnent_time }}

 

결과

결과는 잘 나온다.

그러나 단점은 왜인지 모르겠는데 시간이 오래 걸린다... 나중에 다시 리팩토링 해봐야겠다.

 

스토리북 pr 미리보기

 

마치며...

GitHub Action 을 사용해서 Storybook 을 Chromatic 으로 배포하여 PR 올릴 때 미리 보기 배포를 볼 수 있게 하였다.