GitHub Actions로 Storybook 배포 자동화

their website에서 직접 가져온 것입니다. "Storybook은 도달하기 어려운 상태와 에지 케이스를 개발할 수 있도록 UI 구성 요소를 독립적으로 빌드할 수 있는 샌드박스를 제공합니다."

스토리북

Storybook은 앱 내부에 있는 앱으로 처음부터 디자인 시스템을 매우 쉽게 구축할 수 있도록 합니다.

에서 Storybook 설정에 대한 자세한 내용.

Storybook으로 React 구성 요소 문서화

Emma Bostian ✨ ・ 5월 6 '19 ・ 5분 읽기

#react

Storybook을 처음 접하게 된 것은 Netlify에서 개발자로 적시에 UI를 새로 고치는 데 중점을 두었을 때였습니다. 해당 디자인 시스템은 여전히 ​​존재하며 storybook.netlify.com에서 유지 관리됩니다. 그 이후로 Storybook은 제 프런트 엔드 개발 도구의 기둥으로 성장했습니다. 디자인 시스템을 구축하면 향후 변경 사항에 대해 UI를 유연하게 유지할 수 있습니다.

해결해야 할 문제

자주 접하는 문제는 공공 디자인 시스템을 최신 상태로 유지하기 위해 자동화된 방법을 설정하는 것입니다. 현재 프로젝트Open Sauced에서 GitHub의 마스터 브랜치에 변경 사항을 푸시할 때 Netlify(여전히 팬)를 사용하여 내 사이트를 프로덕션에 지속적으로 배포하고 있습니다.

첫날부터 프로덕션 사이트에 지속적으로 배포했지만 동일한 방식으로 Storybook 페이지를 자동화할 수 없었습니다.

적어도 GitHub Actions까지는.

GitHub 작업

GitHub Actions는 누구나 쉽게 모든 소프트웨어 워크플로를 자동화할 수 있도록 하는 것을 목표로 올해(11월 13일) 공개적으로 시작되었습니다. 이 기능은 개인적으로 GitHub 중심 자동화를 내 개발자 워크플로에 통합할 수 있는 기능을 부여하여 이전 시도보다 이 문제에 더 쉽게 접근할 수 있게 해주었습니다.

솔루션

처음에는 Netlify와 Netlify의 새로운 기능monorepo으로 이 문제를 해결하려고 시도했지만 Storybook은 동일한 package.json을 사용하기 때문에 잘리지 않았습니다.

또 다른 솔루션은 내 /storybook-static 파일을 로컬에서 수동으로 번들링한 다음 해당 출력을 gh-pages 브랜치로 푸시하는 것과 관련이 있습니다. 이 접근 방식은 잘 작동했지만 자동화되지 않았습니다.

GitHub Actions의 많은 중요한 부분 중 하나는 오픈 소스 및 GitHub Marketplace을 통해 자동화된 워크플로를 공개적으로 공유하는 기능입니다. 베타 기간 동안 GitHub Actions를 사용했기 때문에 GitHub 페이지의 배포를 자동화하는 꽤 많은 Actions를 알고 있었습니다. 공개적으로 공유된 작업JamesIves/github-pages-deploy-action으로 가는 길을 찾았습니다. 내 빌드 폴더( /storybook-static )를 감시하고 해당 출력을 나를 대신하여 gh-pages 분기에 배포합니다.

GitHub Actions는 YAML 파일을 활용하여 자동화를 호스팅하고 GitHub API 및 Webhook와의 상호 작용을 추상화하며 "GitHub 페이지에 배포"작업을 사용할 수 있는 기능을 제공합니다.

내가 발견한 이 솔루션은 내 개발자 워크플로에 구현되었고 몇 달 동안 실행되었으며 내 프로젝트의 새로운 UI 새로 고침을 지원하는 데 도움이 되었습니다.

// .github/workflows/storybook.yml

on: 
  push

name: Publish stories if changed

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Build and deploy to storybook-static branch
      uses: JamesIves/[email protected]
      env:
        ACCESS_TOKEN: ${{ secrets.BDOUGIE_TOKEN }}
        BRANCH: storybook-static
        FOLDER: storybook-static
        BUILD_SCRIPT: npm install && npm run build-storybook

보너스: 배포를 특정 경로로 제한합니다.

이 솔루션을 사용하여 몇 개월을 보낸 후 마스터로 푸시할 때마다 워크플로가 트리거된다는 사실을 알게 되었습니다. 이는 프로젝트에 대한 모든 변경 사항에 디자인 시스템에 대한 업데이트가 포함되지 않기 때문에 이상적이지 않습니다.
stories 및 components 폴더의 변경 사항을 확인하는 필터를 추가했습니다. 이 필터는 변경 사항이 없는 경우 CI가 스토리북 배포를 트리거하지 않도록 합니다.

그 변경에는 아래에 있는 한 줄만 추가하면 됩니다.

on: 
  push:
    paths: ["stories/**", "src/components/**"]

최근에 ethomson's Actions advent blog series에서 배웠습니다.

자신만의 GitHub Action을 처음부터 빌드하는 방법에 관심이 있다면 Hello, GitHub Actions! 과정을 확인하십시오.

bdougie/open-sauced .github 폴더에서 이 워크플로와 몇 가지 다른 워크플로를 찾을 수 있습니다.