[GitHub Actions] NPM 패키지 배포 자동화

개요

이전 블로그 포스트에서 NPM 패키지를 배포하는 방법에 대해서 알아보았습니다. NPM 패키지를 배포하는 방법에서는 아래의 링크를 참고하시기 바랍니다.

NPM에 자신의 라이브러리 배포하기

이번 블로그 포스트에서는 GitHub Actions를 사용하여 NPM 패키지 배포를 자동화하는 방법에 대해서 알아보도록 하겠습니다.

공식 문서: Publishing Node.js packages

NPM access token

GitHub Actions를 사용하여 NPM 패키지 배포를 자동화하기 위해서는 NPM의 Access token이 필요합니다. 다음 링크를 통해 NPM 사이트로 이동한 후, 로그인을 합니다.

https://www.npmjs.com/

로그인한 후, 오른쪽 상단의 프로필 이미지를 선택하고 Access Tokens를 눌러 Access Tokens 페이지로 이동합니다.

Access Tokens 페이지에서 오른쪽 상단의 Generate New Token > Classic Token 버튼을 눌러 새로운 토큰을 생성하는 페이지로 이동합니다.

New Access Token 페이지에서 Automation을 선택하고, Name을 입력하여 새로운 토큰을 생성합니다. 저는 For GitHub이라는 이름으로 새로운 토큰을 생성하였습니다.

새로운 토큰이 생성되면 토큰을 복사할 수 있는 화면이 나옵니다. 해당 토큰을 GitHub Actions에서 사용할 예정이므로 잘 복사해둡니다.

GitHub Actions variables

GitHub Actions로 NPM 패키지의 배포 자동화를 하고자 하는 저장소(Repository)로 이동 한 후, Settings > Secrets and variables > Actions 메뉴를 선택하면 다음과 같은 화면을 볼 수 있습니다.

여기서 오른쪽 상단의 New repository secret 버튼을 누르면 다음과 같은 화면을 확인할 수 있습니다.

Name에는 NPM_TOKEN을 입력하고 Secret은 앞서 NPM 사이트에서 복사한 Access token을 입력합니다.

GitHub Actions

이제 Git tag로 NPM 패키지를 자동으로 배포하는 GitHub Actions를 만들어 봅시다. .github/workflows/release.yml 파일을 만들고 다음과 같이 수정합니다.

name: Release

on:
  push:
    tags:
      - 'v[0-9]+.[0-9]+.[0-9]+'

jobs:
  release:
    permissions:
      contents: write
      pull-requests: write
      id-token: write
    runs-on: ubuntu-latest
    steps:
      - name: Get semantic version
        id: semver
        run: echo "::set-output name=version::${GITHUB_REF#refs/tags/v}"

      - uses: actions/checkout@v4
        with:
          ref: v${{ steps.semver.outputs.version }}

      - uses: actions/[email protected]
        with:
          node-version: '20.3.0'
          registry-url: 'https://registry.npmjs.org'

      - name: Update package version
        run: npm version ${{ steps.semver.outputs.version }} --no-git-tag-version

      - name: Commit updated package version
        uses: stefanzweifel/git-auto-commit-action@v4
        with:
          commit_message: 'chore: Update package version'
          branch: main

      - name: Update Git tag
        run: |
          git tag ${{ github.ref_name }} -f
          git push origin ${{ github.ref_name }} -f

      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

좀 더 자세히 이 GitHub Actions를 확인해 보도록 하겠습니다.

이 GitHub Actions는 시맨틱 버전(Semantic Version)의 Git tag에 동작합니다.

{ % raw % }
---
on:
  push:
    tags:
      - 'v[0-9]+.[0-9]+.[0-9]+'
---
{ % endraw % }

시멘틱 버전에서 v 문자를 제거한 버전을 GitHub Actions에서 사용할 수 있도록 변수에 저장합니다.

{ % raw % }
---
- name: Get semantic version
  id: semver
  run: echo "::set-output name=version::${GITHUB_REF#refs/tags/v}"
---
{ % endraw % }

시멘틱 버전의 Git tag된 코드를 가져옵니다.

{ % raw % }
---
- uses: actions/checkout@v4
  with:
    ref: v$
---
{ % endraw % }

NPM 배포를 위해 Node를 설치합니다.

{ % raw % }
---
- uses: actions/[email protected]
  with:
    node-version: '20.3.0'
    registry-url: 'https://registry.npmjs.org'
---
{ % endraw % }

package.json 파일안의 version을 현재 Git tag 버전으로 업데이트합니다.

{ % raw % }
---
- name: Update package version
  run: npm version $ --no-git-tag-version
---
{ % endraw % }

이렇게 업데이트 한 버전을 Git에서 관리하기 위해 commit & push 합니다.

{ % raw % }
---
- name: Commit updated package version
  uses: stefanzweifel/git-auto-commit-action@v4
  with:
    commit_message: 'chore: Update package version'
    branch: main
---
{ % endraw % }

이렇게 업데이트 된 소스코드를 최종 코드로 사용하기 위해 Git tag를 강제로 변경합니다.

{ % raw % }
---
- name: Update Git tag
  run: |
    git tag $ -f
    git push origin $ -f
---
{ % endraw % }

NPM의 Access token을 사용하여 현재 패키지를 NPM에 배포합니다.

{ % raw % }
---
- run: npm publish
  env:
    NODE_AUTH_TOKEN: $
---
{ % endraw % }

배포

이렇게 완성한 GitHub Actions를 사용하여 NPM 패키지를 자동으로 배포해 봅시다. 다음 명령어를 사용하면 GitHub Actions를 사용하여 NPM 패키지를 자동으로 배포할 수 있습니다.

git tag v0.1.0
git push origin v0.1.0

GitHub Actions로 자동으로 배포된 후, NPM 사이트로 이동하면 다음과 같이 패키지가 잘 배포된 것을 확인할 수 있습니다.

완료

이것으로 자신이 개발한 JavaScript 라이브러리를 GitHub Actions를 통해 NPM에 자동으로 배포하는 방법에 대해서 알아보았습니다. 여러분도 NPM에 패키지를 배포하고 관리하고 있는 경우, GitHub Actions를 사용하여 NPM 패키지 배포를 자동화해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!