Monorepo에서 Chromatic으로 Storybook 배포하기

TurboRepo로 구성한 프로젝트에서 크로마틱(Chromatic)으로 스토리북을 배포하는 방법을 정리하고자 합니다.

 

 

---

 

준비물

• github repo
• storybook

 

chromatic

chromatic과 github 연동

Chromatic에 로그인한 후, 배포할 레포지토리를 선택하세요. Chromatic을 통해 스토리북을 자동으로 배포하고 Visual Regression Test도 수행할 수 있습니다.

 

chromatic 설치

스토리북이 설치된 레포지토리로 이동해 Chromatic을 설치합니다.

pnpm --filter {스토리북이 설치된 레포} add -D chromatic

 

chromatic 배포

설치된 레포지토리에서 Chromatic을 빌드하고 배포합니다. 아래 명령어에서 {project-token} 부분은 Chromatic에서 제공하는 프로젝트 토큰을 입력합니다.

 

pnpm dlx chromatic --project-token={project-token}

 

root의 package.json에서 최종적으로 빌드스크립트를 추가하여 사용할 수 있습니다.

  "scripts": {
    "build:storybook": "pnpm run --filter storybook chromatic"
  },

 

 

---

 

Github Actions를 사용해 지속적 배포 (CI) 설정하기

스토리북의 변경사항이 있을 때마다 자동으로 배포되도록 GitHub Actions를 설정해 보겠습니다. 이렇게 하면 PR(pull request)을 올렸을 때도 변경사항을 즉각 확인할 수 있습니다.

 

secret 추가

레포지토리의 Setting/Secrets and variables/Actions에서 chromatic token을 넣어줍니다.
이제 이렇게 저장된 값은 workflow에서 ${{secrets.VARIABLE_NAME}} 형태로 접근이 가능합니다.

 

workflows 추가

프로젝트 루트에 ./github/workflows/chromatic.yml 파일을 생성하고 다음과 같이 작성합니다.

name: 'Storybook Deployment'
run-name: ${{ github.actor }}의 스토리북 배포
on:
  pull_request:
    branches: ['main']
    paths:
      - apps/storybook/**
      - packages/ui/src/**

jobs:
  chromatic-deploy:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
      contents: read
    strategy:
      matrix:
        node-version: [20.x]
    steps:
      # 체크아웃
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      # pnpm 설정
      - name: Install pnpm
        uses: pnpm/action-setup@v4
        id: pnpm-install
        with:
          run_install: false

      # Node.js 설정
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          registry-url: 'https://registry.npmjs.org'
          cache: 'pnpm'

      # 의존성 설치
      - name: Install Dependency
        run: pnpm install --no-frozen-lockfile # 의존성 버전 불일치 허용
        working-directory: apps/storybook

      # storybook 배포
      - name: Publish Chromatic
        id: chromatic
        uses: chromaui/action@latest
        with:
          workingDir: apps/storybook
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          onlyChanged: true # TurboSnap 활성화
          externals: packages/(ui/src)/** # 외부 의존성 경로

      # 현재 시간
      - name: Get Current Time
        id: current-time
        uses: josStorer/get-current-time@v2
        with:
          format: YYYY-MM-DDTHH-mm-ss
          utcOffset: '+09:00'

      # PR에 코멘트 추가
      - name: Create comment PR
        uses: thollander/actions-comment-pull-request@v3
        with:
          message: |
            🚀 Storybook: ${{ steps.chromatic.outputs.storybookUrl }}
            🕖 Updated At: ${{ steps.current-time.outputs.formattedTime }}
          comment-tag: ${{github.event.number}}-storybook
          mode: 'recreate' # 기존 코멘트를 삭제하고 새로 생성

 

특정 paths에서 github actions 실행시키기

storybook과 관련있는 패키지가 변경되었을 때만 action이 실행되게 하기 위해선 아래와 같이 트리거할 경로를 적어줍니다.

on:
  pull_request:
    branches: ['main']
    paths:
      - apps/storybook/**
      - packages/ui/src/**

 

pnpm 설정

스토리북을 빌드하기 위해 pnpm을 설정해야 합니다. 이를 위해 pnpm/action-setup을 사용해 pnpm을 설치합니다.

- name: Install pnpm
  uses: pnpm/action-setup@v4
  id: pnpm-install
  with:
    run_install: false

 

이때 package.json의 packageManager 버전에 맞춰 설치됩니다.

 

pnpm cache

Chromatic 배포를 위해 Node.js를 설정해야 합니다. actions/setup-node를 사용해 Node.js를 설치하고, pnpm을 위한 캐시 설정도 추가합니다.

on:
  - pull_request

jobs:
  cache-and-install:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          version: 9
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

 

의존성 설치

스토리북이 설치된 경로에 있는 의존성을 설치합니다. 이때, --no-frozen-lockfile 옵션을 사용하여 잠금 파일의 버전 불일치를 허용합니다.

      - name: Install Dependency
        run: pnpm install --no-frozen-lockfile
        working-directory: apps/storybook

 

현재 시간 추가하기

배포 시간 기록을 위해 현재 시간을 얻어오는 단계를 추가합니다.

      - name: Get Current Time
        id: current-time
        uses: josStorer/get-current-time@v2
        with:
          format: YYYY-MM-DDTHH-mm-ss
          utcOffset: '+09:00'

 

Chromatic 배포

스토리북을 Chromatic에 배포합니다. 이 단계에서는 projectToken과 함께 workingDir 옵션을 설정하여 해당 경로에서 배포 작업을 수행합니다. onlyChanged 옵션을 사용해 TurboSnap 기능을 활성화하고, 외부 의존성 경로도 설정합니다.

      - name: Publish Chromatic
        id: chromatic
        uses: chromaui/action@latest
        with:
          workingDir: apps/storybook
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          onlyChanged: true # TurboSnap 활성화
          externals: packages/(ui/src)/** # 외부 의존성 경로

 

 

PR에 코멘트 추가하기

스토리북 배포 URL과 업데이트된 시간을 PR에 코멘트로 추가합니다. thollander/actions-comment-pull-request를 사용해 코멘트를 생성하며, 기존 코멘트는 삭제하고 새로 생성하도록 설정합니다.

      - name: Create comment PR
        uses: thollander/actions-comment-pull-request@v3
        with:
          message: |
            🚀 Storybook: ${{ steps.chromatic.outputs.storybookUrl }}
            🕖 Updated At: ${{ steps.current-time.outputs.formattedTime }}
          comment-tag: ${{github.event.number}}-storybook
          mode: 'recreate' # 기존 코멘트를 삭제하고 새로 생성

 

 

이제 스토리북에 변경사항이 생길 때마다 스토리북이 재배포되는 걸 확인할 수 있습니다.