스토리북 자동 배포하기 (chromatic, github actions)

0) Storybook 설치

npx storybook@latest init

1) https://www.chromatic.com/ 크로마틱 회원가입
2) Get started now 버튼 클릭
3) Choose Github Repo 버튼 클릭해 레포와 동기화 
4) 프로젝트에 chromatic 설치

npm install --save-dev chromatic

yarn add chromatic -D

5) 스토리북 chromatic으로 배포

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

 

Github Action 추가

 
1) package.json에서 chromatic 명령어 제거
2) Chromatic 토큰 설정
  레포지토리의 Settings > Security - Secrets and variables - Actions > New repository secret 버튼 클릭 후
  토큰 이름(yml 파일에 넣어줄 이름)과 크로마틱 토큰 입력
3) .github/workflows/storybook.yml 생성

name: Storybook Deployment
on:
  pull_request:
    branches:
      - develop
jobs:
  storybook:
    runs-on: ubuntu-20.04
    permissions: write-all
    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 }}

      - 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 코멘트에 바로 스토리북 배포 링크 자동 입력
 

---

참고 블로그
https://min-kyung.tistory.com/160