사내 디자인 시스템 배포 자동화

Gn0lee·2022년 8월 9일
2

Tech 이모저모

목록 보기
4/18

배포 자동화를 시작한 계기

지난번 포스트에서 사내 디자인 시스템 배포에 관해 다루었다. 배포를 설정하고 나서 어려운 점이 있었다. 그 이유는 로컬환경에서 npm에 배포해야했기 때문이다. 그리고 작성한 코드를 두가지 경로에서 다루다 보니 관리는 더 어려웠다. 컨플루언스에 사용법을 나름 자세히 기록하고 공유했지만 팀원들은 배포가 필요할 때마다 나를 찾아왔다. 그리고 급하게 수정하다가 project와 library의 components가 일치하지 않아 코드를 수정했는데 npm에 적용이 되지 않은 이슈도 있었다. 그래서 나는 npm 배포와 project 와 library의 컴포넌트 싱크 맞추는 것을 자동화 해야겠다고 마음먹었다.

어떻게 자동화를 할까?

요새 자동화는 뜨거운 이슈인 것 같다. 내가 겪었던 문제들을 다들 겪었을테고 Github actions를 활용하고 있다는 것을 알았다. Github actions를 활용하여 테스트나 배포를 자동화 시키는 사례가 많았다. 그리고 슬랙을 연동하여 알림도 받아볼 수 있었다. Github actions를 활용하여 nodejs 패키지를 npm에 배포하는 사례가 있어 참고하여 진행했다. Github 홈페이지 내에서도 npm 키워드로 검색해보면 기본 템플릿이 있어 참고하기 좋았다.

yaml 코드

Github actions를 활용하기 위해서는 루트 디렉토리에 .github/workflows/~~.yaml이 필요하다. 해당 yaml 파일에 trigger 요소와 jobs를 작성하면 해당 trigger를 감지하면 jobs를 수행한다. 아래는 여러 글들을 참고하여 내가 처음 작성한 코드이다.

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: copy-prj
        working-directory: ./library
        run: |
          yarn components-copy
          yarn assets-copy
          yarn hooks-copy
          yarn install
          yarn build

   publish-npm:
     needs: build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 16
           registry-url: https://registry.npmjs.org
       - name: publish package
         working-directory: ./library
         run: |
           npm version patch
           npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

   commit-push:
     needs: publish-npm
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       with:
         persist-credentials: false 
         fetch-depth: 0
       - name: Create local changes
         working-directory: ./library
         run: |
           yarn components-copy
           yarn assets-copy
           yarn hooks-copy
       - name: Commit files
         run: |
           git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
           git commit -m "Add changes"
       - name: Push changes
         uses: ad-m/github-push-action@master
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           branch: main

크게 3가지 job으로 구성되어있다. build, 버전 패치 및 배포, 변경사항 commit 및 push이다. 앞의 두 과정은 어디에나 나와있는 코드들이고 마지막 커밋, 푸시는 Github actions 마켓에서 star가 제일 높은 것을 참고하여 사용했다. 하지만 코드를 작성하고 의문인 것은 3가지 job 모두 유사한 actions들을 사용하는데 굳이 분리를 해야하나 싶었다. 실제로 각 job마다 nodejs나 checkout을 다시 설정하느라 시간이 더 소요되는 것 같았다. 그리고 빌드했던 내용들이 새로운 job에 반영되지 않아 동일한 명령어가 다시 호출되는 것을 발견했다. 그래서 하나의 job에서 여러 스텝으로 개선해보았다.

최종 yaml 코드

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  release:
    types: [created]

jobs:
  Auto_Publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://registry.npmjs.org
      - name: Copy Project & build
        working-directory: ./library
        run: |
          yarn components-copy
          yarn assets-copy
          yarn hooks-copy
          yarn install
          yarn build
      - name: Publish
        working-directory: ./library
        run: |
          npm version patch
          npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
      - name: Commit files
        run: |
          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git config --local user.name "github-actions[bot]"
          git add .
          git commit -m "[ci skip]Update publish"
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main

이렇게 3가지 과정을 1개의 job에서 실행하니 확실히 시간이 많이 줄었다. 3가지 job으로 실행했을 경우 1분 46초가 소요되었는데 1개의 job에서 실행할 경우 59초가 소요되어 약 50초 정도 배포시간을 단축시킬 수 있었다.


마무리

Github actions와 yaml파일을 다루다보니 나름 재밌는 점이 많았다. 지금은 npm 배포만 설정했지만 다양한 부분에 적용하여 생산성을 매우 개선시킬 수 있을 것 같다는 생각이 들었다. 슬랙 알림을 꼭 연동해 보고싶다. 그리고 yaml파일의 문법이 있는 것 같은데 vscode에서는 확인이 되지 않아 문법오류가 여러번 발생했다. 무언갈 깔아야하는 것 같기는 한데 확인이 필요하다.

yaml에 if 조건을 이용해서 더욱 다양하게 사용하는 것 같았다. 카카오 테크블로그에 사례가 있었는데 나도 시도해 보고싶다. 더 나아가서 테스트 코드도 작성해 보고싶은데 공부할게 너무 많다..😥

profile
정보보다는 경험을 공유하는 테크 블로그입니다.

0개의 댓글