まえがき
約1年半ぶりですが、ちゃんと生きていますよ。
拙作『PostCSS Enumerates in Line』を公開しようとした時のこと。
前回記事でnpmjs.comにパッケージを公開する手順などを書いたのですが、セキュリティ強化により従来の方法では新規パッケージ作成ができなくなると判明しました。
そこで既存パッケージの対応方法と、新規パッケージの公開方法をメモがてら残しておきます。
2FA登録を済ませておく
前回記事の二段階認証(2FA)登録を済ませておくのは必須です。
無難にGoogle Authenticatorが良いと思われる。
度々2FA処理が挟まりますのでスマホを手元に置いて、認証アプリを起動したままにしておくと手順に詰まりにくくなるかも。
既存パッケージへの対応
GitHub連携設定
ブラウザでnpmjs.comにログインします。
パッケージのページへ移動して、「Settings」をクリック。多分ここで2FAが挟まると思います。
Trusted Publisherから「GitHub Actions」を選択。
Organization or userに、リポジトリを保存している「<GitHubのアカウント名>」を入力します。
リポジトリを保存しているアカウントが対象です。
先頭に「@」などを付ける必要はないです。
リポジトリのURLである「https://github.com/<アカウント名>/<リポジトリ名>.git」に対応しているとお考えくださいな。
Workflow filenameに、パブリッシュに使っているファイル名を入力。
「publish.yml」とかになる場合が多そう。
ディレクトリ構造で言うと「/.github/workflows/<ファイル名>」。
パブリッシュ以外にもYMLファイルを使う人はいると思うので、名前を変更していたならそのように入力してください。
最後に「Set up connection」をクリック。
(2FA乱入地点)
成功メッセージが出たら、GitHubとnpmjs.comとの連携は完了です。
publish.ymlの更新
従来のYMLファイルはこうでした。
name: Publish Package to npmjs
on:
push:
branches:
- master
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/'
always-auth: true
scope: '@********'
- run: npm ci
- run: npm publish --otp=******
env:
NODE_AUTH_TOKEN: ${{ secrets.NPMJS_TOKEN }}
それがこう変わります。
name: Publish Package to npmjs
on:
push:
branches:
- ******
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write
steps:
- uses: actions/checkout@v5
# Setup .npmrc file to publish to npm
- uses: actions/setup-node@v6
with:
node-version: '24.x'
registry-url: 'https://registry.npmjs.org/'
- run: npm ci
- run: npm publish --provenance --access public
branchesの部分にはパブリッシュ対象のブランチ名に書き換えてください。
「master」だったり「main」だったり、TPOで変わってくると思うので(四敗以上)
後はリポジトリをプッシュすれば自動的にnpmjs.com側も更新されるようになります。
ご覧の通り、otp(Google Authenticatorによるワンタイムパスワード)をパブリッシュごとに更新することも、GitHubのActions secrets and variablesのRepository secretsに環境変数としてnpmjs.comで生成したトークンを保存することもありません。
正直かなり楽になりましたが、いかんせん完全移行が今月初めに行われたばかりということもあってかネット上であまり情報を見つけられなかったのが困りましたわね。
新規パッケージの作成
新規に作成してnpmjs.com上で公開する場合、もう少し手順が必要になります。
具体的には、従来手順だとGitHubにリポジトリをプッシュすれば既存プロジェクトであれ新規プロジェクトであれ自動的に作成または更新されていたものが、新規作成の場合は自分でnpmjs.com上にブランクのプロジェクトを作成しておく必要が発生するようになりました。
ブランクのパッケージを作成する
Node.jsが実行可能なフォルダの子孫に、適当な名前をつけたフォルダを作成します。本当に何でも構いません。
VSCodeでフォルダを開き、「README.md」ファイルを作成します。
npm init -y
VSCodeのターミナルから上のコマンドで初期化して、「package.json」ファイルを生成させます。
以降、npmやnpxのコマンドが現れた場合は全てVSCodeのターミナルで入力したものとしてお読みください。
検証していないため未確認情報ですが、package.jsonの次のプロパティも変更しなくていいみたいです。
- name
- version
npm login
上のコマンドを入力すると、ブラウザの新しいタブでnpmjs.comが開いて認証するよう求められます。
ID・パスワード・2FAが完了すると、VSCode経由でログインした状態になります。
npx setup-npm-trusted-publish <パッケージ名>
「<パッケージ名>」の部分は、実際にnpmjs.com上で公開したい名称に書き換えてください。
このコマンドを実行すると、再びブラウザ認証(2FA)が入ります。
完了メッセージがターミナルに現れれば成功。
「https://npmjs.com/package/<パッケージ名>」にアクセスしてみて、ブランクのパッケージが作成されていれば成功です。
GitHub連携設定
以降の手順は同じです。
GitHubには既にリポジトリが存在しているものとします。
ブラウザでnpmjs.comのパッケージページを開いて、「Settings」をクリック。
(2FAチェックポイント)
Trusted Publisherから「GitHub Actions」を選択。
Organization or userに、リポジトリを保存している「<GitHubのアカウント名>」を入力します。
Workflow filenameに、パブリッシュに使っているファイル名(「publish.yml」など)を入力。
最後に「Set up connection」をクリック。
(2FAチェックポイント)
成功メッセージが出たら、GitHubとnpmjs.comとの連携は完了です。
publish.ymlの更新
name: Publish Package to npmjs
on:
push:
branches:
- ******
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write
steps:
- uses: actions/checkout@v5
# Setup .npmrc file to publish to npm
- uses: actions/setup-node@v6
with:
node-version: '24.x'
registry-url: 'https://registry.npmjs.org/'
- run: npm ci
- run: npm publish --provenance --access public
branchesの部分にはパブリッシュ対象のブランチ名に書き換えてください。
後はリポジトリをプッシュすれば自動的にnpmjs.com側も更新されるようになります。
多分つまづきポイントは「自分でブランクのパッケージを作る必要がある」ってところだけだと思います。
それを除けば手順が簡素化されたので便利になったかなーという印象。