GitHub Actions를 이용해 gh-pages로 Storybook 배포하기

1. 문제 상황

현재 동글은 스토리북을 로컬에서만 사용 중이다.

동글의 스토리북을 chromatic으로 쉽게 배포하여 사용하려고 했으나, organization 권한 문제로 배포할 수 없는 상태다.

2. 스토리북 빌드 파일을 gh-pages로 배포하자

GitHub는 GitHub Pages라는 정적 페이지 배포 환경을 제공한다.

정적 파일인 스토리북 빌드 파일을 배포해 보자.

3. GitHub Actions로 PR 날릴 때 Storybook 배포하기

매번 수동으로 빌드하고 배포하기보다는 자동으로 지속적인 배포를 하면 훨씬 편하다.

GitHub Actions를 이용해 yml 스크립트를 작성해 보자.

(vars.FE_DIRECTORY === ./frontend)

이제 PR을 날릴 때마다 스토리북 빌드와 배포가 자동으로 수행된다.

잘 배포된다

https://woowacourse-teams.github.io/2023-dong-gle/storybook/ 에서 동글의 스토리북을 확인할 수 있다.

4. 트러블 슈팅

Storybook에서 MSW를 사용하는 경우

이때 Storybook 배포 시 mockServiceWorker.js 파일을 찾지 못해 404 에러가 뜰 수 있다.

msw를 Storybook에서 사용하기 위해 msw-storybook-addon을 사용할 텐데, 

preview.tsx에서 mockServiceWorker.js의 위치를 정의해서 해결할 수 있다.

5. 생각해 볼 점

GitHub Pages는 Public 한 페이지이기 때문에, 배포한 스토리북이 공개되는 단점이 있다.

만약 팀원들끼리만 공유하기 위한 Private 주소가 필요하다면 다른 방법을 고려해야 한다.

S3에 배포를 하는 방식이 제일 이상적이지 싶다.

 

동글은 프로젝트 저장소가 이미 공개되어 있기 때문에 스토리북을 S3로 배포하지 않았다.