記憶力が無い

プログラミングと室内園芸と何か

GitHub Packages に npm パッケージを登録してみた

自作のライブラリが npm install で使えるようになると便利だよなー と思い立って、自作の npm パッケージを GitHub Packages に登録する練習をしました。

npm パッケージをレジストリに登録すること自体初めてですが、 npmjs ではなく GitHub Packages を使ってみました。

自分がハマったところを中心にやったことをまとめます。

出来上がったもの

github.com

色々試行錯誤した跡もそのまま残しておきます...

GitHub Packages とは

github.blog

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 を使うようにしている!)。

docs.npmjs.com

次に、 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/.

パーソナルアクセストークンは、 repowrite:packages を付けたものをあらかじめ作成しておいてください(下画像)

f:id:ttk1:20200623234701p:plain
パーソナルアクセストークンの作成画面

ログイン出来たら 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 パッケージの登録完了です!

f:id:ttk1:20200623235556p:plain

GitHub Actions で publish する

GitHub Actions を使うと、 GitHub のマージやリリースと連動して publish することが出来ます。

f:id:ttk1:20200623235941p:plain

今回は、 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 が実行されます。

f:id:ttk1:20200624000807p:plain
GitHub Actions のジョブの実行画面

登録したパッケージを使ってみる

パッケージのインストールには、 @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 へのログインが必要なのはちょっと微妙
  • 慣れたらそうでもなさそうだが、ハマりどころが多い印象
Copyright © 2017 ttk1