스토리북을 Github 페이지에 자동으로 배포

Storybook은 훌륭한 도구로 구성 요소를 this과 같은 깔끔하고 작은 인터페이스로 구성할 수 있습니다.
기본적으로 사용자에게 표시하려는 구성 요소를 반환하는 스토리를 만듭니다.

다음은 React 구성 요소에 대한 스토리의 예입니다.

//...

import { Button } from "../components/Button"

storiesOf('Button', module)
  .add('With text', () => <Button>Enter World</Button>)
  .add('With emojis', () => <Button>🔥⚔️</Button>)

물론 아주 간단한 것들은 테마에서 멋진 추가customizing에 이르기까지 Storybook에 다양한 방법addons이 있습니다.

하지만 이 기사는 Storybook에 대한 소개가 아닙니다. 원하는 경우 Emma Wedekind의 . 오늘 우리는 this one과 같은 기존 Storybook을 Github 페이지에 배포하면서 지정된 분기에서 각 푸시에서 프로세스를 자동화할 것입니다.

Travis CI 설정

Travis CI는 Github에서 호스팅되는 소프트웨어를 빌드하고 테스트하는 데 사용되는 지속적 통합 서비스입니다. 오픈 소스 프로젝트에는 무료이며 Github Pages에 매우 쉽게 배포할 수 있습니다.

이 모든 작업을 수행하기 전에 따라야 할 몇 가지 단계가 있습니다.

travis-ci.com으로 이동하여 GitHub에 가입합니다.

Travis CI의 승인을 수락합니다. GitHub로 리디렉션됩니다.

녹색 활성화 버튼을 클릭하고 배포할 저장소를 선택합니다

.

이link에 대한 짧은 지침에 따라 Github에서 개인용 액세스 토큰을 생성하고 public_repo 권한을 부여합니다.

Travis의 프로젝트 설정으로 이동하여 환경 변수 섹션에서 GITHUB_TOKEN 변수를 생성하고 방금 생성한 토큰을 제공합니다. 이 토큰을 사용하면 Travis가 배포를 위해 저장소에 푸시할 수 있습니다.

이제 프로젝트의 루트에 .travis.yml 파일을 생성하고 다음 콘텐츠를 제공할 수 있습니다.

# Tells Travis we're running on a Node environment
language: 'node_js'
node_js: '8'

# Script that is run before the script phase
before_script:
- yarn build-storybook

# Deployment information
deploy:
  provider: pages # Tell Travis we want to deploy to Github Pages
  skip-cleanup: true 
  github-token: $GITHUB_TOKEN # Will take the environment variable you created on step 5
  local_dir: storybook-static # The folder that needs to be deployed
  repo: christopherkade/ReactCraft # Add your username/project_name here
  target_branch: gh-pages # Tell Travis to deploy on the gh-pages branch
  on:
    branch: master # Tell Travis to trigger a deploy only when we push to master

Note: If you wish to trigger the deployment when pushing to a specific branch, feel free to change the branch: master section of the configuration file.

배포를 위한 Storybook 설정

거의 끝났습니다. 이제 Storybook을 정적 앱으로 내보내야 합니다. 이렇게 하면 Travis가 생성된 앱을 우리의 gh-pages 브랜치로 푸시하여 배포할 것입니다!
package.json 에서 다음 스크립트를 추가합니다.

{
  "scripts": {
    // ...
    "build-storybook": "build-storybook -s public",
  },
}

이 스크립트는 before_script 의 .travis.yml 단계에서 실행되는 스크립트입니다. 웹 사이트의 정적 인스턴스를 포함하는 프로젝트의 루트에 storybook-static 폴더를 생성합니다.

스토리북 배포

이제 첫 번째 배포를 트리거할 수 있습니다 😍
package.json 및 .travis.yml 파일을 저장소로 푸시합니다.
모든 것이 계획대로 진행되면 Travis 대시보드에서 빌드가 트리거되는 것을 볼 수 있습니다. 잠시 후(처음에는 몇 분 정도) 빌드가 성공한 것으로 표시되면 다음 URL에서 스토리북을 찾을 수 있습니다: username.github.io/project-name.

몇 가지 사항으로 인해 빌드가 실패할 수 있습니다.

테스트 실패

예를 들어 Travis 프로젝트에서 Github 토큰이 포함된 환경 변수를 설정하는 것과 같이 이 문서의 단계를 잊어버렸습니다.

린터에서 오류가 발생함(설정한 경우)

따라서 언제든지 이러한 문제를 수정하고 변경 사항을 Github에 푸시할 수 있습니다.

스토리북을 Github Pages에 배포한 것을 축하합니다 🎉

질문이 있거나 계속 연락하고 싶다면 트위터에서 저를 팔로우하세요. 저는 정기적으로 JS와 CSS에 대한 글을 게시하며 새 기사가 나올 때마다 알려드리겠습니다 😄