作成したNPMパッケージのCI導入とリポジトリの設定（ブランチやタグの保護）

typescript

vite

vitepress

投稿日: 2024/07/30

Vite と VitePress でドキュメントまで含めた NPM Packageを作成する(esm, cjs対応)

前回Viteを利用したNPMパッケージ作成方法の解説をしました。

今回はパブリックなリポジトリを前提に基本的に必要だと思うリポジトリの設定とCIを構築しようと思います。

mainブランチの保護

間違ってマスタープッシュ(mainブランチだけど)したりしないようにしたり、マージにはレビュー必須にします（レビューしてくれるメンバーがいない場合はマージできなくなるので自分はルールから除外します）。

任意のリポジトリの Settings > Branches からルールを追加します。

ルールセット名は適当に入力。後で変えれます。

Targets > Target branches > Branch targeting criteria に main を入力。mainブランチを保護対象にします。

Rules > Require a pull request before merging にチェック。その下はお好みで設定。

ステータが失敗の時にマージされたくないので Require status checks to pass にもチェックを入れます。
今は必要なステータスチェックを選択しないといけないみたいです。

Enforcement statusを「Active」にして、一番下のボタンで保存すると、これでmainブランチは保護されました。

しかし、これでは自分自身もPRをマージできなくなりました（自分以外のレビューしてくれるメンバーがいないので）。

そこでBypass listに追加して、ルールから自分を除外します。

大抵バイパスするのは「Organization admin
Role」か「Repository admin
Role」でいいと思います。他のメンバーもいるときは適切なものを選んでください（というかほかのメンバーがいるならバイパスしない方が良い）。
Bypass listのとこで「Always allow」と出てますが、「Allow for pull requests only
Select bypass mode
」で充分だと思います。

これで自分自身は1人でマージできるようになりました。

タグの保護

リリース時にタグを使うのがおすすめなのですが、そのタグを他のユーザーがつけられないように保護します。

ブランチ保護と同じような感じです。

タグの作成や更新に制限を掛けて、Bypass lisに自分が含まれるようにしてください。

Enforcement statusをActiveにするのを忘れないでください。

CIの導入

.github/workflows/ci.yml を追加して、自動テストが実行されるようにします。特に言及してませんが、Vitestを導入してテストを書いてる前提とします。

.github/workflows/ci.yml
name: CI

on:
  push:

jobs:
  ts-test:
    name: TS Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
      - name: Cache node modules
        uses: actions/cache@v4
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: ./node_modules
          key: ${{ runner.os }}-npm-${{ env.cache-name }}-${{ hashFiles('./package-lock.json') }}
      - name: npm ci
        if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: |
          npm ci
      - name: Run test
        run: |
          npm run test
      - name: Run build
        run: npm run build

特に難しいことはないです。

ややこしそうな部分といえば、npm installの結果をキャッシュしているくらいですか。

ビルドは非常に短い時間で済んでいるので入れてますが、時間がかかるようなら外してもいいと思います。ただ、その場合はtscコマンドは入れておくといいです。

次回は

https://noh.ink/articles/5CDV3XNFUny2C3ieS0v0

yosi

Noh を作ってるエンジニア。

mainブランチの保護
タグの保護
CIの導入