GitHub Actionsを使ってnpmパッケージの公開を自動化する

本記事では、GitHub Actionsを用いたnpmパッケージの公開手順についてまとめます。

前提条件

• GitHubアカウントを作成済みであること
• npmアカウントを作成済みであること
• 公開したいプロジェクトのリポジトリをGitHubで管理していること

手順

個人的には、パッケージを「最初に公開する際」はローカルで作業するのをおすすめします。理由は後述します。

1. npmにログインする

ローカル環境にてターミナルを開き、プロジェクトのルートディレクトリで以下のコマンドを実行してください。

npm login

実行後、ログイン用のURLが表示されるので、ブラウザで認証を行います。

---

2. パッケージ名の重複を確認する

npmでは公開されているパッケージ名はすべて一意である必要があります。つまり、すでに使用されている名前とは同じパッケージ名を使えません。
これが前述の「最初の公開はローカルでやるべき」と思う大きな理由のひとつです。

重複していないかどうかは以下のコマンドで確認できます（例として@ymmy/npm-sample-pkgを使っています）。

npm view @ymmy/npm-sample-pkg

このコマンドで404が返ってくれば、パッケージ名が利用可能であることを意味します。

---

3. package.jsonを修正する

以下のように、publishConfigとrepositoryフィールドを追加します。

{
  "name": "@ymmy/npm-sample-pkg",
  "version": "0.1.0",
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Ymmy833y/npm-sample-pkg.git"
  }
}

---

4. パッケージを公開する

以下のコマンドでパッケージを公開します。

npm publish --access public

コマンド実行後、再び認証が求められます。認証が成功すると公開が完了します。

これで、ローカルから行うパッケージの初回公開手順は完了です。

---

5. npmトークンを作成する

次に、npmのトークンを発行します。
ブラウザでnpmにログインし、Access Tokens → Generate New Token → Classic Token を選択します。以下の設定を行い、トークンを作成してください。

• Name: 任意の名前
• Select type: Automation

作成後、生成されたトークンが表示されるので、コピーしておきます。

---

6. GitHubリポジトリにnpmトークンを追加する

GitHubリポジトリのSettings → Secrets and variables → Actions → New repository secretを選択し、以下を設定します。

• Name: NPM_TOKEN
• Secret: 作成したトークン

---

7. GitHub Actionsのワークフローを作成する

以下の内容で.github/workflows/publish.ymlを作成してください。

name: Publish to npm

on:
  push:
    branches:
      - master

jobs:
  publish:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          registry-url: 'https://registry.npmjs.org'

      - name: Install dependencies
        run: npm install

      - name: Publish to npm
        run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

補足

1. on: push: branches: - master

   • この設定により、masterブランチに変更がプッシュされた際にワークフローが実行されます。必要に応じてデフォルトブランチ名に変更してください。

2. --provenance オプション

   • 透明性や署名情報を付与します。ただし、リポジトリがプライベートの場合は削除してください。

TypeScriptプロジェクトではワークフローにビルドステップを追加するなど、ご自身の環境にあわせて適宜カスタマイズしてください。

---

8. 疎通確認

masterブランチに新しいバージョンをマージします。なお、package.jsonのversionフィールドを更新することをお忘れなく。

---

まとめ

以上、GitHub Actionsを活用してnpmパッケージの公開を自動化する手順を解説しました。
簡単なサンプルとして、最小限のパッケージを公開しています。参考までに以下リンクをご活用ください。