自作のライブラリが npm install
で使えるようになると便利だよなー
と思い立って、自作の npm パッケージを GitHub Packages に登録する練習をしました。
npm パッケージをレジストリに登録すること自体初めてですが、 npmjs ではなく GitHub Packages を使ってみました。
自分がハマったところを中心にやったことをまとめます。
出来上がったもの
色々試行錯誤した跡もそのまま残しておきます...
GitHub Packages とは
GitHub Packages は、昨年11月に正式リリースされたパッケージホスティングサービスです。 npm のほかに gem, mvn, gradle, docker, dotnet CLI に対応しています。
GitHub に統合されており、諸々の作業が GitHub だけで完結するのが売りです。
GitHub のアカウントは既に持っているので、気軽に試せる GitHub Packages を選びました。
npm パッケージを作成
今回の目標は、npm パッケージを GitHub Packages に登録することなので、中身は次のようなシンプルなものにします。
// index.js module.exports = () => { console.log('Hello, GitHub Packages!'); };
コンソールに「Hello, GitHub Packages!」を表示するだけの関数を定義しています。
package.json は npm init
で自動生成されたものを使いますが、 name
だけは @{自分のGitHubのID}/{パッケージ名}
のようにします。
// package.json { "name": "@ttk1/hello", "version": "1.0.4", "description": "Hello, GitHub Packages!", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/ttk1/hello.git" }, "author": "tama@ttk1.net", "license": "MIT", "bugs": { "url": "https://github.com/ttk1/hello/issues" }, "homepage": "https://github.com/ttk1/hello#readme" }
npm パッケージを GitHub Packages に登録
そのままだと npm publish
をしてもデフォルトの npmjs が使われるので、次のコマンドで GitHub Packages を使うように設定します。
$ npm config set @ttk1:registry https://npm.pkg.github.com/
先ほど package.json の name
を @{自分のGitHubのID}/{パッケージ名}
という形式にしましたが、@{自分のGitHubのID}
の部分はスコープと呼ばれ、上のコマンドとともに使うことで、特定のスコープだけレジストリを切り替えることが出来ます(今回は @ttk1
だけ GitHub Packages を使うようにしている!)。
次に、 GitHub Packages のレジストリにログインします。
パスワードは GitHub のログインパスワードではなく、パーソナルアクセストークンを使用します。 ログインパスワードをつかうと多分うまくいきません(私の環境ではうまくいきませんでした)。
$ npm login --registry=https://npm.pkg.github.com Username: ttk1 Password: Email: (this IS public) tama@ttk1.net Logged in as ttk1 on https://npm.pkg.github.com/.
パーソナルアクセストークンは、 repo
と write:packages
を付けたものをあらかじめ作成しておいてください(下画像)
ログイン出来たら npm publish
でパッケージをレジストリに登録します。
$ npm publish npm notice npm notice package: hello@1.0.0 npm notice === Tarball Contents === npm notice 60B hello.code-workspace npm notice 74B index.js npm notice 521B package.json npm notice 605B .github/workflows/npm-publish.yml npm notice === Tarball Details === npm notice name: hello npm notice version: 1.0.0 npm notice package size: 877 B npm notice unpacked size: 1.3 kB npm notice shasum: cabc9b3c6225aa4ce5f84ce76d19a6d634b276f5 npm notice integrity: sha512-x+yGxXpHMyEDV[...]c69oD7o9NiwPg== npm notice total files: 4 npm notice + hello@1.0.0
これで npm パッケージの登録完了です!
GitHub Actions で publish する
GitHub Actions を使うと、 GitHub のマージやリリースと連動して publish することが出来ます。
今回は、 GitHub Actions 画面でサジェストに出てくる Publish Node.js Package を流用します。 用意されている設定の半分くらいは不要なので、次に示す部分以外は取り除きます。
# npm-publish.yml name: Node.js Package on: release: types: [created] jobs: publish-gpr: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: node-version: 12 registry-url: https://npm.pkg.github.com/ - run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
この設定ではリリースの作成をトリガーにして npm publish
が実行されます。
登録したパッケージを使ってみる
パッケージのインストールには、 @ttk1
スコープへのレジストリの設定および、GitHub Package へのログインが必要です(前述したコマンドの実行が必要)。
インストールは次のコマンドで行います。
$ npm install @ttk1/hello
呼び出し元のコードは次のものを使用します。
// index.js const hello = require('@ttk1/hello'); hello();
実行!
$ node index.js Hello, GitHub Packages!
「Hello, GitHub Packages!」が無事表示されました。
感想
- パッケージ名を
hello
にしてたのが良くなくて、時間を無駄にした - パッケージをインストールするだけでも GitHub Package へのログインが必要なのはちょっと微妙
- 慣れたらそうでもなさそうだが、ハマりどころが多い印象