自作 npm パッケージを GitHub Packages へ手動デプロイおよび自動化
はじめに
npm の自作パッケージの作り方は以下の記事で書いた。そこで作ったパッケージを GitHub Packages にデプロイする方法が今回の記事である。
本記事では、Vite で作ったプロジェクトが GitHub のリポジトリに乗っかっているものとする。
ちなみに、本記事で書かれている内容は以下のリンクにある公式の説明で事足りるので、こちらをみることをオススメする。これはあくまで備忘録として記述しており、新規性はほとんどないと思われる。
前提
すでに自作パッケージが GitHub 上のリポジトリとして存在し、それがローカルにgit clone
済みであることを前提とする。
手動デプロイ
まずはローカル環境から手動でデプロイしてみる。
package.json
の設定
GitHub Packages を使用するにはpackage.json
を以下のように書き換える必要がある。
{
+ "name": "@<スコープ名>/<パッケージ名>",
- "name": "<パッケージ名>",
...
+ "repository": {
+ "type": "git",
+ "url": "<cloneするときのリポジトリのURL>"
+ },
...
}
<スコープ名>
としているところは端的に言えばユーザー ID か組織 ID が入るところである。現在のパッケージのリポジトリを管理しているアカウントの ID を持ってくれば良い。
なお<パッケージ名>
の方はリポジトリ名である必要はない。
.npmrc
ファイルの設定
Personal Access Token の作成とGitHub Packages にデプロイするためには Personal Access Token (PAT) を発行しなければならない。PAT はパスワードの代わりとなるような認証用のランダムに見える文字列で、以下の記事を参考に GitHub で発行できる。今回は Personal Access Token(classic) で作成し、repo
とwrite:packages
に ✅ して発行する。
あとはローカル環境の作業フォルダ直下に.npmrc
ファイルを作成し、以下の記述をする。
//npm.pkg.github.com/:_authToken="<PAT>"
@<スコープ名>:registry=https://npm.pkg.github.com
あとは以下のコマンドでエラーが出なければ GitHub Packages へのデプロイ成功である。
npm publish
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
を以下のように作成する。
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
ファイルは以下のようだ。
//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
を一致するように自動化できたら良い。
Discussion