고티켓-react 컴포넌트 라이브러리 만들기(4)-semantic-release

 1,2,3 편을 거쳐 react 컴포넌트 라이브러리 만들기 시리즈의 막을 내릴 차례이다.

storybook 상에서 컴포넌트 작업을 하고, husky로 prettier와 커밋 린트를 지켜서 커밋을 하고 , rollup 을 통해 cjs , es 형식의 파일을 만들 수 있다면... 끝이다. 이상태에서 로컬에서 npm version을 수동으로 올리고 npm 을 올려버리면 된다. 

 하지만.. 우리는 협업을 하고 있지 않는가? 로컬에서 나혼자만 작업하고 있는것이 아닌 스토리북 레포지토리에서 같이 작업을 하고 있다.

따라서 github action을 통해 1편에서 storybook을 gh-page로 올려서 작업물을 공유하는 것 처럼. semantic-relase라는 것을 활용해서 버져닝과 npm 배포를 github action을 통해 자동화 시켜보도록 하자.

 

연관되는 글 디펜던시는 컴포넌트 라이브러리 만들기 2편 husky를 참고하시라.

고티켓-react 컴포넌트 라이브러리 만들기(2)-husky

이글을 통해 무엇을 얻을 수 있는지 먼저 기술하겠다.

• 깃허브에 올라가있는 프로젝트에 npm 기반의 semantic-release 를 하는방법
• commit msg 기반으로 npm 배포를 자동화 시키는 방법
• github action을 이용해서 배포를 하는방법

semantic-release

---

아래 깃허브 주소에서 한번은 읽는거 추천드린다. 결국 문서가 중요하다.

GitHub - semantic-release/semantic-release: Fully automated version management and package publishing

 semantic-release는 커밋 메시지 기반으로 버져닝을 올릴 수 있다. travis ci 든 , gitlab 이든 github든 어떠한 이벤트에 의해서 버져닝을 올릴 수있는 것이다. 필자는 github action에 main 브런치로 push ( merge) 가 들어오게 되면 버젼이 업데이트가 되게끔 action을 기술 해 놓았다.

 

설치 방법

 주의! 본인의 프로젝트가 깃허브에 올라가 있어야하며, npm 에 가입되어있어야 한다.

목표는 로컬에서 npm 으로 배포를 하는것이아닌, github action ci를 활용해서 커밋 메시지 기반으로 자동으로 배포하는 것이다.

 

 설치 방법은 크게 두단계로 나누어진다.

첫번째는 cli로 프로젝트에 sematic-release를 설치함과 동시에 , 원하는 ci 파이프라인에 대해 설정을 하는것이고,

두번째는 cli 설정했던 ci 파이프라인(github action workflows)을 만드는 것이다.

 

 sematic-release cli

 간단하게 cli를 통해서 레포지토리와 , 깃허브 설정을 할 수 있는데 npm 패키지를 어디에 배포할것인지를 정하고 ( 기본 npm치면 나오는 사이트) , 그 npm 사이트에 아이디 비번으로 로그인한뒤에 받아온 어세스토큰을 본인 깃허브 레파지토리 secret 설정에 집어 넣는 과정이다.

 아래 과정을 거치면 github action에 semantic release를 넣었을때 문제없이 잘돌아가게 된다.

GitHub - semantic-release/semantic-release: Fully automated version management and package publishing

npx semantic-release-cli setup

 본인의 프로젝트가 깃허브 레포지토리에 올라가 있다면. 자연스럽게 package.json에 "name" 등이 적혀져 있을건데 그상태에서 위명령어를 실행( 무조건 프로젝트가 깃허브에 올라가있어야만 한다)해야한다.

 cli를 실행시키면 단계적으로 npm 저장소가 어딘지, npm 유저이름과 비밀번호, 그리고 github personal AccessToken 을 물어보고 ci 파이프 라인을 어떤걸 쓸건지 물어본다. 우리는 github actions를 ci 로 선택하면 된다. 

깃헙 workflows

name: Rollup React Component NPM Package
on:
  push:
    branches:
      - main

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    if: ${{ github.ref == 'refs/heads/main' }}
    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{ github.ref }}
      - name: Setup Node
        uses: actions/setup-node@v1
      - name: Install dependencies
        run: npm ci
      - name: Run publish
        run: npm run publish
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v2
        with:
          semantic_version: 16
        env:
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

on push

main브런치(깃헙 기준)에 push 이벤트가 발생했을때 아래 jobs들을 실행시킨다. 필자는 레포 설정에서 main 브런치에 바로 push 가 되는것을 막아, PR로만 push가 되게 끔 설정해놨다.

jobs release

 main 브런치에 push 이벤트가 발생하게 되면 release라는 job이 실행되게 되는데 , npm ci ( package.lock 에서 설치) 와

3편에서 설정해두었던 npm run publish( rollup -c) 명령어가 실행되면서 dist 폴더내부에 빌드 결과물이 담기게 된다. 이후 시멘틱 릴리즈 관련 명령어들이 실행되면서 자동으로 배포가 되게 된다.

 env의 토큰은 NPM_TOKEN 은 위 설치 cli를 통해서 따로 GH_TOKEN을 시크릿으로 설정해 줘야한다. 아마 cli 명령어를 실행시키면서 GH_TOKEN 발급해달라는 주소가 나오는데 그 방식과 동일하게 하면 된다.

merge 기록

 머지를 통해서 배포가 되게되면 해당 머지 기록 밑에 릴리스에 관한 정보가 남게 된다. 이때 커밋 메시지에

• fix ( patch 버젼 x.x.1)
• feat ( minor 버젼 x.1.x)
• perf ( major 버젼 1.x.x) 

 위 세가지가 있다면 버젼을 하나씩 올릴 수가 있다. 본인 깃허브 릴리즈와 , npm 릴리즈 둘다 생기면 성공이다.( github 가 npm 샀음)

package.json 설정

또한 주의할점은 우리가 번들링해서 나온 결과물들은 dist 폴더 내부에 담기게 되고, npm으로 dist 파일만 넘기고싶으면 package.json 파일 내부에 files에 dist 를 설정해 주면된다. 그러면 npm install 했을때 깔끔하게 담기게 된다.

타 프로젝트에서 npm install 했을시의 node_modules 모습

 라이선스도 추가하고싶으면 하면된다. github에서 파일을 LICENSE로 만들게되면 형식을 바로주고, package.json 에서 라이선스 항목을 본인 라이센스 종류로 넣으면 된다. 이렇게 github action 과 , sematic-realease를 활용해서 자동으로 버져닝과 , npm 배포를 하는 방법을 알아보았다.

---

 

 이로써 react 컴포넌트 라이브러리 만들기 시리즈를 마무리짓는다. 물론 작은 프로젝트에 오버해서 하는것 같지만 , 언제까지나 npm 패키징을 해보고 싶다 라는 욕심이 있었고, 팀장으로서 효율적인 프로젝트 진행 방식에 대해서 고민했을때 스토리북이 정말 좋을것 같아 적용을 해 봤었다.

 스토리북을 사용하게 되면서 최대한 리액트 프로젝트 구조를 컴포넌트화 시켜서 설계할려고 노력을 많이하게 되었고, 만든 컴포넌트들을 바로 휴대폰(이거진짜 좋음) 으로도 볼 수있어 데스크탑에서의 반응은 이러한데 모바일에서는 이렇겠구나 하는 판단들, 그리고 깔끔한 문서화. 무엇보다도 팀원들이 바로바로 output을 배포를 통해서 볼 수 있어 동기부여가 많이 된다는 점이 좋았다.

 그리고 스토리북을 통해서 만든 리액트 컴포넌트들을 라이브러리 화 하면서 prop-types 나 rollup 과정에 대해 깊게 알 수 있었던 계기였다.

 타입스크립트 기반이 아닌게 참 아쉽긴하다 기회가 된다면 꼭 타입스크립트 기반으로 프로젝트를 만들어 나가고 싶다.

 

아래에 해당 프로젝트를 첨부한다.

GitHub - Gosrock/Gosrock-storybook: for react - UI component