Github action으로 npm package 배포 자동화하기

이 글에서는 필자가 배포한 tiny-eqaul 패키지를 npm에 배포하는 과정을 자동화하는 github workflow를 쓰게된 계기와, 코드를 공유하고자 한다.

배포 자동화를 도입하게 된 계기

npm 패키지의 새 업데이트를 배포하기 위해서는 다음과 같은 과정을 거쳐야 한다.

1. package.json의 version을 업데이트한다.
2. npm publish로 npm에 해당 version의 업데이트를 배포한다.
3. github release에 소스 코드 zip 파일을 업로드 후, 업데이트 한다.

이 과정을 업데이트마다 반복하게 되면 번거롭기 때문에, 이 과정을 한번에 수행할 수 있는 workflow를 추가하여 github action을 통해 배포 자동화를 진행하게 되었다.

workflow file 작성하기

프로젝트 루트에 .github/workflows 폴더를 생성한 다음, yaml 파일을 생성한다. 필자는 deploy_and_release_package.yaml 이름으로 파일을 생성했다.

trigger 설정하기

만약 여러 명에서 작업한다면 예를 들어 git flow를 이용하는 경우, release branch에 PR을 올리면 trigger시켜 배포하도록 할 수 있다.
하지만 해당 패키지는 필자 혼자 작업한 패키지이므로, workflow_dispatch를 이용해서 trigger하면 actions 페이지에서 수동으로 workflow를 trigger 할 수 있다.

on:
  workflow_dispatch:
    inputs:
      tags:
        description: 'Semantic Tag'     
        required: true
        default: 'v1.0.0'
        type: string # 'v[0-9]+.[0-9]+.[0-9]+'
      release_body:
        description: 'Release body'
        default: ''
        type: string

input에 sementic tag 버전과 release body, 즉 해당 release에 대한 설명을 추가할 수 있도록 했다. 그러면 아래와 같이 actions 탭에서 workflow를 선택하여 직접 trigger 시킬 수 있다.

actions build

다음으로는 action 환경에서 node 환경 설정을 하고, pnpm build를 통해 패키지를 빌드하여 asset을 만들도록 한다.
이 때 주의할 점은 permissions에 actions, contents에 쓰기 권한 (write)를 줘야한다. 그렇게 해야지 해당 action에서 파일을 업로드 하고, commit을 업데이트 할 수 있다.

jobs:
  publish_npm:
    name: Publishing to NPM

    runs-on: ubuntu-latest

    permissions:
      actions: write
      contents: write
      id-token: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: latest
          cache: 'pnpm'
          registry-url: https://registry.npmjs.org/

      - name: Install dependencies
        run: pnpm install

      - name: Build dist files
        run: pnpm run build

다음으로는 앞서 말한 3가지 문제점을 차례 차례 구현해보겠다.

1. package.json의 버전 업데이트하기

bump-version을 사용하면 package.json의 버전을 수동으로 업데이트 할 수 있다. 해당 action을 사용해서 package.json의 버전을 앞서 받은 inputs.tag와 함께 업데이트 시킨다.

  # Deploy package to NPM
      - name: Bump Version of package.json
        uses: ramonpaolo/bump-version@v2.3.1
        with:
          tag: ${{ inputs.tags }}
          commit: true
          branch_to_push: 'main'

2. npm에 패키지 publish 하기

# ...
- name: Publish package to NPM
  run: npm publish --provenance --access public
  env:
    NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

필자는 NPM_TOKEN을 key로 사용했고, npm에서 발급받은 secret key를 repository에 등록해야한다. 등록하는 방법은 해당 블로그 문서에 잘 정리 되어있으니 참고 바란다.

3. github release에 소스 코드 assets을 등록하기

새 github release를 생성하는 actions/create-release action을 이용했다.
생성할 때, body에 앞서 받은 inputs.release_body를 추가하여 업데이트 사항을 추가할 수 있다.

  # Release package to Github
  - name: Create release
    id: create_release
    uses: actions/create-release@v1
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    with: 
      tag_name: ${{ inputs.tags }}
      release_name: ${{ inputs.tags }}
      body: ${{ inputs.release_body }}
      draft: false
      prerelease: false

release assets을 추가하기

./dist/index.js폴더 경로에 있는 index.js를 actions/upload-release-asset@v1 action을 이용해 등록한다.

  - name: Upload Release Assets
    id: upload_release_assets
    uses: actions/upload-release-asset@v1
    env: 
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    with:
      upload_url: ${{ steps.create_release.outputs.upload_url }}
      asset_path: ./dist/index.js
      asset_name: tiny_equal.js
      asset_content_type: application/javascript

마무리

이상으로 github workflow를 이용해 npm 패키지를 배포하는 것을 자동화 하는 과정을 작성해 보았다.
궁금한 점이 있다면 댓글로 남기거나, github workflow 공식 문서를 참고하길 바란다.