Chromatic 배포 옵션 추가하기

현재 Storybook 배포를 chromatic을 사용하고 있으며, github actions를 통해 자동 배포를 해주고 있다.

 

여기서 계속 신경쓰였던 것은

1. 스토리북에 변경사항이 없음에도 깃허브에 코드를 업데이트할 때마다 chromatic에 지속적으로 새롭게 배포가 됨
2. 새롭게 배포가 된 것을 매번 approve해줘야 storybook 배포가 성공함

 

해결 방법은 간단했다.

1. 코드 업데이트가 있을 때만 재배포하기 : onlyChanged

https://www.chromatic.com/docs/github-actions/#enable-turbosnap

Introduction • Chromatic docs

onlyChanged: true

 

를 yml 코드에 추가해주면 된다.

그럼 스토리북 코드에 변경 사항이 있을 때에만 새롭게 빌드와 배포가 진행된다.

 

2. 자동 approve: autoAcceptChanges

https://www.chromatic.com/docs/github-actions/#github-squashrebase-merge-and-the-main-branch

Introduction • Chromatic docs

autoAcceptChanges: true

 

이걸 추가하면 새롭게 배포됐을 때 자동으로 변경사항이 accept된다.

 

최종 코드

name: "Chromatic Deployment"

on:
  push:
    branches: [ "develop" ]

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          onlyChanged: true
          autoAcceptChanges: true

      - name: Install dependencies
        run: yarn install

      - name: Publish to Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}