npm에 라이브러리 릴리즈하고 운영하기

안녕하세요. 오늘은 npm 라이브러리를 릴리즈하고 운영한 경험을 이야기해 보려고 합니다.
Github Action으로 자동배포, Github Template, 오픈소스에 기여하고 홍보하기에 대한 내용을 함께 담아 보겠습니다.

1. react-vite-ts-boilerplate 소개

npm 링크: https://www.npmjs.com/package/react-vite-ts-boilerplate
github 링크: https://github.com/choisohyun/react-vite-ts-boilerplate

이 라이브러리의 컨셉은 ‘Very Fast React Boilerplate’입니다. 당시 제가 관심 있던 Vite와 React, 다른 개발 구성 요소를 섞어 만들었습니다.

Getting started를 보면 create-react-app처럼 명령어를 통해 프로젝트를 구성해 주는 역할도 할 수 있습니다. 사실 이 기능을 만들어 보고 싶어서 시작하게 되었습니다. ㅎㅎ

Issue와 Pull Request를 활용해서 넣고 싶은 기능은 체크해서 넣어보았습니다. 굵직한 내용은 아래에서 좀 더 자세히 설명해 보겠습니다.

Screenshot_2024-01-23_at_9 39 22_PM

2. Github Action으로 자동배포

npm에 배포하는 것은 처음은 로컬로 가능하지만, 계속 운영할 예정이라면 자동배포가 필요하다고 생각했습니다.

버전을 자동으로 업데이트되게 하려면 semantic commit 규칙을 따라 작성해야 합니다. 이를 위해 커밋 메시지를 관리하는 husky, commitlint, lint-staged를 사용하였습니다. commitlint의 컨벤션을 따르도록 아래와 같이 설정했습니다.

  // package.json    
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
    "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },

main에 작성한 기능이 머지되고 나면 github actions가 트리거 되면서 버전을 올리는 봇을 실행하고 npm에 배포가 되는 흐름을 생각했습니다.

버전 관리에는 semantic release를 사용했는데, 이 패키지는 커밋 메시지를 규칙에 따라 다음 버전을 결정하고 로그를 생성하는 역할을 합니다. 커밋 분석, changelog 작성 등 설정하고 싶은 플러그인들을 추가해 주었습니다.

// .releaserc
{
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/changelog",
    "@semantic-release/release-notes-generator",
    ["@semantic-release/npm", {
      "npmPublish": false,
    }],
    "@semantic-release/git"
  ]
}

자동 배포는 semantic release를 위해 생성된 액션인 Action For Semantic Release를 사용했습니다.

GITHUB_TOKEN 와 NPM_TOKEN을 secrets로 설정해 두면 사용할 수 있어서 간편하게 적용할 수 있었습니다.

// .github/workflows/cd.yaml
steps:
  - name: Checkout
    uses: actions/checkout@v4
  - name: Semantic Release
    uses: cycjimmy/semantic-release-action@v4
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

이렇게 설정이 제대로 되면 main에 머지됐을 때 아래 작업을 완수합니다.