Chromatic으로 배포하기

Chromatic은 스토리북 관리자가 만든 무료 배포 서비스로 클라우드에서 스토리북을 안전하게 배포하고 호스팅 할 수 있습니다.

1. development dependency로 chromatic 패키지를 추가해주세요. npm install --save-dev chromatic

2. 프로젝트를 위해 생성된 고유한 project-token을 복사해주세요. 그리고 스토리북을 빌드(build)하고 배포하기 위해 아래 명령어를 실행해주세요.

   npx chromatic --project-token=[CHROMATIC_PROJECT_TOKEN]

3. 실행이 완료되면 배포된 스토리북의 링크를 받을 수 있습니다.

Github Actions을 사용하여 CI / CD 구축

컴포넌트가 변경되었을 경우 즉각적으로 반영하기 위해서 Github Actions를 통해 CI / CD를 구축해야 합니다.

1. Chromatic Token 생성

프로젝트의 설정에서 Chromatic에서 받은 프로젝트 token으로 새로운 레파지토리 token을 생성해줍니다.

2. workflows 생성

프로젝트 루트 경로에서 .github 폴더를 생성한 후 그 안에 workflows 폴더를 생성합니다. workflow는 여러 Job으로 구성되고, 특정 Event에 의해 트리거될 수 있는 자동화된 프로세스를 의미합니다. workflows 폴더 내부에 chromatic.yml을 생성한 후 아래의 코드를 작성합니다.

on이라는 키를 통해 workflow가 실행되는 시점을 설정할 수 있습니다. 아래의 코드는 main 브런치에 stories 파일이 push 되거나 pull_request 되었을 때 action을 실행시켜 줍니다.