はじめに
TypeScript × Reactで環境構築する際に、パッケージマネージャーとしてnpmではなくより速さ、セキュリティで優れている（らしい）pnpmpnpmを使ってみました。
今回は、pnpmをローカルで使うところから、GitHub Actionsでpnpmを使ってビルドするところまでやってみます。
pnpmとは？
pnpmは、npmの代わりに使えるパッケージマネージャーです。
npmより高速・効率的にパッケージを管理できるパッケージマネージャー、という理解で使い始めました。
また、モノレポのような大規模構成で真価を発揮してくれるようです。
詳しいpnpmの特徴については、以下の記事などが参考になります。
pnpmを使うなら、pnpmを強制したい
今回、pnpmを採用するなら、npmを使える状態にしておく意味がないため、.npmrc ファイルを用意してpnpmを使うように設定します。
※.npmrc は、npmの動きを制御するためのファイルです。
以下を追記しました。
engine-strict=true
use-pnpm=true
use-pnpm=true でnpmコマンドを使えなくして、pnpmを強制します。
また、engine-strict=true は、指定されたNode.jsのバージョン以外を認めないための設定です。
こちらは今回、pnpmの設定を調べている中で見つけたので、ついでに設定しました。
GitHub Actionsでもpnpmを使いたい
ここまででローカルではpnpmを使えるようになりました。
次に、GitHub Actionsでもpnpmを使って、セットアップ・ビルド・デプロイを行えるようにします。
最初は以下のようにしました。
name: Setup
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- uses: pnpm/action-setup@v3
- run: pnpm install --frozen-lockfile && pnpm run build
ところが、GitHub Actionsを実行すると以下のエラーが出ました。
Error: No pnpm version is specified.
pnpm/action-setup とは？
ここで調べてみると、pnpm/action-setup はGitHub Actionsのワークフローにpnpmを導入するためのものだと分かりました。
npmは最初からワークフローに入っていますが、pnpmはもともと入っていないため、セットアップする必要があります。
そして、今回のエラーは、
pnpmをセットアップしようとしているけど、どのバージョンのpnpmを使うの？
ということでした。
pnpmのバージョンを指定する方法として、以下の2つがありました。
方法1：pnpm/action-setup の version で指定する
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 12
方法2：package.json の packageManager を指定する
{
"name": "my-project",
"version": "1.0.0",
"packageManager": "pnpm@9.4.0"
}
今回は、まず方法1を試してみます。
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- uses: pnpm/action-setup@v4
with:
version: "12"
- run: pnpm install --frozen-lockfile && pnpm run build
すると、先ほどの
Error: No pnpm version is specified.
というエラーは解消しました。
pnpm/action-setup 以外の方法も試してみる
ここまでで目的は達成できました。
ただ、調べていると、pnpm v11以降では pnpm/setup というものも使えることが分かりました。
pnpm/action-setup と比べて、pnpmだけでなくNode.js環境もセットアップでき、オプションでpnpm installまで行えるようです。
せっかくなので、こちらも試してみます。
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- uses: pnpm/setup@v2
with:
version: "12"
cache: true
install: true
- run: pnpm run build
cache: true でpnpmストアのキャッシュを有効化し、install: true で自動的に pnpm install を実行します。
こちらも問題なく動きました。
pnpm/action-setup と pnpm/setup のどちらを使うか？
今回、両方試してみましたが、正直なところ、どちらの方法でもよいな、と思いました。
どちらを使っても、GitHub Actionsのワークフローでpnpm環境を使えるようになることには変わりません。
使い分けるとすれば、pnpmのバージョンによって考えればよさそうです。
pnpm v11以降を使う新しいプロジェクトや個人開発なら、pnpm/setup を使ってみてもよいと思います。
一方、現場の既存プロジェクトなどでpnpm v10以下を使っているのであれば、pnpm/action-setup を使えばよさそうです。
また、pnpm/setup は install: true を指定することで pnpm install まで自動で行ってくれてシンプルに書けるかなって思ったんですけど、
- run: pnpm run build
結局これやらないといけないからあんまステップ数は変わらないという、、
さいごに
実際、pnpm run buildとかpnpm run devの起動がアホほど早く感じる。
特になにか問題なければpnpm を使うで良いと思います。