storybook, chromatic 대신 vercel로 배포하기

storybook은 일반적으로 chromatic에 배포하는 경우가 많은 것 같습니다.

하지만 제 개인적으로는 chromatic 생태계와 대시보드를 한번 더 학습해야하는 비용이 있다보니 스토리북 관리를 하기 싫게 만드는 이유 중 하나였는데요

 

chromatic 생태계에서 사용할 수 있는 기능들이 필요한 것이 아니라면 사실 storybook 빌드 결과물은 chromatic에 종속적이지 않으니 github pages나 netlify 등 다양한 정적 호스팅 사이트와도 쉽게 결합할 수 있습니다.

마찬가지로 vercel과도 원활하게 통합을 수행할 수 있는데요 이번에는 vercel로 스토리북을 배포한 과정을 다뤄보겠습니다.

 

사실 그냥 배포하면 됩니다만은 저는 모노레포로 패키지를 관리하고 있다보니 이와 관련하여 자잘하게 귀찮은 설정들이 필요했어요

모노레포를 사용하다보면 개발할 땐 참 편안한데 이런 지점들이 귀찮게 느껴지는 것 같습니다.

이번 배포에 사용한 레포지토리 주소는 다음과 같으며 Turbo Repo , Pnpm Workspace로 구성된 레포지토리입니다.

 

https://github.com/XionWCFM/xionwcfm-lib

GitHub - XionWCFM/xionwcfm-lib: 😈 xionwcfm utils, design system, token, hooks, components

---

모노레포에서 스토리북을 오류없이 배포하기 위해 알아둘 것들

 

1. 내 다른 워크스페이스의 빌드결과물에 의존하는 경우 해당 워크스페이스를 사전에 빌드해야한다.

2. vercel은 모노레포의 루트가 아닌 배포하고자하는 워크스페이스 내에서 명령어를 실행한다.

 

이정도만 알아두면 충분하겠습니다.

저는 디자인 시스템 워크스페이스가 모노레포의 다른 워크스페이스의 빌드 결과물에 의존하고 있었기 때문에 사전에 의존하고 있던 워크스페이스들을 빌드하는 과정을 추가하였어요

    "build-storybook": "storybook build",

 

먼저 워크스페이스에서 storybook을 빌드하기 위한 커맨드를 설정합니다.

다양한 방식으로 처리할 수 있겠지만 저는 루트의 스크립트에 빌드를 위한 스크립트를 추가해주는 형태로 해결하였습니다.

지금 생각해보니 굳이 이렇게 할 필요는 없네요

 

turbo.json의 tasks 키 부분에 build-storybook 스크립트를 추가합니다.

    "build-storybook": {
      "dependsOn": ["^build"],
      "outputs": ["storybook-static/**"]
    },

제 프로젝트는 스토리북 빌드가 다른 빌드에게 의존하기 때문에 다음과 같이 설정해주었어요

    "build:storybook": "turbo build-storybook",

루트의 scripts에 다음과 같이 명령어를 추가해줬습니다.

 

이제 vercel에서 배포를 위해 디렉토리를 설정해주고 framework를 storybook으로 설정합니다.

build and outputsetting을 조금 만져주겠습니다.

앞서 vercel은 모노레포의 루트가 아니라 내가 설정한 루트디렉토리에서 명령어를 실행합니다.

이때 만약 내가 워크스페이스 위치에서 루트디렉토리에 있는 스크립트 명령어를 실행해야한다면 -w 명령어를 통해 워크스페이스에서 루트 디렉토리의 명령어를 부를 수 있습니다.

해당 작업까지 마치고 난 후 잘 배포되었습니다!

https://xionwcfm-lib.vercel.app/?path=/docs/xds-underlineinput--docs

storybook - Storybook

혹시 결과물이 궁금하시다면 방문해서 제가 만든 컴포넌트를 써봐주세요

 

글에서는 지루한 실패과정을 다루지 않았지만 vercel이 cli를 실행하는 위치를 모르는 상태로 작업하다보면 저처럼 여러번의 시행착오를 겪을 수 있습니다.

다들 민첩한 코딩 되시기 바랍니다.

 

감사합니다.