<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/share">share</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/share/github-actions/deploy-npm-library/">[GitHub Actions] NPM 패키지 배포 자동화</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#npm-access-token">NPM access token</a></li><li><a href="#github-actions-variables">GitHub Actions variables</a></li><li><a href="#github-actions">GitHub Actions</a></li><li><a href="#%EB%B0%B0%ED%8F%AC">배포</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>이전 블로그 포스트에서 <code>NPM</code> 패키지를 배포하는 방법에 대해서 알아보았습니다. <code>NPM</code> 패키지를 배포하는 방법에서는 아래의 링크를 참고하시기 바랍니다.<ul><li><a href="https://deku.posstree.com/ko/share/deploy-npm-library/" target="\_blank">NPM에 자신의 라이브러리 배포하기</a></li></ul>이번 블로그 포스트에서는 <code>GitHub Actions</code>를 사용하여 <code>NPM</code> 패키지 배포를 자동화하는 방법에 대해서 알아보도록 하겠습니다.<ul><li>공식 문서: <a href="https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages" rel="nofollow noreferrer" target="\_blank">Publishing Node.js packages</a></li></ul><h2 id="npm-access-token">NPM access token</h2><code>GitHub Actions</code>를 사용하여 <code>NPM</code> 패키지 배포를 자동화하기 위해서는 <code>NPM</code>의 <code>Access token</code>이 필요합니다. 다음 링크를 통해 <code>NPM</code> 사이트로 이동한 후, 로그인을 합니다.<ul><li><a href="https://www.npmjs.com/" rel="nofollow noreferrer" target="\_blank">https://www.npmjs.com/</a></li></ul>로그인한 후, 오른쪽 상단의 프로필 이미지를 선택하고 <code>Access Tokens</code>를 눌러 <code>Access Tokens</code> 페이지로 이동합니다.<picture><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/access_token.avif" type="image/avif"><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/access_token.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/share/2023/github-actions/deploy-npm-library/access_token.png" alt="NPM access token"></picture><code>Access Tokens</code> 페이지에서 오른쪽 상단의 <code>Generate New Token</code> &gt; <code>Classic Token</code> 버튼을 눌러 새로운 토큰을 생성하는 페이지로 이동합니다.<picture><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/generate_new_token.avif" type="image/avif"><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/generate_new_token.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/share/2023/github-actions/deploy-npm-library/generate_new_token.png" alt="NPM generate new classic token"></picture><code>New Access Token</code> 페이지에서 <code>Automation</code>을 선택하고, <code>Name</code>을 입력하여 새로운 토큰을 생성합니다. 저는 <code>For GitHub</code>이라는 이름으로 새로운 토큰을 생성하였습니다.<picture><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/generate_new_token.avif" type="image/avif"><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/generate_new_token.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/share/2023/github-actions/deploy-npm-library/generate_new_token.png" alt="NPM generate new classic token"></picture>새로운 토큰이 생성되면 토큰을 복사할 수 있는 화면이 나옵니다. 해당 토큰을 <code>GitHub Actions</code>에서 사용할 예정이므로 잘 복사해둡니다.<h2 id="github-actions-variables">GitHub Actions variables</h2><code>GitHub Actions</code>로 <code>NPM</code> 패키지의 배포 자동화를 하고자 하는 저장소(Repository)로 이동 한 후, <code>Settings</code> &gt; <code>Secrets and variables</code> &gt; <code>Actions</code> 메뉴를 선택하면 다음과 같은 화면을 볼 수 있습니다.<picture><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/npm_token.avif" type="image/avif"><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/npm_token.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/share/2023/github-actions/deploy-npm-library/npm_token.png" alt="Set NPM token to GitHub Actions variables"></picture>여기서 오른쪽 상단의 <code>New repository secret</code> 버튼을 누르면 다음과 같은 화면을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/github_actions_new_secret.avif" type="image/avif"><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/github_actions_new_secret.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/share/2023/github-actions/deploy-npm-library/github_actions_new_secret.png" alt="Add NPM token to GitHub Actions new secret"></picture><code>Name</code>에는 <code>NPM_TOKEN</code>을 입력하고 <code>Secret</code>은 앞서 <code>NPM</code> 사이트에서 복사한 <code>Access token</code>을 입력합니다.<h2 id="github-actions">GitHub Actions</h2>이제 <code>Git tag</code>로 <code>NPM</code> 패키지를 자동으로 배포하는 <code>GitHub Actions</code>를 만들어 봅시다. <code>.github/workflows/release.yml</code> 파일을 만들고 다음과 같이 수정합니다.<div><pre><code>
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/<a href="/cdn-cgi/l/email-protection" data-cfemail="7003150405005d1e1f14153006435e465e40">[email&nbsp;protected]</a>
 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 }}

</code></pre></div>좀 더 자세히 이 <code>GitHub Actions</code>를 확인해 보도록 하겠습니다.이 <code>GitHub Actions</code>는 <a href="https://semver.org/" rel="nofollow noreferrer" target="\_blank">시맨틱 버전(Semantic Version)</a>의 <code>Git tag</code>에 동작합니다.<div><pre><code>
on:
 push:
 tags:
 - 'v[0-9]+.[0-9]+.[0-9]+'

</code></pre></div>시멘틱 버전에서 <code>v</code> 문자를 제거한 버전을 <code>GitHub Actions</code>에서 사용할 수 있도록 변수에 저장합니다.<div><pre><code>
- name: Get semantic version
 id: semver
 run: echo "::set-output name=version::${GITHUB_REF#refs/tags/v}"

</code></pre></div>시멘틱 버전의 <code>Git tag</code>된 코드를 가져옵니다.<div><pre><code>
- uses: actions/checkout@v4
 with:
 ref: v${{ steps.semver.outputs.version }}

</code></pre></div><code>NPM</code> 배포를 위해 <code>Node</code>를 설치합니다.<div><pre><code>
- uses: actions/<a href="/cdn-cgi/l/email-protection" data-cfemail="bfccdacbcacf92d1d0dbdaffc98c9189918f">[email&nbsp;protected]</a>
 with:
 node-version: '20.3.0'
 registry-url: 'https://registry.npmjs.org'

</code></pre></div><code>package.json</code> 파일안의 <code>version</code>을 현재 <code>Git tag</code> 버전으로 업데이트합니다.<div><pre><code>
- name: Update package version
 run: npm version ${{ steps.semver.outputs.version }} --no-git-tag-version

</code></pre></div>이렇게 업데이트 한 버전을 <code>Git</code>에서 관리하기 위해 <code>commit &amp; push</code> 합니다.<div><pre><code>
- name: Commit updated package version
 uses: stefanzweifel/git-auto-commit-action@v4
 with:
 commit_message: 'chore: Update package version'
 branch: main

</code></pre></div>이렇게 업데이트 된 소스코드를 최종 코드로 사용하기 위해 <code>Git tag</code>를 강제로 변경합니다.<div><pre><code>
- name: Update Git tag
 run: |
 git tag ${{ github.ref_name }} -f
 git push origin ${{ github.ref_name }} -f

</code></pre></div><code>NPM</code>의 <code>Access token</code>을 사용하여 현재 패키지를 <code>NPM</code>에 배포합니다.<div><pre><code>
- run: npm publish
 env:
 NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

</code></pre></div><h2 id="배포">배포</h2>이렇게 완성한 <code>GitHub Actions</code>를 사용하여 <code>NPM</code> 패키지를 자동으로 배포해 봅시다. 다음 명령어를 사용하면 <code>GitHub Actions</code>를 사용하여 <code>NPM</code> 패키지를 자동으로 배포할 수 있습니다.<div><pre><code>git tag v0.1.0
git push origin v0.1.0
</code></pre></div><code>GitHub Actions</code>로 자동으로 배포된 후, <code>NPM</code> 사이트로 이동하면 다음과 같이 패키지가 잘 배포된 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/package_deployed_to_npm.avif" type="image/avif"><source srcset="/assets/images/category/share/2023/github-actions/deploy-npm-library/package_deployed_to_npm.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/share/2023/github-actions/deploy-npm-library/package_deployed_to_npm.png" alt="package is deployed to NPM"></picture><h2 id="완료">완료</h2>이것으로 자신이 개발한 JavaScript 라이브러리를 <code>GitHub Actions</code>를 통해 <code>NPM</code>에 자동으로 배포하는 방법에 대해서 알아보았습니다. 여러분도 <code>NPM</code>에 패키지를 배포하고 관리하고 있는 경우, <code>GitHub Actions</code>를 사용하여 <code>NPM</code> 패키지 배포를 자동화해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

GitHub Actions를 사용하여 NPM 패키지 배포를 자동화하는 방법에 대해서 알아봅시다.