chromatic으로 storybook 배포하기(with pnpm, turborepo, github actions)

cje·2023년 7월 24일
Turborepochromaticgithub actionsmonorepopnpmstorybook
post-thumbnail

틀릴 수 있음 주의 😅
turborepo 환경에서 chromatic으로 storybook을 배포하는 실습 과정을 그대로 나열한 글입니다.

💥 먼저 해당 레포에 storybook이 설치되어 있어야 합니다.

chromatic

우선 chromatic 페이지에서 로그인 후, chromatic 설정을 원하는 레포를 선택한다.

특정 organization이 보이지 않는다면 하단에 Check permissions를 눌러 해당 organization 접근을 허용시키면 된다.

chromatic 설치

루트에서 터미널에 아래 명령어를 실행시킵니다.
pnpm --filter [설치할 repo] add -D chromatic

예시: pnpm --filter web-ui add -D chromatic


chromatic 배포

설치할 repo로 이동해 아래 명령어를 실행시킵니다.
npx chromatic --project-token <your-project-token>
또는
pnpm dlx chromatic --project-token <your-project-token>


chromatic으로 컴포넌트 변경점 감지하기

chromatic 페이지를 따라가다 보면 한번 더 위 배포 명령어를 실행시키라는 문구가 나온다.
이 때, chromatic이 설치된 폴더 내부에서 컴포넌트의 일부를 변경한 뒤 위 명령어를 실행하면 자동으로 변경점에 대한 비교 및 분석을 시각적으로 보여준다.

chromatic token을 env로 관리하기

chromatic 배포 명령어를 실행하면 chromatic에서 자동으로 package.json에 script를 추가해주는데 token이 노출되므로 token을 .env로 관리하는 것이 좋다.

package.json

"scripts": {
    "chromatic": "npx chromatic --project-token=chpt_0123456789"
},

또는

"scripts": {
    "chromatic": "pnpm dlx chromatic --project-token=chpt_0123456789"
},

우선 chromatic을 설치한 폴더 내부에 script 폴더를 생성한 뒤 script.sh 파일을 생성한다.
packages/web-ui/scripts/chromatic_publish.sh

CHROMATIC_TOKEN=$(grep CHROMATIC_TOKEN .env | cut -d "=" -f2)
npx chromatic --project-token=$CHROMATIC_TOKEN --exit-once-uploaded --allow-console-errors

또는

CHROMATIC_TOKEN=$(grep CHROMATIC_TOKEN .env | cut -d "=" -f2)
pnpm dlx chromatic --project-token=$CHROMATIC_TOKEN --exit-once-uploaded --allow-console-errors

그리고 chromatic을 설치한 폴더 내부에 .env 파일을 생성한다.

루트에 있는 .env을 활용하고 싶었는데 아직 어떻게 하는지 몰라요.😭

.env

CHROMATIC_TOKEN=chpt_0123456789

이후에 루트에서 pnpm --filter web-ui run chromatic으로 확인해보면 정상적으로 실행된다.


루트 package.json에 script 작성하기

{
  "private": true,
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "build-storybook": "turbo run build-storybook --filter=web-ui"
  },
  "devDependencies": {
    "@turbo/gen": "^1.9.7",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "prettier": "^2.5.1",
    "turbo": "latest"
  },
  "packageManager": "pnpm@7.15.0",
  "name": "turborepo-chromatic"
}

github actions

더 나아가 stories.tsx 파일을 변경한 pr을 올렸을 때도 즉각 변경 사항을 확인하고 싶다면 github actions를 추가하면 된다.

secret 추가

레포지토리의 Setting/Secrets and variables/Actions에서 chromatic token을 넣어준다.

workflows 추가

.github/workflows/chromatic.yml를 생성해 yml 파일을 작성해준다.

[에러 1] Build script not found

script를 다음과 같이 수정해 해결할 수 있었다.

"scripts": {
    "chromatic": "bash ./scripts/chromatic_publish.sh"
},

[에러 2] pnpm: command not found

처음에는 Install Dependency 부분에서 pnpm을 찾지 못하는 에러를 마주했다.

Install pnpm step을 추가해 해결할 수 있었다.

name: "Chromatic Deployment"

on:
  pull_request:
    branches: [main]

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
        run: |
          npm install -g pnpm

      - name: Install Dependency
        run: pnpm install -no-frozen-lockfile
        working-directory: packages/web-ui

      - name: Publish Chromatic
        id: chromatic
        uses: chromaui/action@v1
        with:
          workingDir: packages/web-ui/src
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Create comment PR
        uses: thollander/actions-comment-pull-request@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"

[에러 3] Found only one commit

또 다시 변경점을 주어야 한다는 문구이다...

chromatic이 설치된 부분에서 임의의 컴포넌트를 변경한 후
pnpm --filter web-ui run chromatic 실행시킨 뒤 다시 pr을 올리면 해결된다.


[에러 4] Resource not accessible by integration

이제는 되나 싶었는데 Workflow permissions 에러가 발생했다.

레포지토리의 Setting/Actions/General/Workflow permissions에서 다음과 같이 변경한다.

✅ 이제야 초록불ㅠㅠ


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

이렇게만 yml 파일을 작성한다면 storybook과 관련없는 패키지에서 작업한 pr을 올렸을 때도 항상 chromatic이 실행된다.

아래와 같이 트리거할 경로를 적어주어 해당 경로에서만 pr을 올렸을 때 실행시키도록 했다.

on:
  pull_request:
    branches: [main]
    paths:
      - packages/web-ui/src/**

처음에는 이렇게도 작성할까 싶었지만 stories 파일과 관련된 component.tsx가 변경되어도 chromatic 배포가 이루어졌으면 해서 트리거할 폴더를 작성하는 것으로 다시 변경했다.

paths:
  - "**.stories.ts"
  - "**.stories.tsx"

packages/web-ui/src에서 변경된 경우에만 트리거되는 것을 확인할 수 있다.

📌 paths/paths-ignore
상황에 따라 paths-ignore도 활용하면 좋을 것 같다.


pnpm/action-setup

pnpm/GitHub Actions
pnpm과 관련된 github actions 내용을 찾아보니 pnpm에서 제공하는 setup-pnpm이 있었고 이를 적용해보았다.

위 전체 yml 파일에서 Install pnpm step을 아래와 같이 변경했다.

- name: Install pnpm
  uses: pnpm/action-setup@v2
  id: pnpm-install
  with:
    version: 8
    run_install: false

아래는 전체 코드이다.

name: "Chromatic Deployment"

on:
  pull_request:
    branches: [main]
    paths:
      - packages/web-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
        uses: pnpm/action-setup@v2
        id: pnpm-install
        with:
          version: 8
          run_install: false

      - name: Install Dependency
        run: pnpm install -no-frozen-lockfile
        working-directory: packages/web-ui

      - name: Publish Chromatic
        id: chromatic
        uses: chromaui/action@v1
        with:
          workingDir: packages/web-ui/src
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Create comment PR
        uses: thollander/actions-comment-pull-request@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"

pnpm cache

Dependency를 매번 install 하지 않고 caching 하면 더 좋을 것이라 판단했다.

아래는 최종 yml 파일이다.

name: "Chromatic Deployment"

on:
  pull_request:
    branches: [main]
    paths:
      - packages/web-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
        uses: pnpm/action-setup@v2
        id: pnpm-install
        with:
          version: 8
          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/web-ui

      - name: Publish Chromatic
        id: chromatic
        uses: chromaui/action@v1
        with:
          workingDir: packages/web-ui/src
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Create comment PR
        uses: thollander/actions-comment-pull-request@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"

위 yml을 반영하면 아래처럼 처음에는 cache를 찾지 못해 dependency를 install하는데

한번 더 실행하면 cache가 제대로 된 것을 확인할 수 있다.


cache를 이용하지 않은 경우, Install Dependency에서 34초가 소요되었지만

cache를 적용하니 8초로 대폭 줄어든 것을 확인할 수 있었다.


마치며...

pnpm + turborepo 환경에서 chromatic을 이용해 storybook을 배포하는 글이 없어 많이 삽질을 했는데 그래도 제대로 적용되는 것 같아 기쁘다.....🫠


참고한 글

Automate Chromatic with GitHub Actions

Storybook Deploy with Chromatic

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

pnpm/action-setup

참고할 글

Monorepos

profile
cje
💭
이전 포스트

[좋은 코드, 나쁜 코드] 8장. 코드를 모듈화하라

다음 포스트

chromatic으로 storybook을 배포할 때 의존된 패키지가 있는 경우(with turborepo, tailwind, github actions)

3개의 댓글

comment-user-thumbnail
김정민
2023년 7월 25일

좋은 글 감사합니다~~👏

답글 달기
comment-user-thumbnail
김석진
2023년 9월 25일

사랑해요

1개의 답글