[storybook] 스토리북 chromatic, github actions 사용해서 자동으로 배포하기

개발 환경

- React: 18.2.0 (vite 5.0.8.)

- Storybook: 8.0.2.

 

참고

https://velog.io/@93minki/Storybook-Chromatic-%EC%9C%BC%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

Storybook Chromatic 으로 배포하기

https://min-kyung.tistory.com/160

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

https://velog.io/@qmflf556/storybook-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC

storybook 자동 배포

https://www.chromatic.com/docs/storybook/setup/

Introduction • Chromatic docs

 

 

진행과정

1. chromatic (크로마틱 설치)

chromatic 공식 홈페이지 이미지 캡쳐

 

npm install --save-dev chromatic
npx chromatic --project-token='본인 토큰'

 

크로마틱 가입(깃허브 아이디로 가입하는게 편함) > 크로마틱 설치 > 스토리북 배포

 

 

위 과정만 진행해도 스토리북 배포가 완료된다.

하지만 매번 이 과정을 반복하기엔 불편함이 있기에 깃허브 액션을 사용해서

배포 자동화를 해보려고 한다.

 

2. github-actions

name: 'Chromatic-Storybook Deployment'
run-name: deploy storybook by ${{ github.actor }}

on:
  pull_request:
    branches:
      - deploy
    paths:
      - '**.stories.ts'
      - '**.stories.tsx'
      - '**.mdx'

jobs:
  chromatic-storybook-deploy:
    runs-on: ubuntu-latest
    outputs:
      status: ${{ job.status }}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Cache npm
        id: npm-cache
        uses: actions/cache@v4
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      - if: steps.npm-cache.outputs.cache-hit != 'true'
        run: npm ci

      - name: Run Chromatic
        id: chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
          exitZeroOnChanges: true

      - name: Publish Summary
        run: echo -e "| Results |  |\n| --- | --- |\n| Build Results | ${{ steps.chromatic.outputs.buildUrl }} |\n| Storybook Preview | ${{ steps.chromatic.outputs.storybookUrl }} |\n| Component Count | ${{ steps.chromatic.outputs.componentCount }} |" >> $GITHUB_STEP_SUMMARY

      - name: Discord Webhook
        uses: tsickert/discord-webhook@v5.3.0
        with:
          webhook-url: ${{ secrets.DISCORD_WEBHOOK }}
          content: 'storybook link -> ${{ steps.chromatic.outputs.storybookUrl }}'

 

깃허브 액션을 처음 사용해보는 것이라 위 블로그들을 많이 참고했다.

deploy 브랜치에 스토리 파일들이 PR이 되면 자동으로 배포가 되도록 설정하였고,

배포가 완료되면 크로마틱 빌드 결과 페이지, 스토리북 배포링크, 컴포넌트 개수 값이 표로 보이도록 하였다.

(이 부분은 깃허브 이슈 페이지를 참고하였다.)

 

참고한 블로그와 다른점은 디스코드 웹 훅을 추가하였다는 점이다.

 

 

위 이미지처럼 원래 배포가 완료되면 PR 페이지에 코멘트를 보내도록 설정해서

배포된 스토리북 링크를 디스코드로 알림을 받고있었다.

 

디스코드 개인 서버에서만 모든 알림이 오도록 해두었는데,

스토리북 배포 링크 같은 경우에는 팀원 모두 확인해보면 좋을 것 같아서

스터디 팀 디스코드 채널에도 스토리북 배포 링크만 알림이 오게 하고싶었다.

 

 

그래서 디스코드 웹훅을 설정해서 PR 코멘트만 받도록 했는데,

계속 메세지가 안왔다... 뭔가 다른걸 해줘야하는 건지 모르겠으나 실패해서

 

 

위 코드에 디스코드 웹훅 내용을 추가해주었더니 성공했다.

 

 

코드를 보면 secrets.~~이 적힌 부분이 있는데

그 부분은 깃허브에 Security > Secrets and variables > Actions에 등록을 해주어야 한다.

코드에 작성한 이름 그대로 키캆을 설정해줘야 한다.

 

크로마틱 토큰은 처음에 크로마틱 배포할 때 받았던 값을 등록해주면 되고,

디스코드 웹후크는 디스코드의 webhooks 링크를 넣어주면 된다.

디스코드 웹후크 링크를 등록할 때 주의점은 깃허브 페이지에 웹훅 링크를 등록할때처럼

웹후크 URL 마지막에 '/github'를 넣어줘야하는 줄 알았는데 아니었다.

그냥 웹후크 URL을 그대로 넣어주면 된다.

 

 

그걸 몰라서 몇 번 오류를 봤었다... 그래도 해결해서 다행🥹