npmへのpublishをGitHub Actionsで自動化する

changesetを利用してnpmjs.comにパッケージをpublishするのをGitHub Actionsで自動化するまでのメモです。

環境構築#

@changesets/cliをルートのdevDependenciesにインストールする
pnpm changeset initで.changeset/config.jsonを生成する
- パブリックリポジトリにアップロードするので、accessプロパティをpublicに書き換える
.github/workflows/release.ymlのような名前で、changesets/actionを実行するGitHub Actionsワークフローを作る
- pnpmバージョン未指定エラーが出るので、pnpm/action-setupにversion: 10を追加する
- lockファイル未発見エラーが出るので、actions/setup-nodeにcache-dependency-path: pnpm-lock.yamlを追加する
  - pnpm-lock.yamlがリポジトリに入っているか確認する
- npm publishでOTP不足エラーが出るので、permissionsにid-token: writeを追加する
ワークフローで呼び出されるnpm scriptsをルートのpackage.jsonに追加する
- "ci:version": "pnpm changeset version"
- "ci:publish": "pnpm changeset publish"
github.comのサイトで、リポジトリの設定を行う：
- Settings > Actions > Generalから、Workflow permissionsのAllow GitHub Actions to create and approve pull requestsにチェックを入れる
- そのリポジトリにchangeset/botをインストールする
  - そのプルリクエストにchangesetが含まれるかを確認してコメントで教えてくれるボット
npmjs.comのサイトで、パッケージの設定を行う：
- 初回なら一旦pnpm publish --access publicで手動publishする
- Settingsから、Trusted Publisherに信頼できるGitHub Actionsを設定する

.github/workflows/release.yml：

name: Release

on:
  push:
    branches:
      - main

concurrency: ${{ github.workflow }}-${{ github.ref }}

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write
      id-token: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v6

      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: lts/*
          cache: pnpm
          cache-dependency-path: pnpm-lock.yaml

      - name: Install dependencies
        run: pnpm install

      - name: Create Release Pull Request
        id: changesets
        uses: changesets/action@v1
        with:
          commit: "chore: update versions"
          title: "chore: update versions"
          version: pnpm ci:version
          publish: pnpm ci:publish
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

バージョン更新時#

pnpm changesetを実行する
- どのパッケージをバージョンアップするかを選択して、その概要を記述する
- .changesetフォルダに今回の内容を保存したmdファイルが生成される
.changesetの中身を含めてプッシュする
- GitHub Actionsが走って、changesets/actionのversionが実行され、それまでのバージョン更新を実際に適用したプルリクエストが生成される
changesetが生成したプルリクエストをマージする
- 再びGitHub Actionsが走って、changesets/actionのpublishが実行され、バージョン更新のあるパッケージのみがnpmjs.comにpublishされる

npmへのpublishをGitHub Actionsで自動化する

環境構築#

バージョン更新時#

参考資料#