まえがき
web関係のエンジニアなどしていると、まずお世話になることの多いnpmjs.com。
サイト自体にはアクセスがなかったとしても「npm install」コマンドを使っているのなら十分その恩恵に与っているはずで、npmパッケージを管理したりダウンロード元になっていたり。
毎度お世話になっております。
よく利用してはいたのだけれども、機会があってPostCSS UUID Obfuscatorというパッケージを作ることになりまして、んじゃあnpmjs.comで公開できるようにしてみようかな！
ついでに公開方法も知りたいな！
という流れでできた忘備録。
かなり手探りで進めたから正しい方法なのか非常に疑わしいです。
話三割程度でお聞きくださいな。
パッケージを作る
GitHubリポジトリはプライベートのままにしておいて、ローカルで開発を進めます。
パッケージの読み込みテストでも「import myPackage from '../../my-package/index.mjs'」のように相対パスで行います。
なおパッケージ開発をする時は「npm install -D other-package」と「-D」をオプションは付けてはいけません（失敗者は語る）
公開パッケージとしてインストールしようとしても依存パッケージをインストールしてくれないので「npm install other-package」のようにして、devDependencies扱いではなくdependencies扱いでpackage.jsonに登録する必要がありました。
npmjs.comにアカウント登録をする
トップページの「Sign in」をクリックして、「Create Account」押下でアカウント作成ページに移動。
ユーザー名・メールアドレス・パスワードのよくある組み合わせなの（と手順を忘れたの）でダッシュボード画面に行くまでの詳細は省略。
二段階認証
Gravatarアイコン（≒アバターアイコン）をクリックしてメニューを開き、「Account」ページへ移動します。
Two-Factor Authentication（二段階認証）をしろと強く促されるので、そこにある「Enable 2FA」をクリック。
「Authenticator app」を選択して「Continue」をクリックすると二段階認証をするためのQRコードが表示されます。
お手持ちのスマホでGoogle Authenticatorアプリをインストール。
「＋」アイコンから「QRコードをスキャン」をタップ。
カメラが起動したらQRコードを読み取ったらば6桁の数字が表示されるので、こいつをEnter your security key nameの下にある入力欄に打ち込んで「Add security key」をクリック。
これで二段階認証は完了です。
6桁数字のセキュリティキーは約1分ごとに切り替わるので、タイマーを見て「間に合わないな」と思ったら次の数字が表示されるまで待つのをおすすめ。
トークンを生成
npmjs.comダッシュボードの「Access Tokens」ページから、「Generate New Token」をクリックして、「Classic Token」を選択します。
New Access TokenのNameには好きな名前を付けてあげてください。
Select typeは「Publish」を選択して、「Generate Token」をクリックするとページが切り替わります。
Token successfully generatedと書いてあるセクションに「npm_」から始まるトークンが表示されるでしょう。
この一度しか表示されないのでコピペして厳重に保存します。
トークンを忘れてしまった場合はこの節の手順をやり直して再生成します。
その場合、次節で登録するGitHubリポジトリのsecrets変数も更新しましょう。
GitHubリポジトリに登録
GitHubリポジトリページから、「Settings」タブを選択して、左メニューの「Secrets and variables」を押下してサブメニューを開き、「Actions」をクリックします。
Repository secretsセクションにある「New repository secret」ボタンをクリック。
Nameは仮に「NPMJS_TOKEN」としておきます。
Secretにはnpmjs.comで作成して厳重にコピペしておいたトークンを貼り付け。
「Add secret」をクリックして保存するところまで行けば、基本設定はほぼ終わり。
パッケージを公開する
GitHub Actionsを使って、masterブランチをプッシュするとnpmjs.comへの登録・更新を行うようにするための設定ファイルをリポジトリに作ります。
ファイルの場所は「.github/workflows/publish.yml」で、githubの前にあるピリオドを忘れないよう注意。
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 }}ほとんどコピペでいいです。
scopeの「@」より後ろはnpmjs.comのアカウント名なのか、GitHubのアカウント名なのか分かってないです。
otpの「=」より後ろの部分が二段階認証の6桁の数字になります。
- リポジトリのファイルは最新になるようフェッチしておく。
- package.jsonのversionを0.0.1以上バージョンアップさせる。
- Google Authenticatorを開いておく。
- publish.ymlのotp部分を最新の6桁のセキュリティキーに書き換える。
- リポジトリをコミットしてプッシュする。
つまり上の手順を約1分の間に済ませないとnpmjs.comには登録できません。
多分もっといい方法があるはずなので識者の意見求む。
チーム制作している場合
複数人で制作する場合はブランチを切って、公開・更新するタイミングでmasterブランチにマージします。
マージをしただけでも「プッシュした」扱いになるためGitHub Actionsが走ってしまい、npmjs.comへの登録処理は失敗しますが無視します。
最終確認してmasterブランチを公開するぞってタイミングで次を実行します。
- publish.ymlのotpを最新のGoogle Authenticatorのセキュリティキーに更新する。
- package.jsonのversionを0.0.1以上バージョンアップさせる。
- masterブランチでコミットしてプッシュする。
割と忘れがちなのがpackage.jsonのバージョン更新で、これは一人制作であっても必須です。
npmjs.comは新しいバージョンを示す数値に変わっていない場合「変わってへんやんけ！」と拒否しやがりますのよ。