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

# はじめに

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

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

https://qiita.com/keitaMax/items/8657d469e4d2dc094d75

https://qiita.com/keitaMax/items/bf74d1a472bf4cae3d86

# npm tokenの取得

https://www.npmjs.com/

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

![スクリーンショット 2024-07-11 18.54.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/afdd71e8-1034-4f7f-e106-1cdee12f8295.png)

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

![スクリーンショット 2024-07-11 18.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/c87244aa-facc-f9d1-1623-5129309ee15a.png)

![スクリーンショット 2024-07-11 19.00.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/e60023d7-17d2-720a-d1c8-2d16c4a4da02.png)

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

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


# GitHubにnpm tokenの登録

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

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

![スクリーンショット 2024-07-11 19.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/e8cf7b78-5be8-0e20-cf17-db423ddb86db.png)

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

![スクリーンショット 2024-07-11 19.07.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/d8a7305a-3ec9-8520-2fac-39d49336487c.png)


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

![スクリーンショット 2024-07-11 19.08.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/ab010c4a-8ceb-5d20-7fd5-eda2b4d3452f.png)

# GitHubActionsの作成

ソースの方に戻ります。

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

```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を押します。

![スクリーンショット 2024-07-11 20.11.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/ff2ce1a6-af6f-b34b-67d2-0a735b4d34fa.png)

Draft a new release を押します。

![スクリーンショット 2024-07-11 20.14.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/30f33f71-5f44-0e0c-9afe-6facdcf32f44.png)

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

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

![スクリーンショット 2024-07-11 20.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/ca020744-558e-12f9-e00b-34e10cab4787.png)

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

![スクリーンショット 2024-07-11 20.17.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/8d7af780-bebf-35be-9c42-a746b7133dcc.png)


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

![スクリーンショット 2024-07-11 20.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/9eab3daf-219e-e1a7-6a0b-8ec3ca950801.png)

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


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

![スクリーンショット 2024-07-11 20.26.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/acee79d0-0c1e-7e3c-39ed-6c01cc6a7909.png)


# 詰まったところ

```
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に以下を追加してみてください。

```json:package.json
  "repository": {
    "type": "git",
    "url": "https://github.com/NiheiKeita/react-ui-components-example"
  },
```
# 注意事項

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

```json:package.json
  "version": "0.0.22",
```

# おわりに

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

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

# 参考

https://docs.npmjs.com/creating-and-viewing-access-tokens