Storybook Chromatic 으로 배포해보기! + 번외 Netlify

Storybook은 단순한 테스팅 툴을 넘어 협업 & 문서화 툴이다.

그러기 위해선 당연히 공유할 수 있도록 배포도 할 수 있고 Storybook을 배포하기 위한 전용 서비스까지 있다.

그것이 바로 Chromatic! 

Chromatic 과 함께라면 배포는 물론 그 이후의 build 관리까지 Storybook 맞춤으로 손쉽게 할 수 있다!

준비물은 Storybook을 적용한 프로젝트 Github 레포지토리만 있으면 된다!

 

1. 가입

먼저 Chromatic 사이트에 접속해 Github 계정으로 가입을 해주자!

 

2. 프로젝트 생성

아마 최초 회원가입을 해서 로그인을 하면 위의 화면이 뜰 것이다.

여기서 Choose from GitHub을 선택!

 

만약 안뜬다면 화면 Projects 탭에 있는 add project 를 찾아서 클릭하면 저 화면이 뜬다!

 

그다음엔 Github 계정의 Storybook을 배포하고 싶은 저장소를 선택해준다!

(🗯 배포하려면 프로젝트를 Github 레포지토리에 미리 올려놔야 한다!!)

 

그러면 이 페이지가 뜨는데 이제 다 끝난 거나 다름없다!

이제 그냥 vscode 로 가서 저 페이지에 떠있는 명령어 2개를 터미널에 입력해주기만 하면 끝이다!

 

3. 배포해보기!

1. 프로젝트에 Chromatic 설치

npm install --save-dev chromatic
yarn add --dev chromatic

위의 두 명령어 중 하나를 터미널에 입력해서 프로젝트에 Chromatic 을 설치해준다!

 

2. 찐 배포!

 npx chromatic --project-token=<project 고유 token>

이제 저 페이지 아래에 있는 명령어를 그대로 복사해서 터미널에 입력해주자!

 

그러면 이렇게 챡챡챡 뭔가 작업이 진행이 되다가!

 

Storybook에 아무 오류가 없다면 정상적으로 배포가 마무리된다!!!

이게 끝이다 끝! ^0^)/

저 아래 파란색으로 되어 있는 링크를 들어가 보자!

 

4. 추가 설정 & 튜토리얼?

파란색의 링크를 들어가면 추가 Setup 페이지가 뜬다.

대충 해보니까 컴포넌트 별로 변경사항을 추적하는 방법이나 work flow 같은걸 알려주는 단계 같은데

파란색 버튼을 눌러하라는 대로 따라서 진행해도 되고 하기 귀찮으면 그냥 아래의 Go to your project 를 클릭해주자!

 

5. 배포한 스토리북 공유하기!

위에서 설정을 끝내거나 Go to your project 를 눌렀다면 build 페이지로 넘어가게 된다!

내가 작업하고 배포한 스토리북을 build 단계별로 확인할 수 있다!

Builds 중 내가 공유하고 싶은 버전을 클릭하자!

 

그러면 Build 관리 페이지가 뜨는데 여기서 우측 아래에 있는 View StoryBook 버튼을 클릭!!

 

쨘!!!!!!!!!

내가 배포한 스토리북이 뜬다!!!!!!!!!!!!

이제 저 위의 링크를 복붙 해서 공유하면 된다!!!!!!

특정 컴포넌트를 공유하고 싶으면 전체 링크를 복붙 하면 된다!!!!!!!

 

*.☆⸜(⑉˙ᗜ˙⑉)⸝♡.*

배포 끝!!!!!!!!!!

 

번외

1. 만약 Private Repository 라면?

Storybook도 Private으로 배포가 된다.

그래서 공유하려면 공유하고자 하는 대상을 내 Storybook에 초대를 해야 공유가 가능하다

하지만 그건 너무 귀찮고, 불특정 다수에게 공유하고 싶은 경우라면 아래와 같이 Visibility를 public으로 설정해주면 된다!

 

왼쪽의 Manage 메뉴를 눌러 Collaborate 탭으로 들어온다.

아래로 내려보면 Collaborator를 초대할 수 있는 링크도 있지만 넘어가고 맨 아래로 쭉쭉 내린다!

맨 아래로 내리면 VISIBILITY 항목이 있다!

여기서 Make public을 눌러주면 끝! ( ᐛ )و 

2. 공유 링크로 다른 사용자가 접속했는데 404가 뜬다?!

내 경험상 private 레포지토리를 public으로 변경하고 바로 배포했을 때 404가 떴었다.

이런 경우 뒤의 링크까지 함께 공유해보자!

그럼 제대로 뜬다!

⸜( ◜࿁◝ )⸝︎︎ 야호!

 

3. 꼭 Chromatic 으로 해야 하나!?

꼭 그럴 필요 없다!

본인이 원하는 Netlify, Heroku, AWS든 뭐든 가능하다!

얼마 전에 스토리북 배포를 테스트해보려고 Chromatic, Netlify, Heroku 로 전부 배포를 해봤는데

제일 빠르고 쉬웠던 건 Netlify CLI 였다.

10초 이내로 배포 가능! ㄴ(ㅇ0ㅇ)ㄱ!

Netlify CLI 는 코쿼 마스터즈의 파크께서 공유해주셔서 알게 된 배포 플랫폼인데 넘 잘 쓰고 있다. 감사함당 ^-^)b 팤흐!

 

여하튼 Netlify CLI 로 10초 컷 배포를 해보자!

 

1. 먼저 Storybook 을 build 한다!

yarn build-storybook

스토리북 build는 Storybook에 이미 내장되어 있는 기능으로 터미널에 저 명령어를 입력하면...

 

짠! 현재 디렉터리 내에 storybook-static이라는 폴더가 생성된다!

저걸 그냥 netlify 든 heroku 든 통째로 배포하면 된다!!!!!

 

2. Netlify CLI 설치

npm install netlify-cli -g

위의 명령어로 Netlify CLI 를 설치해주자!

 

3. Netlify CLI 로 배포하기

netlify deploy --dir ./storybook-static

이제 netlify deploy 명령어에 dir 옵션을 설정해서 터미널에 입력해주면!

최초 Netlify 사용자 거나, 로그인이 안되어 있다면 로그인하라는 안내가 뜰 거고 아니라면 저렇게 기존에 배포한 사이트에 연결할 건지 아니면 새로 만들 건지 선택하라고 한다.

당연히 NEW SITE 다!

그 후 간단하게 Team Name, Site Name을 입력하고 나면?!

 

배포 끝!!!!!!!!!!!!!!!!!!!

Website Draft URL 링크로 접속하면 빤딱빤딱한 내 Storybook이 뜬다!

야호!!!! 너무 쉽다!!!!!

✧*｡٩(ˊ v ˋ*)و✧*｡

 

(+) 이후 Netlify를 product 로 배포하고 싶으면 위의 로그에 적혀있듯이 netlify deploy --prod 명령어로 다시 배포하면 된다!

 

+ ) Chromatic & Netlify 비교

VM Project Chromatic Link

VM Project Netlify Link

 

두 서비스를 비교를 해보면 배포 난이도나 귀찮음 정도는 Netlify CLI 압승이지만 최초 사이트에 접속했을 때 로딩 속도는 개인적으로 Chromatic 이 조금 더 빠른 거 같다.

둘 중 뭐든 본인이 원하는 서비스를 이용하면 되지만 나는 앞으로도 계속 Chromatic을 사용할 거 같다.

왜냐면 단순히 배포하는 기능을 넘어 Chromatic 은 Storybook에 특화된 이런저런 기능을 제공해주기 때문이다.

일단 build 버전별로 컴포넌트의 변경 사항을 추적할 수도 있고 Collaborator 들끼리 Review를 주고받을 수 있는 기능도 있다!

그래서 급하게 배포해야 할 땐 Netlify를 쓰겠지만 최종적으로 배포하고 관리할 때는 Chromatic을 쓸 거 같다!