<aside> 💡

목차

</aside>

image.png

🍀 배포? 굳이?

Storybook 배포를 굳이 왜 할까요? 그냥 로컬로 띄워서 확인하는걸로 충분하지 않을까요?

스토리북은 개발자 외에 기획자, 디자이너, 비개발자와의 협업을 원활히 하고, 언제 어디서나 문서화된 UI를 확인 가능하게 합니다.

“근데 저희 디자이너도 없고, 비개발자도 없는데요?” 라고 생각하실수도 있습니다. 맞습니다! 근데 저희는 "학습 목적"이라는 가불기가 있죠 ㅎㅎ 그래서 스토리북을 배포해보기로 했습니다.

🍀 응 권한 없어~

이전에 개인 레포를 Chromatic을 사용해서 배포를 해봤습니다. 그리고 현재 협업중인 organization 소속 프로젝트 레포의 storybook을 배포하려 했지만, 문제가 있었습니다.

Storybook 공식문서에선 Chromatic을 사용하여 배포하지만, 기관 소속 레포지토리는 권한 문제가 있어 사용할 수 없었습니다.

🍀 GitHub Pages 활용!

이를 해결하기 위해서 정적 웹사이트를 호스팅하는 GitHub Pages 서비스를 이용하였습니다.

과정

  1. .github/workflows/ 디렉토리 안에 다음과 같은 파일을 하나 만들었습니다. (pnpm 기준)

    deploy-storybook.yml

    name: Deploy Storybook to GitHub Pages
    
    on:
      push:
        branches:
          - dev
      pull_request:
        branches:
          - dev
    
    jobs:
      build-and-deploy:
        runs-on: ubuntu-latest
    
        steps:
          - name: Checkout code
            uses: actions/checkout@v2
    
          - name: Install pnpm
            run: npm install -g pnpm
    
          - name: Install dependencies
            run: pnpm install
    
          - name: Build Storybook
            run: pnpm --filter client run build-storybook
    
          - name: Deploy to GitHub Pages
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./apps/client/storybook-static