개발 환경
- React: 18.2.0 (vite 5.0.8.)
- Storybook: 8.0.2.
참고
Storybook Chromatic 으로 배포하기
스토리북 배포하기 공식 문서를 참고 했다.공식문서에 상세하게 절차가 나와 있지만 조금 더 상세하게 알아본다.우선 Next 또는 React 프로젝트를 하나 생성한다.그리고 npx storybook@latest init 명령어
velog.io
https://min-kyung.tistory.com/160
Chromatic으로 Storybook 지속적 배포하기 (Github Actions)
TL;DR 1. 스토리북을 도입하게 된 계기 2. chromatic으로 스토리북 배포하기 3. Github Actions를 이용해 Pull Reqeust에서 바로 컴포넌트 확인하기 스토리북을 도입하게 된 계기 협업을 진행하면서 여러 사람
min-kyung.tistory.com
https://velog.io/@qmflf556/storybook-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC
storybook 자동 배포
이미 origin 은 기존 프로젝트에서 사용중이라 다른 이름인 storybook 으로 remote 를 추가해주고 새로 생성한 레포에 푸시해주었다.시간이 좀 걸린다.https://www.chromatic.com/start?utm_source=storybook_w
velog.io
https://www.chromatic.com/docs/storybook/setup/
Introduction • Chromatic docs
Chromatic is a cloud based toolchain built around Storybook to help teams develop robust UI components faster, together.
www.chromatic.com
진행과정
1. chromatic (크로마틱 설치)
npm install --save-dev chromatic
npx chromatic --project-token='본인 토큰'
크로마틱 가입(깃허브 아이디로 가입하는게 편함) > 크로마틱 설치 > 스토리북 배포
위 과정만 진행해도 스토리북 배포가 완료된다.
하지만 매번 이 과정을 반복하기엔 불편함이 있기에 깃허브 액션을 사용해서
배포 자동화를 해보려고 한다.
2. github-actions
name: 'Chromatic-Storybook Deployment'
run-name: deploy storybook by ${{ github.actor }}
on:
pull_request:
branches:
- deploy
paths:
- '**.stories.ts'
- '**.stories.tsx'
- '**.mdx'
jobs:
chromatic-storybook-deploy:
runs-on: ubuntu-latest
outputs:
status: ${{ job.status }}
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Cache npm
id: npm-cache
uses: actions/cache@v4
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- if: steps.npm-cache.outputs.cache-hit != 'true'
run: npm ci
- name: Run Chromatic
id: chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
exitZeroOnChanges: true
- name: Publish Summary
run: echo -e "| Results | |\n| --- | --- |\n| Build Results | ${{ steps.chromatic.outputs.buildUrl }} |\n| Storybook Preview | ${{ steps.chromatic.outputs.storybookUrl }} |\n| Component Count | ${{ steps.chromatic.outputs.componentCount }} |" >> $GITHUB_STEP_SUMMARY
- name: Discord Webhook
uses: tsickert/discord-webhook@v5.3.0
with:
webhook-url: ${{ secrets.DISCORD_WEBHOOK }}
content: 'storybook link -> ${{ steps.chromatic.outputs.storybookUrl }}'
깃허브 액션을 처음 사용해보는 것이라 위 블로그들을 많이 참고했다.
deploy 브랜치에 스토리 파일들이 PR이 되면 자동으로 배포가 되도록 설정하였고,
배포가 완료되면 크로마틱 빌드 결과 페이지, 스토리북 배포링크, 컴포넌트 개수 값이 표로 보이도록 하였다.
(이 부분은 깃허브 이슈 페이지를 참고하였다.)
참고한 블로그와 다른점은 디스코드 웹 훅을 추가하였다는 점이다.
위 이미지처럼 원래 배포가 완료되면 PR 페이지에 코멘트를 보내도록 설정해서
배포된 스토리북 링크를 디스코드로 알림을 받고있었다.
디스코드 개인 서버에서만 모든 알림이 오도록 해두었는데,
스토리북 배포 링크 같은 경우에는 팀원 모두 확인해보면 좋을 것 같아서
스터디 팀 디스코드 채널에도 스토리북 배포 링크만 알림이 오게 하고싶었다.
그래서 디스코드 웹훅을 설정해서 PR 코멘트만 받도록 했는데,
계속 메세지가 안왔다... 뭔가 다른걸 해줘야하는 건지 모르겠으나 실패해서
위 코드에 디스코드 웹훅 내용을 추가해주었더니 성공했다.
코드를 보면 secrets.~~이 적힌 부분이 있는데
그 부분은 깃허브에 Security > Secrets and variables > Actions에 등록을 해주어야 한다.
코드에 작성한 이름 그대로 키캆을 설정해줘야 한다.
크로마틱 토큰은 처음에 크로마틱 배포할 때 받았던 값을 등록해주면 되고,
디스코드 웹후크는 디스코드의 webhooks 링크를 넣어주면 된다.
디스코드 웹후크 링크를 등록할 때 주의점은 깃허브 페이지에 웹훅 링크를 등록할때처럼
웹후크 URL 마지막에 '/github'를 넣어줘야하는 줄 알았는데 아니었다.
그냥 웹후크 URL을 그대로 넣어주면 된다.
그걸 몰라서 몇 번 오류를 봤었다... 그래도 해결해서 다행🥹
개발 환경
- React: 18.2.0 (vite 5.0.8.)
- Storybook: 8.0.2.
참고
Storybook Chromatic 으로 배포하기
스토리북 배포하기 공식 문서를 참고 했다.공식문서에 상세하게 절차가 나와 있지만 조금 더 상세하게 알아본다.우선 Next 또는 React 프로젝트를 하나 생성한다.그리고 npx storybook@latest init 명령어
velog.io
https://min-kyung.tistory.com/160
Chromatic으로 Storybook 지속적 배포하기 (Github Actions)
TL;DR 1. 스토리북을 도입하게 된 계기 2. chromatic으로 스토리북 배포하기 3. Github Actions를 이용해 Pull Reqeust에서 바로 컴포넌트 확인하기 스토리북을 도입하게 된 계기 협업을 진행하면서 여러 사람
min-kyung.tistory.com
https://velog.io/@qmflf556/storybook-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC
storybook 자동 배포
이미 origin 은 기존 프로젝트에서 사용중이라 다른 이름인 storybook 으로 remote 를 추가해주고 새로 생성한 레포에 푸시해주었다.시간이 좀 걸린다.https://www.chromatic.com/start?utm_source=storybook_w
velog.io
https://www.chromatic.com/docs/storybook/setup/
Introduction • Chromatic docs
Chromatic is a cloud based toolchain built around Storybook to help teams develop robust UI components faster, together.
www.chromatic.com
진행과정
1. chromatic (크로마틱 설치)
npm install --save-dev chromatic
npx chromatic --project-token='본인 토큰'
크로마틱 가입(깃허브 아이디로 가입하는게 편함) > 크로마틱 설치 > 스토리북 배포
위 과정만 진행해도 스토리북 배포가 완료된다.
하지만 매번 이 과정을 반복하기엔 불편함이 있기에 깃허브 액션을 사용해서
배포 자동화를 해보려고 한다.
2. github-actions
name: 'Chromatic-Storybook Deployment'
run-name: deploy storybook by ${{ github.actor }}
on:
pull_request:
branches:
- deploy
paths:
- '**.stories.ts'
- '**.stories.tsx'
- '**.mdx'
jobs:
chromatic-storybook-deploy:
runs-on: ubuntu-latest
outputs:
status: ${{ job.status }}
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Cache npm
id: npm-cache
uses: actions/cache@v4
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- if: steps.npm-cache.outputs.cache-hit != 'true'
run: npm ci
- name: Run Chromatic
id: chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
exitZeroOnChanges: true
- name: Publish Summary
run: echo -e "| Results | |\n| --- | --- |\n| Build Results | ${{ steps.chromatic.outputs.buildUrl }} |\n| Storybook Preview | ${{ steps.chromatic.outputs.storybookUrl }} |\n| Component Count | ${{ steps.chromatic.outputs.componentCount }} |" >> $GITHUB_STEP_SUMMARY
- name: Discord Webhook
uses: tsickert/discord-webhook@v5.3.0
with:
webhook-url: ${{ secrets.DISCORD_WEBHOOK }}
content: 'storybook link -> ${{ steps.chromatic.outputs.storybookUrl }}'
깃허브 액션을 처음 사용해보는 것이라 위 블로그들을 많이 참고했다.
deploy 브랜치에 스토리 파일들이 PR이 되면 자동으로 배포가 되도록 설정하였고,
배포가 완료되면 크로마틱 빌드 결과 페이지, 스토리북 배포링크, 컴포넌트 개수 값이 표로 보이도록 하였다.
(이 부분은 깃허브 이슈 페이지를 참고하였다.)
참고한 블로그와 다른점은 디스코드 웹 훅을 추가하였다는 점이다.
위 이미지처럼 원래 배포가 완료되면 PR 페이지에 코멘트를 보내도록 설정해서
배포된 스토리북 링크를 디스코드로 알림을 받고있었다.
디스코드 개인 서버에서만 모든 알림이 오도록 해두었는데,
스토리북 배포 링크 같은 경우에는 팀원 모두 확인해보면 좋을 것 같아서
스터디 팀 디스코드 채널에도 스토리북 배포 링크만 알림이 오게 하고싶었다.
그래서 디스코드 웹훅을 설정해서 PR 코멘트만 받도록 했는데,
계속 메세지가 안왔다... 뭔가 다른걸 해줘야하는 건지 모르겠으나 실패해서
위 코드에 디스코드 웹훅 내용을 추가해주었더니 성공했다.
코드를 보면 secrets.~~이 적힌 부분이 있는데
그 부분은 깃허브에 Security > Secrets and variables > Actions에 등록을 해주어야 한다.
코드에 작성한 이름 그대로 키캆을 설정해줘야 한다.
크로마틱 토큰은 처음에 크로마틱 배포할 때 받았던 값을 등록해주면 되고,
디스코드 웹후크는 디스코드의 webhooks 링크를 넣어주면 된다.
디스코드 웹후크 링크를 등록할 때 주의점은 깃허브 페이지에 웹훅 링크를 등록할때처럼
웹후크 URL 마지막에 '/github'를 넣어줘야하는 줄 알았는데 아니었다.
그냥 웹후크 URL을 그대로 넣어주면 된다.
그걸 몰라서 몇 번 오류를 봤었다... 그래도 해결해서 다행🥹
