[Question Cloud] Chromatic을 활용한 Storybook 배포

배포된 Storybook 링크

https://66d67775c0992d1453a0cffc-ibohkiaiwr.chromatic.com/

storybook - Storybook

 

지금까지 한 작업물의 결과

이전에 Storybook 설정에 관한 토이프로젝트 글 작성 후 Github에 Issue를 생성하여 할 일을 하나씩 꾸준히 해오고 있었다.

이렇게 하나씩 체크해가며 천천히 컴포넌트를 만들고 스토리를 작성하고 배포했다

 

이제 필요한 UI 컴포넌트들을 대부분 구현 완료했으니 비록 다른 프론트엔드 팀원은 없지만 1명뿐인 백엔드 친구도 구현된 UI를 구경할 수 있게 하기위해 배포를 진행하기로 했다.

 

Chromatic이란 것을 활용해 배포를 진행했는데, 이전에 Visual Test 연동을 하며 이미 Chromatic에 연결해둔 상태였는데 그때 발급받은 project token이 기억나지 않아서 Chromatic에 새로 project를 생성했다.

pnpm chromatic --project-token=<project-code>

 

 

당장 기획해둔 UI 컴포넌트 관련해서는 Issue에 기록한 리스트 중에 하위 3개 제외하고 모두 구현 및 배포 완료된 상태다! 이번주내로 남은 3개도 완성할 예정이다. 그 후 회원가입부터 시작해 아래 Figma에 기획해둔 것처럼 화면 별 기능도 하나 둘 구현해나갈 계획이다.

이렇게 많이 스케치 해놨다... 갈 길이 멀다

---

Storybook 배포 관련 Github Action 등록하기

지금 남은건 3개뿐이지만, 이후에 UI가 더 추가될 수도 있고 그때마다 매번 배포를 수동으로 진행하기에 비효율적일듯 하여 Github Action을 이용한 배포 자동화 플로우를 작성하기로했다. 그리고 나중에 사이트 자체를 배포할때도 사용할듯하다.

 

.github/workflows/chromatic.yml

name: "Auto Deployment"

on:
  pull_request:
    branches:
      - main

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

      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Run Chromatic
        id: chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          buildScriptName: build-storybook
          onlyChanged: true

 

위와 같은 .yml 파일을 작성하고 해당 프로젝트 Repository에서 Setting > Secrets and variables > Actions에서 Repository Secrets에 CHROMATIC_PROJECT_TOKEN 값을 설정해주는 작업을 거쳐 배포 자동화 플로우를 완성했다.

 

🥹 문제점 발생

다 좋은데, 몇 번 배포를 진행해보니까 자동 배포가 진행되고나서 storybook의 배포 url이 매번 바뀌는데 바뀐 url을 확인하려면 Github의 Actions 탭에서 Run Chromatic 단계에 대한 진행을 열어 배포된 url을 확인해야하는 불편함이 있었다.

 

이 문제를 해결하기 위해 PR의 Comment를 달 수 있도록 하는 방법이 있다해서 이를 적용해보려고 했는데, 아래와 같은 오류가 발생했다.

Error: Resource not accessible by integration

 

Github의 Actions > General 탭에서 권한을 Read and Write로 줘야한다하여 들어가보았는데...

 

뭔가 활성화할 수 없는것 같았다. 나의 개인 레포지토리가 아니라 Organization이라서 그런것 같기도 하다. 여튼 그래서 이 방법은 포기했고 PR Checks에 url을 노출하거나 Github Actions의 Artifacts 섹션에 업로드하는 방법, Github Discussions나 Issue에 다는 방법도 있다고 해서 아직 남은 3개의 컴포넌트 작업 후 적당한 방법을 찾아 적용해봐야겠다.