Nuxt.jsを使って開発してるけど、
よく使う処理やUIコンポーネントをライブラリ化したい。。

とはいえ、公開できるレベルまで作り込む感じでもないので、
npmjs.comに公開するのは気が引ける。。

GitHub Packagesを使えば、非公開パッケージを用意できるっぽいので、
試してみたときの備忘録(*´ω｀*)

パッケージを公開する

package.jsonの設定

{
  "name": "@<OWNER>/<REPO>",
  "version": "0.0.1",
  "description": "private npm package sample",
  "main": "dist/index.js",
  "types": "dist/index.d.js",
  "publishConfig": {
    "access": "restricted",
    "registry": "https://npm.pkg.github.com/"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/<OWNER>/<REPO>.git"
  },
  "files": [
    "dist",
    "README.md"
  ],
  "author": "Memory Lovers, LLC",
  // ..
}

細かいことは以下に記載されている。

・パッケージの公開 | npmレジストリの利用 - GitHub Docs

`name`

GitHub Packagesはスコープ付きのnpmパッケージのみをサポート
スコープ付きの名前を使うには、"name": "@OWNER/REPO"のような形式にする

`repository`

GitHub Packagesでは、ここがGitHub リポジトリと一致している必要がある
以下のどの形式でもいけるっぽい

"repository": {
  "type": "git",
  "url": "https://github.com/<OWNER>/<REPO>"
}

"repository": {
  "type": "git",
  "url": "git@github.com:<OWNER>/<REPO>.git"
}

"repository": {
  "type": "git",
  "url": "github:<OWNER>/<REPO>"
}

・repository | package.json | npm Docs

`publishConfig`

registry ... どのレジストリにアップロードするかの設定
- GitHubの場合は、https://npm.pkg.github.com/
access ... 公開/非公開の設定
- restricted ... 非公開 (デフォルト)
- public ... 公開

・registry | config | npm Docs
・access | config | npm Docs

以下に.npmrcで指定してもOK

@OWNER:registry=https://npm.pkg.github.com

`files`

パッケージの公開時に含めるファイルを指定
デフォルトは*なので、ソースなどすべてが含まれてしまうので注意
以下のファイルは必ず含まれるらしい
- package.json
- README
- LICENSE / LICENCE
- mainフィールドのファイル

・files | package.json | npm Docs

yamlの設定

GitHub Actionsを使って、mainブランチにプッシュされたら、
自動でパッケージをリリースするように設定する。

name: publish npm package
on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checuout
        uses: actions/checkout@v3

      # Setup .npmrc file to publish to GitHub Packages
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "16"
          registry-url: https://npm.pkg.github.com
          # Defaults to the user or organization that owns the workflow file
          scope: "@<OWNER>"

      - name: Build npm package
        run: npm ci && npm run build

      - name: Publish npm package
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

基本的には、ビルドして、npm publishを叩くだけ。

注意する必要があるのは、actions/setup-node@v3。
registry-urlやscopeを設定する必要がある。
(scopeがOWNERと同じなら設定は不要)

Node.jsパッケージの公開 - GitHub Docs

パッケージを利用する

アクセストークンを取得する

GitHub Packagesからインストールする場合、
publc/privateに関わらず、必ず認証が必要になる。

そのために、Personal Access Token(PAT)を用意する。

Settings > Developer settings > Personal Access Tokensで作成。

権限(scope)はread:packagesのみでOK

.npmrcを用意する

npm iを実行したときに、PATを利用するように設定する。

### ~/.npmrc

# パッケージのスコープが`@<OWNER>`のときは、
# GitHub Packagesのレジストリを利用する
@<OWNER>:registry="https://npm.pkg.github.com"

# GitHub Packagesのレジストリを利用するときは、
# 認証トークンを設定する
//npm.pkg.github.com/:_authToken=ghp_<PERSONAL_ACCESS_TOKEN>

これでnpm i @<OWNER>/<REPO>でインストールできるように(*´ω｀*)

これでオレオレライブラリを作り放題だ(*´ω｀*)

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

GitHub Packagesでプライベートnpmパッケージを公開する