🐙

自作 npm パッケージを GitHub Packages へ手動デプロイおよび自動化

2024/02/26に公開

npm

GitHub Actions

Github Packages

tech

はじめに

npm の自作パッケージの作り方は以下の記事で書いた。そこで作ったパッケージを GitHub Packages にデプロイする方法が今回の記事である。

本記事では、Vite で作ったプロジェクトが GitHub のリポジトリに乗っかっているものとする。

ちなみに、本記事で書かれている内容は以下のリンクにある公式の説明で事足りるので、こちらをみることをオススメする。これはあくまで備忘録として記述しており、新規性はほとんどないと思われる。

前提

すでに自作パッケージが GitHub 上のリポジトリとして存在し、それがローカルにgit clone済みであることを前提とする。

手動デプロイ

まずはローカル環境から手動でデプロイしてみる。

`package.json`の設定

GitHub Packages を使用するにはpackage.jsonを以下のように書き換える必要がある。

package.json

  {
+   "name": "@<スコープ名>/<パッケージ名>",
-   "name": "<パッケージ名>",
    ...
+   "repository": {
+     "type": "git",
+     "url": "<cloneするときのリポジトリのURL>"
+   },
    ...
  }

<スコープ名>としているところは端的に言えばユーザー ID か組織 ID が入るところである。現在のパッケージのリポジトリを管理しているアカウントの ID を持ってくれば良い。
なお<パッケージ名>の方はリポジトリ名である必要はない。

Personal Access Token の作成と`.npmrc`ファイルの設定

GitHub Packages にデプロイするためには Personal Access Token (PAT) を発行しなければならない。PAT はパスワードの代わりとなるような認証用のランダムに見える文字列で、以下の記事を参考に GitHub で発行できる。今回は Personal Access Token(classic) で作成し、repoとwrite:packagesに ✅ して発行する。

あとはローカル環境の作業フォルダ直下に.npmrcファイルを作成し、以下の記述をする。

.npmrc

//npm.pkg.github.com/:_authToken="<PAT>"
@<スコープ名>:registry=https://npm.pkg.github.com

あとは以下のコマンドでエラーが出なければ GitHub Packages へのデプロイ成功である。

npm publish

GitHub のリポジトリを見にいくと右側の欄の packages に新たに登録されていることがわかる。

GitHub Packages
GitHub Pages に npm-test-lib としてデプロイした例

`npm install`してみる

別のフォルダでnpm create vite@latestで React プロジェクトを新規に作成したあと、先ほど作った.npmrcファイルをコピーしてきて以下のコマンドを叩く。

npm install @<スコープ名>/<パッケージ名>

するとインストールできるので、importしてみて使えるかどうか確かめてみる。

import { ... } from "@<スコープ名>/<パッケージ名>";

デプロイ自動化

さてこれまでの手動デプロイを毎回手元で行うのはさまざまな手間がある。そこで GitHub Actions を利用した自動化をしてみる。

パイプラインの準備

.github/workflowsフォルダを作成して、その中にdeploy.yamlを以下のように作成する。

.github/workflows/deploy.yaml

name: Publish package to GitHub Packages

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v4
        name: Checkout Repository
      - uses: actions/setup-node@v4
        with:
          node-version: "20.x"
          registry-url: "https://npm.pkg.github.com"
        name: Setup .npmrc file to publish to GitHub Packages
      - run: npm ci
        name: Install Dependencies
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        name: Publish to GitHub Packages

このパイプラインの流れは以下のようである。

mainブランチにマージされたときか、GitHub のページから手動で Actions を実行したときに発火する。
Ubuntu 環境を用意する。
リポジトリをチェックアウトしてくる。（actions/checkout@v4）
適切な.npmrcファイルを作成する。（actions/setup-node@v3）
依存関係をインストールする。（npm ci）
GitHub Packages に publish する。（npm publish）

なお、公式の説明によるとactions/setup-node@v3タスクで生成される.npmrcファイルは以下のようだ。

.npmrc

//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
@<スコープ名>:registry=https://npm.pkg.github.com
always-auth=true

ここのNODE_AUTH_TOKENについては次のnpm publish時に環境変数として与えられている。その値はsecrets.GITHUB_TOKENから与えられており、これは自分で PAT を発行したりシークレット変数に登録しなくても良い。このsecrets.GITHUB_TOKENについては以下の記事を参考にすると良い。

ちなみに、公式の説明ではパイプラインのトリガー条件が以下のようになっている。

on:
  release:
    types: [published]

これは GitHub 上でリリースを切った時にトリガーされ、運用的にはこちらの方が正当であろう。
しかし、小規模な private 利用でそこまで厳密にリリースを管理する必要がなければ、今回のようにmainブランチへのマージでトリガーするのでも良いかもしれない。

実行

package.jsonのversionを変更してmainブランチにマージして正常に終了すれば成功である。
GitHub Packages に置いてあるライブラリのversionも期待通りの値かも確認しておこう。

今後の課題

package.jsonのversionと GitHub のtagを一致するように自動化できたら良い。