Zenn
👷

GitHub Packagesを使用してprivateなnpmパッケージとして公開する

2023/10/23に公開
GitHub
npm
frontend
tech

同じ内容の記事がいくつも公開されていますが、実際に試してみたら結構はまったので備忘録として残します。

やりたいこと

GitHub Packagesにプライベートで公開したnpmパッケージを、複数のアプリケーションで使用する。

npmなどのレジストリから取得しているパブリックなパッケージと同じように、自作パッケージをGitHub Packagesからバージョン指定してインストールできるようにする。

GitHub Packagesとは

https://github.com/features/packages

GitHub PackagesはGitHubが提供しているレジストリ。
GitHubのユーザーまたはOrgに閉じたパッケージを公開できる。

パッケージをGitHub Packagesへパッケージ公開

package.json の設定

公開するパッケージの package.json に以下の情報を設定する。

  • name: パッケージ名
    • フォーマット: @<スコープ>/<パッケージ名>
    • 例: @052hide/my-lib
  • version: パッケージバージョン
    • フォーマット: x.x.x
    • 例: 1.0.0
  • publishConfig: registryのURL
    • フォーマット: { "@<スコープ>:registry": "<GitHub PackagesのレジストリURL>" }
    • 例: { "@052hide:registry": "https://npm.pkg.github.com" }
  • private: 削除する
    • パッケージを公開するため private: true は削除する必要がある。
      削除したからといって、Github Packagesにpublishしたパッケージがパブリックに公開されるわけではない。
{
+  "name": "@052hide/my-lib",
+  "version": "1.0.0",
+  "publishConfig": {
+    "@052hide:registry": "https://npm.pkg.github.com"
+  },
-  "private": true
  ...
}

.npmrc の設定

公開するパッケージの .npmrc に以下の情報を設定する。

  • _authToken: GitHub Packagesへ公開用のPersonal Access Token
    • GitHub Actionsから指定することを想定し、 GITHUB_PACKAGES_NPM_PUBLISH_AUTH_TOKEN という環境変数で受け取るようにする。
+ //npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_NPM_PUBLISH_AUTH_TOKEN}

ローカルからpublish

ローカルからpublishすることは無いので省略[1]

GitHub Actionsからpublish

name: Publish Package
on:
  release:
    types: [published]
jobs:
  build:
    # 省略

  publish:
    needs: build
    name: Publish GitHub Packages
    runs-on: ${{ matrix.os }}
    timeout-minutes: 30

    strategy:
      matrix:
        os: [ubuntu-latest]

    permissions:
      packages: write # GitHub Packagesへの書き込み権限が必要
      contents: read # リポジトリの内容の読み取り権限が必要

    steps:
      - name: Checkout 🛎
        uses: actions/checkout@v4.1.0

      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - run: npm publish
        env:
          GITHUB_PACKAGES_NPM_PUBLISH_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} # permissionsで指定した権限を持つGITHUB_TOKENを指定する

GitHub Packagesに公開完了🎉

公開したパッケージの使用

GitHub Packageの設定

repositoryの登録

installを許可するリポジトリを追加する。

https://github.com/orgs/<org>/packages/npm/<package-name>/settings or https://github.com/users/<user>/packages/npm/<package-name>/settings

GitHub Packagesからインストール

.npmrc の設定

.npmrc に以下の情報を設定する。

  • registry: スコープに対するレジストリURL
    • フォーマット: @<スコープ>/<パッケージ名>=https://npm.pkg.github.com
    • 例: @052hide/my-lib=https://npm.pkg.github.com
  • _authToken: GitHub Packagesから取得用のPersonal Access Token
    • GitHub Actionsから指定することを想定し、 GITHUB_PACKAGES_NPM_READ_AUTH_TOKEN という環境変数で受け取るようにする。
+ @052hide:registry=https://npm.pkg.github.com
+ //npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_NPM_READ_AUTH_TOKEN}

ローカルでパッケージインストール

PATの生成

https://github.com/settings/tokens

  • 権限
    • read:packages

GITHUB_PACKAGES_NPM_READ_AUTH_TOKEN の設定

export GITHUB_PACKAGES_NPM_READ_AUTH_TOKEN=<PAT>
# export GITHUB_PACKAGES_NPM_READ_AUTH_TOKEN=ghp_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

パッケージインストール

npm install <package-name>
# npm install @052hide/my-lib

GitHub Actionsでパッケージインストール

package.json

{
  "dependencies": {
    "@052hide/my-lib": "1.0.0"
  }
}

workflow.yml

name: Install Packages

on:
  push:

jobs:
  ci:
    name: CI
    runs-on: ${{ matrix.os }}
    timeout-minutes: 30

    strategy:
      matrix:
        os: [ubuntu-latest]

    steps:
      - name: Checkout 🛎
        uses: actions/checkout@v4.1.0

      - name: 'Install Node Modules'
        run: npm install
        env:
          GITHUB_PACKAGES_NPM_READ_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKENを指定する
          # Composite Actionを使用する場合はgithub.tokenを指定する

GitHub Packagesに公開したnpmパッケージをローカルとGitHub Actionsから使用できるようになりました🎉🎉🎉

脚注

  1. 適切な権限のPATを GITHUB_PACKAGES_NPM_PUBLISH_AUTH_TOKEN に指定が必要 ↩︎

Discussion