스토리북 배포, 배포 자동화, slack 알림 설정하기(Chromatic, github-actions, slack)

jellyjw·2025년 2월 23일

스토리북을 로컬에서만 사용하다가, 배포하여 디자이너와 공유하고 협업해야 할 일이 생겨서 chromatic으로 배포하고, 개발 편의성을 위해 자동화를 진행했다.
까먹지 않고 나중에도 참고하기 위해 기록해보려 한다!

1) Chromatic 배포

chromatic 이란 스토리북을 쉽게 배포할수 있도록 만들어진 도구로, 배포 뿐만 아니라 UI 테스트, 알림 설정등의 기능을 지원한다.

chromatic 설치

먼저 프로젝트에 chromatic을 설치한다.

yarn add -D chromatic

그리고 chromatic에 github 계정으로 로그인 한 뒤, repository를 연동한다.
이 때 프로젝트 토큰이 발급되는데, 환경변수로 관리하여 노출되지 않도록 주의해야 한다.

마지막으로 환경변수로 분리한 토큰을 넣고 해당 명령어를 입력하면 배포가 완료된다.

npx chromatic --project-token={projectToken}
  // or
yarn chromatic --project-token={projectToken}

(package.json 에 스크립트를 추가하여 실행할 수도 있지만, 매번 수동으로 배포할것이 아니기 때문에 스크립트 추가는 진행하지 않고 배포가 되는지 테스트 정도만 진행했다.)

2) 배포 자동화(github-actions)

새로운 컴포넌트를 생성하거나, 기존 스토리 파일들의 변경사항이 있을때마다 수동으로 배포하는것은 비효율적이기 때문에 배포 자동화를 진행했다.

Github Settings > Secrets and variables 에 발급받은 토큰을 환경변수로 등록한다.
(환경변수 이름은 CHROMATIC_PROJECT_TOKEN)

그리고 프로젝트 내부에 .github/workflows/chromatic.yml 파일을 생성하여 설정파일을 작성한다.

# chromatic.yml

# Workflow name
name: 'Chromatic-Storybook-Deployment'

# Event for the workflow
on:
  push:
    paths:
      - 'src/stories/**' # stories 폴더 내부에 변경사항이 있을때에만 동작하도록 설정
    branches:
      - dev # 동작 원하는 브랜치로 변경 필요

jobs:
  test:
    # Operating System
    name: 'Run Chromatic'
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v2 # Update to the latest version of checkout action
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v2 # Example of using a different action
      - name: Cache Dependencies
        uses: actions/cache@v2
        with:
          path: |
            **/node_modules
            ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: yarn
      - name: Run Chromatic
        uses: chromaui/action@v1 # Update to the latest version of Chromatic action
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

특히 배포 액션이 특정 브랜치에 push 되었을때와 stories 폴더 내부에 변경사항이 있을때만 다시 배포되도록 신경써서 작성해 주었다.

배포에 시간이 조금 걸리는 편이어서, dependencies 캐시 설정을 추가해 주었는데 이 부분은 빼도 무방하다.

3) slack 알림설정

chromatic은 배포할 때 url에 random-uuid 가 포함되기 때문에, url이 계속 변경된다.
배포가 정상적으로 완료되었는지, 그리고 배포된 URL이 무엇인지를 매번 직접 확인해서 공유하는것보다 슬랙 채널을 하나 생성해서 알림이 올 수 있도록 설정해 주었다.

먼저 Slack에서 알림받을 채널 생성 후, 해당 채널에 Slack Webhook을 추가한다.