[React+Typescript] Storybook 자동화 배포하기 - Chromatic, Git Action CI

storybook을 팀원들과 공유하기 위해 배포를 진행해보도록 하겠습니다!

이를 위해 유용한 툴인 Chromatic을 사용해보려고 합니다.

 

Chromatic

Storybook을 위한 cloud 기반 도구 체인

chromatic은 크게 다음과 같은 기능을 지원합니다!

▪️ storybook 배포

▪️ 문서화 - 컴포넌트 라이브러리화

▪️ 공유 workspace - 팀원들과 UI 리뷰 편리

자세한 건 공식문서를 참고해주세요 ⭐️

 

1. 프로젝트에 Chromatic 설정하기

크로마틱 페이지에 접속하여 회원가입을 합니다.

https://www.chromatic.com/

Automatically review, test, and document Storybook

 

Add project > Choose from GitHub

 

 

Storybook을 만들 프로젝트를 선택합니다.

 

 

그 후 프로젝트 루트 위치에서 터미널에 다음 명령어를 입력합니다.

✅ 이때 Project Token은 CI 파트에서 필요하니, 잘 저장해둡니다.

 

 

2. Git Action - 자동화 배포 CI 설정하기

매번 빌드를 따로 하기 귀찮으니, Git Action을 통한 자동화 배포를 설정해줍니다.

 

2-1. ⭐️ Github Secret에 Project Token 추가

프로젝트 github > Settings 탭 > 왼쪽 사이드바 Security의 Secrets and variables > Actions 클릭

 

 

 

오른쪽 New repository secret 버튼을 클릭하고,

▪️ Name : CHROMATIC_PROJECT_TOKEN

▪️ Secret : 아까 저장했던 project token

을 입력하고 Add secret 버튼을 클릭합니다.

✅ project token을 잃어버리신 분들은 chromatic 사이트의 왼쪽 manage 탭에 들어가면 다시 확인하실 수 있습니다.

 

 

 

2-2. Workflow 파일 작성

.github/workflows 경로에 chromatic.yml 파일을 작성합니다.

🔗 Chromatic 자동화 배포 - Git Action workflow 관련 공식문서

 

⚠️ 저는 공식 문서대로 했더니 에러가 나서 fetch-depth: 0 을 추가해주었고,

client 폴더에서 배포가 이루어져야했기 때문에 working-directory를 지정해주었습니다.

# .github/workflows/chromatic.yml
# Workflow 이름
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # 프로젝트의 루트 working directory
    env:
      working-directory: ./client
    # Job steps
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Install Dependencies
      	# npm 이신 분들은 yarn 을 npm 으로 변경해주세요
        run: yarn
        working-directory: ${{ env.working-directory }}
      - uses: chromaui/action@v1
        with:
          workingDir: ${{ env.working-directory }}
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

 

 

해당 파일을 push 해주고 github 프로젝트 페이지 > actions탭에 들어가서 확인했을 때

이렇게 초록색 체크가 생기면 자동화 배포 성공한 겁니다! 🙌

 

 

다시 Chromatic 프로젝트 > 왼쪽 build 탭으로 들어가면 build가 새로 생성된 것을 확인할 수 있습니다!

(저는 계속 빌드를 해서 12개나 쌓였어요!)

 

3. 팀원들과 공유하기

이제 만들었으니 팀원들과 공유를 해야겠죠!

스토리북과 라이브러리 링크는

chromatic 프로젝트 페이지의 왼쪽 manage 탭 > Collaborate > permalinks 에서 확인하실 수 있습니다.

 

storybook 링크

https://<branch이름>--<appID>.chromatic.com

 

storybook library 링크

https://www.chromatic.com/library?appId=<appId>&branch<branch 이름>

 

공유도 끝! 🙌

 

 

 

그럼 오늘도 제 글이 도움이 되었길 바라며 이만 글을 마치겠습니다! 🍅

 

 

 

🔗 참고 링크

Chromatic CLI

https://storybook.js.org/docs/react/sharing/publish-storybook