【React】ライブラリをGitHub上のReleaseのTagを使ってPublishする

はじめに

こんにちは、エンジニアのkeitaMaxです。

前回作成したライブラリをGitHubのReleaseのTag機能を使ってPublishできるようにします。

npm tokenの取得

NPMにログインをして、AccessTokenを押します。（自分のアイコンをクリックでメニューが開きます。）

Generate New Tokenクリックし、Granular Access Tokenを選択します。

その後、必要な情報を入力すると、npm tokenを作成することができます。

作成した後の画面でトークンが発行されるので必ず保存しておいてください。この画面から移動するともうみることができなくなります。

GitHubにnpm tokenの登録

発行したnpm tokenをGitHubに登録します。

Settings→secrets and variables→Actions→New Repository secretsを順番に押します。

NameにNPM_TOKEN、Secretに先ほど発行されたトークンを入力します。

それでAdd　Secretを押すと登録完了です。

GitHubActionsの作成

ソースの方に戻ります。

.github/workflowsディレクトリを作成しその配下にpublish.yml、を作成します。

.github/workflows/publish.yml

name: publish to npm
on:
    release:
      types: [published]

permissions:
    id-token: write
    contents: read

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
      - run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

実際にリリースしてみる

この状態でPushします。

その後、GitHubのReleasesを押します。

Draft a new release を押します。

Choose a tag を押し、新しいTagを作成します。

今回はv0.0.22を作成します。
入力欄に入力し、そのすぐ下にあるcreate new tag を押します。

その後、下にあるPublish releaseを押してリリースします。

するとActionsでBuildが走ります。

これが終わり、緑のチェックがつくとリリース完了です！

NPMの方を見に行くと、以下のように0.0.22になっています。

詰まったところ

npm error code E422
npm error 422 Unprocessable Entity - PUT https://registry.npmjs.org/react-ui-components-example - Error verifying sigstore provenance bundle: Failed to validate repository information: package.json: "repository.url" is "", expected to match "https://github.com/NiheiKeita/react-ui-components-example" from provenance
npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2024-07-11T11_08_17_008Z-debug-0.log
Error: Process completed with exit code 1.

とエラーが出た時は、package.jsonに以下を追加してみてください。

package.json

  "repository": {
    "type": "git",
    "url": "https://github.com/NiheiKeita/react-ui-components-example"
  },

注意事項

リリースする時は、package.jsonのversionをあげてください。同じバージョンだとPublishが失敗します。

package.json

  "version": "0.0.22",

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考