[ turborepo 설정] storybook Chromatic CLI 으로 배포하는 법

👩🏻‍💻 테스트로 클릭하면 버튼색이 바뀌는 컴포넌트를 storybook으로 만들고, chromatic CLI로 배포해 보자.
🧾 해당 프로젝트 설정은 다음의 버전들을 기준으로 작성되었습니다.
✓ pnpm 9.0.0 
✓ node >= 20
✓ next 14.2.4
✓ react ^18
✓ chormatic ^11.5.5
✓ storybook ^8.2.2

torybook Chromatic CLI 배포

[이전글] 2024.07.11 - [👩🏻‍💻 dev] - [turboRepo scss] Cannot find module './mybutton.module.scss' or its corresponding type declarations.ts(2307)

[turboRepo scss] Cannot find module './mybutton.module.scss' or its corresponding type declarations.ts(2307)

 

 

 

1. 설치

pnpm --filter storybook add -D chromatic

 

이렇게 설치해 주면 apps/storybook의 package.json에 다음과 같이 설치가 된다.

 

2. 설정

- apps/storybook/chromatic.config.json

apps/storybook에 chromatic.config.json파일을 만들어주자.

설정 필수 항목은 project token이고, 나머지 자세한 설정(ci, 테스트 연동 등)도 가능하다.

 

// ./chromatic.config.json

{
  "projectId": "Project:...",
  "projectToken": "chpt_설치_시_부여받는_토큰"
}

- apps/package.json

빌드를 실행해 줄 명령어도 package.json에 추가해 주자.

// ...생략
"scripts": {
    "dev": "storybook dev -p 6006",
    "build:storybook": "storybook build",
    "chromatic": "pnpm dlx chromatic --project-token=chpt_설치_시_부여받는_토큰" // ➕ 추가
  },
// ...생략

 

🤔 저렇게 토큰값이 노출되는 게 영 찝찝하다... .env로 설정해 주자.

.env 설정

- apps/storybook/turbo.json

{
  "extends": ["//"],
  "tasks": {
    "build:storybook": {
      "dependsOn": ["^build:storybook"],
      "env": ["CHROMATIC_PROJECT_TOKEN"], 	// ➕ 토큰 이름 추가
      "outputs": ["storybook-static/**"]
    }
  }
}

- apps/storybook/. env

CHROMATIC_PROJECT_TOKEN = chpt_로_시작하는_프로젝트_토큰 // ➕ 추가

- apps/storybook/package.json

 "scripts": {
    "dev": "storybook dev -p 6006",
    "build:storybook": "storybook build",
    "chromatic": "pnpm dlx chromatic --project-token" // ➕ 수정
  },

 

package.json에 스토리북 빌드 명령어를 "build:storybook": "storybook build"로 설정했기 때문에 

chromatic.config.json도 설정을 해주자.

- apps/storybook/chromatic.config.json

{
  "projectId": "Project:",
  "buildScriptName": "build:storybook"
}

 

여기까지 설정을 해주면 pnpm --filter storybook run chromatic 명령어로 배포를 다음 링크들에서 확인 가능하다.

스토리북 : https://6695ee4a0eafb3b77660fc29-bognizhtkl.chromatic.com/

빌드 상세 내역 : https://www.chromatic.com/build?appId=6695ee4a0eafb3b77660fc29&number=11

(선택) 변경 자동 적용 여부 설정

 

위의 에러가 발생할 수 있다.

--auto-accept-changes는 변경 사항을 즉시 자동으로 반영할지 명시해야 해서 발생한 것이다.

--exit-zero-on-changes는 변경 사항과 무관하게 커멘드를 성공시킬지를 명시해야 한다.

두 옵션의 값은 true로 설정하면 일괄 적용한다는 것이고, 특정 브랜치를 명시하면 해당 브랜치에만 적용이 되도록 설정 가능하다.

 

현재는 테스트 컴포넌트들이므로 둘 다 true로 설정해 주자.

- apps/storybook/chromatic.config.json

{
  "projectId": "Project:",
  "buildScriptName": "build:storybook",
  "exitZeroOnChanges": true, // ➕ 추가
  "autoAcceptChanges": true // ➕ 추가
}

 

다음과 같이 배포된 사이트에서 확인할 수 있다.

 

https://www.chromatic.com/component?appId=6695ee4a0eafb3b77660fc29&csfId=example-mybutton&buildNumber=11&k=66960bf1ae1da1c6453b47b4-1200px-interactive-true&h=2&b=-1&inviteToken=chpi_d86ac5ca27c14a51b0978fe4f663ff8a

Sign in

 

(선택) github actions와 연동하기

마무리하기 전에 github actions와 연동해서 메인 브랜치에 pr을 생성할 때 chromatic 배포를 작업 자동화를 추가해 보자.

1. 깃허브에 CHROMATIC_PROJECT_TOKEN 토큰 추가하기

2. workflow 추가

프로젝트 최상단에 .github/workflows/chromatic.yaml을 추가하자.

name: "Chromatic Deployment"

on:
  pull_request:
    branches: [main]
    paths:
      - packages/design-system/src/** # ➕ ui 컴포넌트들을 만들고 있는 경로의 src

jobs:
  chromatic-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18.16.0"

      - name: Install pnpm            # ➕ pnpm 설치
        uses: pnpm/action-setup@v2
        id: pnpm-install
        with:
          version: 9
          run_install: false

      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      - name: Install Dependency
        run: pnpm install -no-frozen-lockfile
        working-directory: packages/design-system     # ➕ 의존성 설치, 컴포넌트들을 만들고 있는 경로

      - name: Publish Chromatic
        id: chromatic
        uses: chromaui/action@v1
        with:
          workingDir: apps/storybook
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # ➕ 깃허브 secret에 추가해줬던 CHROMATIC_PROJECT_TOKEN
          token: ${{ secrets.SECRET_GITHUB }} # ➕ 깃허브 SECRET 추가해주기, 없다면 만들어야한다.

      - name: Create comment PR
        uses: thollander/actions-comment-pull-request@v1
        env:
          GITHUB_TOKEN: ${{ secrets.SECRET_GITHUB }}
        with:
          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}" # 배포한 스토리북 chromatic url

 

 

Actions탭에서 해당 작업이 성공했음을 확인할 수 있다.

 

그리고 작성했던 pr에 chromatic 배포 url 도 확인 가능하다.

 

---

🍀 마치면서

아직 생소한 모노레포 동작 방식 때문인지 조금 헤맸다.
다음에는 디자인 시스템을 어떻게 만들어줄 지에 대해 고민하고, 컴포넌트를 만들어 chromatic으로 스토리북 배포에 추가해 보자.

---

📚 References

https://www.chromatic.com/docs/cli/

Introduction • Chromatic docs

https://www.chromatic.com/docs/github-actions/

Introduction • Chromatic docs

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

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

https://github.com/pnpm/action-setup

GitHub - pnpm/action-setup: Install pnpm package manager