이번에 알체라의 클라이언트 팀에서 기존에 생성했던 storybook(https://medium.com/dreamtime-alchera-inc/maintaining-multiple-ui-projects-64e9bb530c99)을 유지하면서 공용으로 사용되는 UI 컴포넌트 라이브러리화 해서 각 개인이 더욱 편리하게 사용하고 GitHub actions를 통한 npm 패키지 배포 및 GitHub pages 배포 자동화를 구축해봤습니다.

라이브러리화를 위해 vue-sfc-rollup를 사용하기로 했습니다.

vue-sfc-rollup is a CLI templating utility that scaffolds a minimal setup for compiling a Vue Single File Component (SFC) — or library of multiple SFCs — into a form ready to share via npm.

vue-sfc-rollup은 vue에 맞는 기본 초기세팅을 설정해주기 때문에 바로 npm에 배포할 수 있는 환경을 제공해줍니다.
우선 vue-sfc-rollup의 기본 생성 폴더 구조에서 기존의 storybook관련 파일들을 가져와서 directory를 알맞게 수정해주고 기본적으로 최소한의 세팅만 해주기 때문에 저희가 작성한 component들의 경우 sass/scss를 사용하거나 assets으로 svg파일 형식을 사용하고 있었기 때문에 빌드를 정상적으로 진행하기 위해 별도로 rollup-plugin-sass / rollup-plugin-scss나 @rollup/plugin-image 등 별도의 plugin을 설치해서 rollup.config.js 에서 추가해줬습니다.

npm run storybook이 정상적으로 돌아가는지 확인후 npm run build 후 npm publish로 npm에 배포를합니다.

이제 테스트를 위해 vue-cli로 바닐라 프로젝트를 생성후 main.js에 아래의 스크린샷과 같이 Vue에 등록을 해주면 storybook에서 테스트 가능했던 컴포넌트들을 쉽게 불러와서 바로 사용이 가능하게 됩니다.

이런식으로 필요한 곳에서 바로 불러와서 사용이 가능합니다.

이렇게 직접 npm publish를 통해 필요한 프로젝트에서 install 해서 사용이 가능하게 되었습니다.
하지만 해당 리포에서 매번 storybook github pages 업데이트를 위한 npm run deploy-storybook 그리고 npm publish (version update)를 위한 npm run build & npm publish를 해줘야되는 번거로움을 없애기 위해서 GitHub actions (workflows)를 활용해서 master/main 브랜치에 변경사항
이 있을때 자동으로 해당 action들을 실행하게 자동화를 진행했습니다.

storybook github pages를 위한 workflow 파일

위와 같이 master 브랜치에 push가 되고 paths: [“stories/**”, “src/**”] 이렇게 stories나 src 폴더하위에서 변경사항이 있으면 npm install & npm run deploy-storybook을 실행하게 작성했습니다. secrets.GH_TOKEN은 GitHub계정에서 PAT(Personal Access Token)을 생성해서 사용합니다.

npm publish (version update)를 위한 workflow 파일

또 별도로 npm publish (version update)를 위한 workflow에서는 “v*”(version) 태그가 달린 push일 경우 npm install / npm run build / npm publish 를 자동으로 실행하게 작성했습니다. secrets.NPM_AUTOMATION_TOKEN은 npm 계정에서 automation 토큰으로 생성해서 리포지토리 secrets에 추가 해서 사용했습니다. automation 토큰이 별도의 로그인 정보가 없이 해당 계정을 통해 publish를 가능하게합니다.

storybook 페이지를 업데이트 하기위해서는 git push로 감지하는 부분에 변동사항이 있으면 자동으로 GitHub actions에서 처리를 해주고 npm package version update를 위해서는 npm version patch & git push — tags origin master 이런식으로 push에 tag를 추가해주면 GitHub actions가 트리거 되어서 npm publish를 진행합니다.

이렇게 하나의 프로젝트에서 storybook deploy(GitHub pages)와 npm publish(library)를 둘다 자동으로 처리하게 되었습니다.

막상 정리하고 보니 생각보다 간단한 작업이지만(사실 위 사진처럼 작동하게 작성했을 수도 있지만) 알체라 Client 팀에 합류한지 얼마 안된 신입 개발자인 저에게 이런 좋은 기회가 와서 전에 해보지 못했던 npm publish / storybook / GitHub actions을 배울 수 있는 좋은 기회였습니다.