heisje.devBlog
StoryBook.

[StoryBook] 스토리북 크로마틱으로 자동/무료 배포하기 (React, StoryBook, Workflow)

24. 06. 05.작성자 김희제
JavaScript
StoryBook
React
workflow

개요

스토리북으로 디자인 시스템을 자동으로/무료로 쉽게 배포할 수 있다. 심지어 무료배포가 끝이 아니라, 협업지원과 회귀테스트 도구도 쉽게 설치할 수 있다.

0. 시행착오 전 알면 좋은 것

0-1. 스토리북 튜토리얼 따라하지 않기

스토리북 튜토리얼 : https://storybook.js.org/tutorials/design-systems-for-developers/react/en/introduction/

디자인시스템을 구축하기에 설명이 잘되어 있어 따라 해보았지만, 스토리북이 업데이트 되면서 환경이 많이 바뀌어 오류가 잦아 따라해보는 것을 추천하지 않는다.

  • yarn 1 관련해 에러가 일어났다. 이슈를 참고해보니 yarn 4를 사용하는 것이 좋아보인다. 또한 공식문서는 yarn으로 대부분 되어있다.

0-2. 공식문서는 React Project 세팅 이후에

공식문서대로 가려면 storybook세팅 → React세팅이라 쉽지않다. ts-config, eslint, vite 등 귀찮은 것이 많다. 그래서 React세팅 이후 storybook세팅을 추천한다.

공식문서 : https://storybook.js.org/docs/get-started

1. 시작: React프로젝트 생성

리액트를 완전히 설치 후 스토리북을 설치하는 것이 편하다. 해당 글에서는 아래 블로그 참고해서 설치했다. 다른 방식으로 설치해도 스토리북의 설치법이 간단하고 쉬워 큰 문제 없어보인다.

참고자료: https://mycodings.fly.dev/blog/2022-11-19-using-vite-rather-than-create-react-app-cra#google_vignette

pnpm create vite pnpm i

2. 스토리북 설치

# 스토리북 최신버전 설치. 저는 8이 깔렸습니다.
npx storybook@latest init

어라 스토리북 세팅 끝.

package.json 에 있는 "storybook": "storybook dev -p 6006"실행시켜보자. 예제와 자동 docs, Actions등이 자동으로 설치되었다.

Untitled

3. 크로마틱 설정

크로마틱은 스토리북을 가장 쉽게 배포할 수 있고, 협업 시에도 유용한 도구이다. 크로마틱을 설정해서 협업을 쉽게하기 위해 설치했다.

3-1. 깃허브 레포지토리에 등록

깃허브 레포지토리 생성 후, 만든 프로젝트를 넣어주자

3-2. .gitignore설정

https://www.toptal.com/developers/gitignore/
에서 react, webstorm, storybook 을 설정해주고 생성한다음, 루트에 .gitignore를 생성하고 복붙해준다.

3-3. 크로마틱 프로젝트 생성

참고링크: https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic

  1. 크로마틱 홈페이지chromatic.com에 들어가서 깃허브 계정으로 로그인한다.
  2. Add project를 누르고, Choose from GitHub(왼쪽)을 누르고 동기화 하고싶은 프로젝트를 선택한다.

Untitled

  1. 이런 화면이 나오면, 프로젝트의 터미널에 순차입력한다.

Untitled

pnpm install --save-dev chromatic
 
npx chromatic --project-token=본인토큰
  1. 그다음 Spot UI Change에 대한 화면이 나오는데, 적절히 바꿔주고 다시 npx chromatic --project-token=본인토큰
    를 입력한다.
  2. 토큰을 메모장에 저장해두자. (찾기 어렵다)

3-4. 크로마틱 자동화 배포 설정(CI)

  1. .github/workflows/chromatic.yml 를 생성한 후 다음을 붙여 넣는다.

yarn인 경우 다음 링크에서 확인 https://storybook.js.org/docs/sharing/publish-storybook#setup-ci-to-publish-automatically

# Workflow name
name: 'Chromatic Publish'
 
# Event for the workflow
on: push
 
# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
 
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          # 👇 pnpm 캐시 활용을 위한 설정
          # cache: 'pnpm'
 
      # 👇 pnpm 설치
      - name: Install pnpm
        run: npm install -g pnpm
 
      # 👇 의존성 설치를 pnpm으로 실행
      - name: Install dependencies
        run: pnpm install
 
      # Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        with:
          # Chromatic projectToken,
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

이 파일은 github action 에서 제공하는 기능으로, 개발의 work flow 즉 CI/CD를 쉽고 도와주는 것이다.

위에 보면 ${{ secrets.CHROMATIC_PROJECT_TOKEN }}과 같은 변수를 볼 수 있다. 이것은 깃허브가 지원하는 변수 대치 기능이다. 레포지토리에 비밀 토큰을 설정해두고, 따로 .env파일과 같은 것을 만들지 않아도 자동으로 매핑해준다.

특징은 다음과 같다.

secrets.CHROMATIC_PROJECT_TOKEN: 직접 적어야함

secrets.GITHUB_TOKEN : 따로 설정하지 않아도 깃허브에서 넣어줌

  1. 깃허브 레포지토리의 Settings/Secrets and variables에 들어가 New repository secret 버튼을 선택한 후, Name에 CHROMATIC_PROJECT_TOKEN 내용에 메모장에 저장해두었던 토큰을 붙여넣어주자

Untitled

  1. git에 변경사항을 push해주면 다음처럼 뜨면서, 커밋 옆 노란 점을 누르면 다음처럼 뜰 것이다.

Untitled

이 상황에서 에러가 나는 경우가 많을 수 있다. Details를 클릭해 로그를 확인해 수정해주자. 스토리북8에서는 node18버전 이상을 요구하기 때문에, 에러가 나는 경우가 있다.

자동 배포 성공

기타내용

프로젝트를 로컬에서 빌드하고 실행시켜 볼 수는 있다. 빌드를 하게 되면 root에 storybook-static이 생긴다. 크로마틱에 배포하면 사용할 일 없으므로 .gitignore에 등록해주자

# 로컬 빌드 명령어
pnpm run build-storybook
# 로컬 번들 실행 명령어
pnpm dlx http-server ./storybook-static
조회수: 0