React StoryBook 배포 해보기

이번에는 저번에 만들었던 Storybook 프로젝트를 배포해보도록 하겠습니다

작업된 내용은 아래 프로젝트에서 확인가능하십니다

https://github.com/jungHyeonS/React-stroybook

GitHub - jungHyeonS/React-stroybook: react-stroybook-study

 

스토리북을 배포하는 방법은 일반적인 리액트 프로젝트처럼 정적 앱으로 내보내는 방법과

스토리북 관리자가 만든 무료 배포 서비스인 Chromatic을 이용한 방법이 있습니다

 

이번 포스팅에서는 Chromatic을 이용한 배포를 진행해보도록 하겠습니다

 

우선 프로젝트에 패키지를 설치합니다

 

패키지 설치

yarn add -D chromatic

 

설치가 완료가 되면 크로마틱 페이지에 접속하여 로그인을 해줍니다

 

크로마틱 로그인

https://www.chromatic.com/start

Sign in

 

해당 페이지에 접속한 후 Github 계정으로 로그인을 해주어야 합니다

저희는 Github 프로젝트와 연동을 할 것이기 때문에 Github 계정으로 무조건 로그인해주셔야 합니다

 

로그인이 다되면 오른쪽 사진과 같은 화면이 나오게 되는데

여기서 Choose from Github 버튼을 클릭 후 작업한

원격 저장소를 연동시켜주시면 됩니다

 

 

프로젝트 연동

원격 저장소를 크로마틱에 연동을 하게 되면 project-token이라는 값이 아래와 같이 나오게 됩니다

이 토큰을 복사하여 명령어를 실행시켜주시면 됩니다

yarn chromatic --project-token=<project-token>

 

이후 스크립트가 실행되면 https://random-uuid.chromatic.com 주소를 받을 수 있습니다

저의 경우는 아래 주소를 받았습니다!

https://63bc0f691732f39798890281-lectjvaqqv.chromatic.com/

Please Wait

 

여기까지 하면 스토리북 배포는 완료가 됩니다

그러나.. 스토리북을 수정할 때마다 명령어를 입력하면서 배포하면 많이 불편하겠죠?

 

그래서 저희는 Github Actions을 이용하여 CI/CD를 구축해볼 것입니다

 

크로마틱 CI/CD

Github Actions를 사용하려면 어떠한 작업을 할 것인가에 대한 yml파일을 작성해주어야 합니다

해당 파일은 아래와 같이 작성을 해주시면 되시고,.github/workflows 폴더에 넣어주시면 됩니다

(Github Actions 추후에 자세히 다뤄보도록 하겠습니다)

 

# Workflow name
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - run: yarn
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GIT_TOKEN }}

 

해당 소스를 보게 되면 secrets 변수가 보이는데 이 변수는 Github 프로젝트 환경변수입니다

CHROMATIC_PROJECT_TOKEN : 크로마틱 프로젝트 토큰

GIT_TOKEN : 깃허브 액세스 토큰

 

저는 이러한 환경변수를 아래와 같이 저장해 두었습니다

 

이후 프로젝트를 커밋, 푸시를 하게 되면 깃허브 액션이 CI/CD를 진행해 주고

CI/CD가 완료가 되면 크로마틱에 빌드가 진행되는 것을 확인할 수 있습니다