Astroプロジェクトをnpmからpnpmへ移行する

npmで管理しているAstroプロジェクトを、pnpmへ移行するためのメモ。 Vercelにデプロイしている前提で、必要な対応もあわせて整理する。

結論

次の流れで進めれば問題ない。

1. pnpmを有効化する（Corepack推奨）
2. 既存のpackage-lock.jsonからpnpm-lock.yamlを生成する（pnpm import）
3. node_modulesを削除してpnpm install
4. package-lock.jsonを削除する
5. ローカルでdevとbuildを確認する
6. Vercel側のInstall/Build設定を確認する

手順

1. pnpmを有効化

Node.js同梱のCorepackを使う方法:

corepack enable
corepack prepare pnpm@latest --activate
asdf reshim
pnpm --version

asdfでNode.jsを管理している場合は、asdf reshimを実行してからpnpm --versionで確認する。

2. lockfileを引き継ぐ

npmで解決済みの依存をできるだけ維持したいので先に import する。

pnpm import

これでpnpm-lock.yamlが生成される。

3. 依存をクリーンインストール

rm -rf node_modules
pnpm install

4. npmのlockfileを削除

rm package-lock.json

lockfileはpnpm-lock.yamlに統一する。

Vercelへのデプロイへの対応

1. lockファイルの切り替え

Vercelはlockfileを見てパッケージマネージャを判定するため以下を実施

• pnpm-lock.yamlをコミット
• package-lock.jsonをコミット対象から外す

2. Vercelのデプロイ設定の変更

• Install Command
  • pnpm install --frozen-lockfile
• Build Command
  • pnpm run build

移行後チェックリスト

pnpm run dev
pnpm run build

• ビルドが通る
• Vercelのビルドログでpnpmが使われている
• lockfileがpnpm-lock.yamlのみ