Storybook 배포하기(Chromatic, Git Action) 👻

이번 협업 프로젝트에서 Storybook을 사용하게 되었는데, 멘토님께서 사용하는 것을 넘어서 Chromatic으로 배포하면 협업 간의 효율성을 향상할 수 있고, 디자인 시스템을 관리하는 부분에서 유용하다고 하셔서 배포를 고민하게 되었다.

그리고 PR 시 자동으로 Chromatic도 배포하도록 설정해보았다. Git Action을 사용하여 배포 주소를 보여주도록 하였다.

Chromatic 사용

Chromatic 이란?

스토리북 관리자가 만든 무료 배포 서비스이다. 스토리북을 클라우드에 안전하게 배포하고 호스팅할 수 있다.

Chromatic에 가입 후, 배포할 프로젝트를 선택한다. 해당 프로젝트에서 명령어를 통해 설치가 가능하다. 현재 pnpm을 사용하고 있으므로, pnpm으로 설치를 진행하였다.

pnpm install --save-dev chromatic

그리고, 다시 터미널에서 chromatic에 배포하면 된다.

npx chromatic --project-token=chpt_ ---

굉장히 쉽게 배포가 끝났다! 현재 프로젝트에 있는 storybook이 정상적으로 보이는 것을 확인할 수 있다.

Git Action을 통한 자동 배포

위의 chpt_ --- 의 토큰을 깃허브에 등록할 수 있다.

해당 레포지토리의 Secrets and variables의 Actions에서 토큰을 등록할 수 있다.

등록 후, .github/workflows 폴더 안에 yml 파일을 생성한다. 공식 문서에서는 chromatic.yml파일로 생성하라고 하였지만, 이름은 크게 문제가 되지 않기에 나는 storybook.yml으로 생성하였다.

코드의 경우 짱잼이의 FE 개발 공부 저장소
블로그를 참고하였다. 해당 블로그의 프로젝트는 yarn을 사용하고 있어서 yml이 yarn 기준으로 되어있는데, 내가 진행하는 프로젝트의 경우 pnpm을 사용하므로 Corepack을 활성화하고, pnpm 명령어로 변경하여 진행하였다.

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: Corepack 활성화
        run: corepack enable

      - name: pnpm 설치
        run: corepack prepare pnpm@latest --activate

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

      - name: 종속성 설치
        if: steps.cache.outputs.cache-hit != 'true'
        run: pnpm 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 }}
      current_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.current_time }}

PR 시 배포가 정상적으로 이루어지는 모습을 확인할 수 있다!

참고

짱잼이의 FE 개발 공부 저장소 - [GitHub Action / Chromatic] 스토리북 PR 미리보기 배포 (feat. yarn)

스토리북(Storybook) 배포하기 공식문서
Storybook Chromatic 으로 배포하기