나만의 디자인 시스템을 만들어보자! - Storybook 배포 및 CI / CD

흑우·2024년 2월 14일

나만의 디자인 시스템을 만들어보자!

목록 보기

4/7

Chromatic 배포하기

Storybook을 사용하면 컴포넌트 문서화를 간단하게 진행할 수 있습니다. 하지만 작성한 Storybook을 확인하기 위해서는 npm run storybook 명령어를 통해 별도의 서버를 실행시켜야 하며 다른 사람들과 공유하는 것이 주 목적인 Storybook의 특징과는 모순적으로 다른 사람들이 컴포넌트의 변경 사항을 바로 확인하기 어렵죠.

이러한 부분을 해결하기 위해 오늘은 Chromatic을 통해 Storybook을 배포해보겠습니다. Chromatic은 Storybook을 위한 클라우드 서비스입니다.

1. chromatic 계정 연동

Chromatic에서 Github 계정을 연동하여 배포할 repository를 선택할 수 있습니다.

!https://velog.velcdn.com/images/hyeon9782/post/fe08d744-283f-4a75-a9a2-a4eb4cee8d25/image.png

github 계정을 연동하고 배포할 repository를 선택했다면 위와 같은 화면이 나옵니다.

2. chromatic 설치

npm install --save-dev chromatic

우선 배포할 프로젝트에 chromatic을 설치해줍니다.

3. chromatic 배포

npx chromatic --project-token=[CHROMATIC_PROJECT_TOKEN]

그 후 해당 코드를 통해 Storybook 배포를 진행해줍니다.

여기까지가 Storybook 배포의 끝입니다. 정말 간단하죠? 지금부터는 배포된 url을 통해 다른 사람들도 제 storybook에 접근할 수 있습니다.

Github Actions로 CI / CD

하지만 이대로는 아쉽습니다. 앞서 말씀드렸던 단점 중 하나인 다른 컴포넌트 문서를 다른 사람들에게 공유하기 번거롭다는 부분은 해결되었지만 컴포넌트가 변경되었을 때 즉각적인 피드백을 반영하기 위해서는 아직까지 많이 번거롭습니다.

이러한 부분을 Github Actions를 통해 CI / CD를 진행해보겠습니다.

1. Chromatic Token 생성

프로젝트에서 Settings => Secrets and variables => Actions => Repository secrets => New repository secret 해당 경로로 이동 후 token을 생성해줍니다.

!https://velog.velcdn.com/images/hyeon9782/post/8a97a1fc-5174-4bea-a00c-2698fcc616d5/image.png

!https://velog.velcdn.com/images/hyeon9782/post/93b32a69-745c-4840-bf20-30addafa3c62/image.png

2. workflows 생성

Github Actions에서 workflow라는 개념은 여러 Job으로 구성되고, 특정 Event에 의해 트리거될 수 있는 자동화된 프로세스를 의미합니다.

on이라는 키를 통해 workflow가 언제 실행될지를 설정할 수 있습니다. 저는 main branch에 push가 되면 해당 action이 실행되도록 했습니다.

.github/workflows/chromatic.yml 해당 경로에 yml 파일을 생성해줍니다.

name: "Chromatic"

on:
  push:
    branches: [main]

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Install dependencies
        run: npm ci

      - name: Publish to Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

stories 파일을 변경하고 main 브런치에 push하게되면?

!https://velog.velcdn.com/images/hyeon9782/post/511853fa-fd5d-4154-8fe3-5b07af0d0562/image.png

다음과 같이 두 번째 Build가 생성되고 배포가 정상적으로 되었음을 확인할 수 있습니다.

CI / CD 고도화

다른 사람들에게 컴포넌트 문서를 공유할 수 있고 컴포넌트의 변화를 즉각적으로 피드백할 수도 있습니다.

하지만 아직도 아쉽습니다. 배포 속도가 너무나도 느리고 PR이 올라올 경우 해당 PR로 인해 Storybook이 어떻게 보이는지 확인할 수가 없습니다.

이러한 문제를 캐싱과 comment bot을 통해 해결해보겠습니다.

권한 부여

해당 기능을 구현하기 위해서는 우선 권한을 변경해야합니다.

Settings => Actions => General 경로로 이동 후 Workflow permissions에서 Read and write permissions으로 변경해줍니다.

!https://velog.velcdn.com/images/hyeon9782/post/28989992-ae54-4c63-8d13-c77baa08dee7/image.png

yml 파일 수정

name: "Chromatic"

on:
  pull_request:
    branches: [main]
    paths:
      - '**.stories.tsx'
  push:
    branches: [main]
    paths:
      - '**.stories.tsx'

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

       - name: cache dependencies
        id: cache
        uses: actions/cache@v4
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-storybook

      - name: depedency install
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm ci

      - name: Publish to Chromatic
        id: chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

       - name: comment PR
        uses: thollander/actions-comment-pull-request@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}'

이제 정상적으로 기능이 작동하는지 확인해보죠!

!https://velog.velcdn.com/images/hyeon9782/post/b0db6087-3351-470c-b59c-87021f65a2b9/image.png

지금까지 storybook 배포와 github actions을 통한 ci / cd 구현을 진행해봤습니다!