사내 디자인 시스템 자동화 개선

자동화를 개선한 이유

1. 버전관리
   이전 자동화에서는 새로 배포시 무조건 patch 명령어를 사용했다. 당시 자동화 코드를 작성할 때 patch가 정확히 무엇인지 모르고 사용했다. 버전이 동일하면 npm publish 실행시 에러를 발생해서 자동으로 버전을 높여주는 코드를 찾아서 사용한 것이었다. 문제는 여기서 시작되었다. 디자인 시스템 코드가 완전히 바뀌어서 디자인 시스템을 사용하는 프로젝트에서 코드를 수정해야 하는 경우가 있었다. 하지만 사용자가 이를 인지하지 못하면 자동으로 버전이 업데이트 되어 빌드시 에러가 발생하였다.
2. 자동 commit & push
   현재 자동화 시스템에서 github bot이 버전 변경이나 library 폴더의 변경사항을 자동으로 github에 반영한다. 스테이징, 커밋, 푸시 순으로 진행한다. 보통의 경우 github에 변경사항을 반영할때 해당 브랜치가 최신 상태이어야 한다. 그런데 github action이 진행 중 일때 누군가가 브랜치를 변경하는 상황이 발생했다. npm에 배포까지 했는데 Library 폴더에 갱신이 안되어 문제가 발생했다.

개선 방법

1. Sementic versioning 도입
   sementic versioning은 현재 많은 라이버리에서 채택하여 사용하고 있는 버전 관리 방법이다. semver이라고 부르며 자세한 내용은 아래에서 확인 할 수 있다.
   https://semver.org/lang/ko/
   간단하게 요약하자면 크게 major, minor, patch가 있다.

   major : 업그레이드 시 호환이 불가능한 경우
   minor: 호환 가능하며 새로운 기능이 추가된 경우
   patch: 호환 가능하며 새로운 기능이 추가되지 않은 경우 ex) 버그픽스

   yarn upgrade 시 major는 호환이 되지 않아 업그레이드 되지 않아 빌드시 에러가 발생하는 문제를 예방 할 수 있다. 따라서 커밋 메세지에 어떤 버전 업데이트를 진행할 것인지 추가하여 해당하는 업데이트만 진행하기로 하였다. 나의 경우에는 [major], [minor], [patch]중 하나를 커밋 PR커밋 메세지에 추가하고 커밋 메세지에 따라 액션을 달리하도록 설정하였다.
   

2. Slack noti
   github bot이 branch의 최신상태를 pull하여 오류를 해결해 보려했다. 하지만 git pull 명령어 시행시 계속해서 에러가 발생했다. 하는 수 없이 slack noti를 통해 github action 수행 도중에 다른 팀원들이 해당 브랜치에 push하지 못하도록 하였다.

구현 코드

# 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: Publish Surf Design System

on:
  push:
    branches:
      - "develop"

jobs:
  Check_Publish: # 커밋 메세지에 버전 업데이트 방식이 있는지 확인
    name: Check to publish
    if: ${{ contains(github.event.head_commit.message, '[patch]') || contains(github.event.head_commit.message, '[minor]') || contains(github.event.head_commit.message, '[major]') }}
    runs-on: ubuntu-latest
    steps:
      - run: |
          echo Start Publish
  Auto_Publish:
    name: Publish to NPM
    needs: Check_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: Noti Start Publish Npm # 배포 시작을 알리는 슬랙 noti 
        uses: 8398a7/action-slack@v3
        with:
          text: "NPM 배포를 시작합니다. 배포 완료 후 push 해 주세요"
          mention: "subteam^********"
          if_mention: always
          status: ${{job.status}}
        env:
          SLACK_WEBHOOK_URL: ${{secrets.SLACK_WEBHOOK_URL}}
        if: always()
      - name: Copy Project & build
        working-directory: ./library
        run: |
          yarn components-copy
          yarn assets-copy
          yarn hooks-copy
          yarn styles-copy
          yarn install
          yarn build
      # 버전 업데이트에 따른 배포 실행
      - name: Patch 
        working-directory: ./library
        if: ${{ contains(github.event.head_commit.message, '[patch]') }}
        run: |
          npm version patch
          npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
      - name: Minor
        working-directory: ./library
        if: ${{ contains(github.event.head_commit.message, '[minor]') }}
        run: |
          npm version minor
          npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
      - name: Major
        working-directory: ./library
        if: ${{ contains(github.event.head_commit.message, '[major]') }}
        run: |
          npm version major
          npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
      - name: Commit files
        working-directory: ./library
        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" # ci skip을 추가하여 github 액션을 건너 뛰게 함
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: develop
          
     # 배포가 완료되었음을 알림
      - name: Noti Finish Publish Npm
        uses: 8398a7/action-slack@v3
        with:
          text: "NPM 배포가 완료되었습니다!"
          fields: repo,commit,message,author
          mention: "subteam^*******"
          if_mention: always
          status: ${{job.status}}
        env:
          SLACK_WEBHOOK_URL: ${{secrets.SLACK_WEBHOOK_URL}}
        if: always()