Github Actions로 npm publish 자동화하기

📢 npm publish를 수동으로 하는 것 보다 자동으로 하면 편리해요

 

※ 24년 작성한 글 이에요

 

release branch에 push 될 때 npm publish가 되도록 하자

 

 

❔하고 싶은 것

요구사항

• main branch에 코드가 push 됐을 때 test & build 수행
• release branch에 코드가 push 됐을 때 test & build 후 deploy 수행

 

 

🤔 Github Actions workflow file 만들기

workflow file을 중요 구간 별 분석하며 알아보자

• .github/workflows/build-and-deploy.yml 전체 내용

# Build and Deploy (CI/CD)
name: Build and Deploy

on:
  push:
    branches:
      - main
      - release

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Build project
        run: npm run build

  deploy:
    if: github.ref == 'refs/heads/release'
    needs: build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          registry-url: "https://registry.npmjs.org/"

      - name: Install dependencies
        run: npm ci

      - name: Determine version bump
        id: determine_version
        run: |
          git config --global user.name 'github-actions'
          git config --global user.email 'github-actions@github.com'
          if [[ "${{ github.event.head_commit.message }}" == *"[major]"* ]]; then
            npm version major -m "ci: bump version to %s"
          elif [[ "${{ github.event.head_commit.message }}" == *"[minor]"* ]]; then
            npm version minor -m "ci: bump version to %s"
          else
            npm version patch -m "ci: bump version to %s"
          fi
          git push --follow-tags
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

 

구간 별 분석

on

• on 부분에 Actions 실행 조건이 적힘
• main, release branch 내 push가 발생하면 해당 workflow가 실행 됨

on:
  push:
    branches:
      - main
      - release

 

jobs

• 작업 단계 중 최상위 단위
• build(CI), deploy(CD) 단위의 작업을 job으로 정의
• job 하위에 step으로 태스크를 나눌 수 있음

build job

• main, feature branch에 코드 push되면 build job 실행 됨
• test 후 build를 하는 과정임

# build job
build:
    runs-on: ubuntu-latest

    steps:
      # git repo clone
      - name: Checkout repository
        uses: actions/checkout@v4
      # Install node
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      # Install package according to package-lock.json
      - name: Install dependencies
        run: npm ci
      # test
      - name: Run tests
        run: npm test
      # build
      - name: Build project
        run: npm run build

 

deploy job

• release branch에 push 될 때만 deploy job이 실행 됨
• Github repo 내 Setting에 Secret에 NPM_TOKEN 등록 해줘야함
• 최근 commit message 내 [major], [minor], [patch] 문구 존재여부에 따라 라이브러리 버전 업데이트
• GIthub Setting에서 github actions token의 read/write 권한을 줘야 tag 달 수 있음

# deploy job
deploy:
    # release branch인지 체크
    if: github.ref == 'refs/heads/release'
    # build가 성공했는지 체크 (build가 실패했으면 deploy 실행 안함)
    needs: build
    runs-on: ubuntu-latest

    steps:
      # Checkout git repo
      - name: Checkout repository
        uses: actions/checkout@v4
      # Install node
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          registry-url: "https://registry.npmjs.org/"
      # Install package according to package-lock.json
      - name: Install dependencies
        run: npm ci
      # Determine version (major.minor.patch)
      # Create tag (v[major].[minor].[patch])
      - name: Determine version bump
        id: determine_version
        run: |
          git config --global user.name 'github-actions'
          git config --global user.email 'github-actions@github.com'
          if [[ "${{ github.event.head_commit.message }}" == *"[major]"* ]]; then
            npm version major -m "ci: bump version to %s"
          elif [[ "${{ github.event.head_commit.message }}" == *"[minor]"* ]]; then
            npm version minor -m "ci: bump version to %s"
          else
            npm version patch -m "ci: bump version to %s"
          fi
          git push --follow-tags
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      # Publish package to npm
      - name: Publish package
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

 

 

🛍️ Takeaway

• Github actions를 통한 npm 라이브러리 build/deploy (CI/CD) 자동화 방법
• Github actions workflow 구성 방법