Storybook chromatic 사용하여 배포하기

현재 Storybook을 사용하여 컴포넌트 문서화를 하고 있는데, 다른 팀원들에게 공유가 되어야 하는 상황이므로 간단하게 배포할 수는 없을까 하다가 chromatic이나  netlify를 사용하면 더 간단하게 배포가능하다고 하여 작업하였다. 

 

스토리북 공식문서에도 chromatic을 사용한 배포 방법을 안내하고 있다. 

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/

Storybook Tutorials

 

yarn add -D chromatic

 

 

설치하고 chromatic 들어가서 로그인하면 아래와 같이 보인다. 

깃허브 repo랑 연동도 가능하고 create a project 누르면 깃허브 레포 없이도 스토리북 배포가 가능하다. 

 

 

add project가 완료되면 아래와 같이 토큰이 추가되어 나오는데, 이 대로 그대로 복사해서 붙여넣기 해서 쓰면된다.

 

yarn chromatic --project-token=<project-token>

 

 

 

 

 

완료되면 링크를 받는데 여기로 들어가면 정상적으로 배포가 완료됨을 확인할 수 있다. 

 

 

 

 

팀원 초대는 링크나 이메일로 가능하다. 

 

 

chromatic을 사용하면 빌드 log를 확인할 수 있다.