GitHub Actions 経由でNPM パケージを公開する方法（トークン発行方法の説明付き）
投稿日: 2024/07/28
更新日: 2024/07/30
NPMJSでパッケージを公開する方法を説明します。Github Actionsを使って自動デプロイ（CD）させるようにします。
NPMJSでトークンの発行
NPMJSのアカウントが無ければ作成する。あればログインする。
アカウント作ったらトークンを発行します。
「Classic Token」ではなく「Granular Access Token」を選択します。
「Expiration」は理想的には短い方が良いですが、期限切れして再設定するのは面倒なので自分の許容できる範囲にしてください。異常に長い期間に設定するのはやめた方が良いです。
「Packages and scopes」は「Read and Write」に設定。「Select packages」は最初のリリースは「All packages」にする必要があります（選択するパッケージが存在しないので）。初回リリースを終えたら作成したトークンは破棄して、「Select packages」を「Only select packages and scopes」にしたトークンを使うとよさそうです（そのとき、作成したパッケージを選択してください）。
Github Actions の設定
Github Actionsで公開するように設定します。以下のドキュメント通りにやります。
Githubの該当リポジトリの設定に行きます。
secrets and variables > Actions secrets and variables > Repository secrets に発行したトークンを追加します（NameはNPM_TOKEN）。
次にActionsの設定YAMLを追加。
.github/workflows/publish_package_to_npmjs.yml
name: Publish Package to npmjs on: release: types: [published] jobs: build: runs-on: ubuntu-latest permissions: contents: read id-token: write steps: - uses: actions/checkout@v4 # Setup .npmrc file to publish to npm - uses: actions/setup-node@v4 with: node-version: "20.x" registry-url: "https://registry.npmjs.org" - run: npm ci - name: Build run: npm run build - run: npm publish --provenance --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
リリース作業
mainブランチにgithub/workflows/publish_package_to_npmjs.ymlの差分をマージしたら、Releaseから新しいリリースを作成します。
以下のコマンドを実行してタグを付けておくといいです。
しなくてもいいですが、リリースノートを自動で生成できたりするのでお勧すすめです。
ちなみにmainブランチでタグを付けないと以下の画像のようなさみしいリリースノートが生成されます（「There were no pull requests associated with the commits included in this release.」と出る）。
git checkout main git pull origin main git tag -a v0.1.0 -m 'version 0.1.0' git push origin v0.1.0
リリースを作成するとActionsが実行されてパッケージが公開されます。
成功しました
次回は
失敗したとき
Actionsのログを読んで対処してください。記事の下にいくつか僕の遭遇したエラーと対処方法をメモしています。
もし、Actionsの内容が間違っていて公開に失敗したときは、RerunしてもActionsで実行されるファイルは更新されないので、新しくリリースを作る必要があります。
package.jsonに書かれてるバージョンを変更してコミット、mainブランチに取り込みます。
git tag -a v0.1.1 -m 'version 0.1.1' git push origin v0.1.1
とした後に同じようにGithubの画面からリリースを作成。
トークンの権限不足によるエラー
以下のようなエラーが出たら権限が足りてません。
npm error code E403 npm error 403 403 Forbidden - PUT https://registry.npmjs.org/react-dropzone-vv - You may not perform that action with these credentials. npm error 403 In most cases, you or one of your dependencies are requesting npm error 403 a package version that is forbidden by your security policy, or npm error 403 on a server you do not have access to.
granular-access-tokensでトークンを作成していたのですが、「Only select packages and scopes」を選択していたのがまずかったみたい。「All packages」を選択したトークンを生成して設定します。
初回公開の際は公開されてるパッケージが存在しないので、権限不足になります。
パッケージを公開した後は「Only select packages and scopes」のトークンを使う方がよさそうです。
「id-token: write」のないエラー
Github Actionsで公開するように設定するとき、以下のドキュメント通りにやるとエラーになりました。
.github/workflows/publish_package_to_npmjs.yml
name: Publish Package to npmjs on: release: types: [published] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 # Setup .npmrc file to publish to npm - uses: actions/setup-node@v4 with: node-version: "20.x" registry-url: "https://registry.npmjs.org" - run: npm ci - name: Build run: npm run build - run: npm publish --provenance --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
npm error code EUSAGE npm error Provenance generation in GitHub Actions requires "write" access to the "id-token" permission npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2024-07-28T00_50_45_086Z-debug-0.log Error: Process completed with exit code 1.
前述している通り、以下を追加して対応できます。
permissions: contents: read id-token: write
どういった経緯で必要になってるのか興味があれば以下の記事がわかりやすかったです。
package.jsonの設定不足のエラー
package.jsonの設定が足りないと以下のようなエラーが出ます。
npm error code E422 npm error 422 Unprocessable Entity - PUT https://registry.npmjs.org/react-dropzone-vv - Error verifying sigstore provenance bundle: Failed to validate repository information: package.json: "repository.url" is "", expected to match "https://github.com/yosipy/react-dropzone-vv" from provenance
次回は
