🐙
npmで作ったNext.jsをpnpm化【Github Pages対応】
npmからpnpmへの移行方法
何も考えずにnpmで作ってしまったNext.jsのプロジェクトをpnpm化しました
pnpmの方が速いです
Github PagesにデプロイするGithub Actionsのワークフローもpnpm対応させます
pnpm移行
pnpmのインストール
pnpmをインストールします
pnpmのインストール
npm install -g pnpm
npmのパッケージ削除
node_modules
をフォルダごと削除します
package-lock.json
ファイルを削除します
パッケージマネージャの設定
パッケージマネージャとしてnpmを使わないように
pnpmによるインストールだけを許可する設定をpackage.jsonに追記します
package.json
"scripts": {
"preinstall": "npx only-allow pnpm",
パッケージの再インストール
pnpmを使ってインストールします
パッケージのインストール
pnpm install
node_modules
フォルダが帰ってきて
pnpm-lock.yaml
ファイルが生成されます
動作確認
アプリが動くか確認します
動作確認
pnpm dev
http://localhost:3000/にアクセスして表示を確認します
プロジェクトのpnpm化ができました
Github Actions変更
github提供のNext.js用ワークフローはpnpmに対応していません
インストールやビルドにpnpmを使うように変更します
Detect package manager削除
pnpmを検出してくれないので削除します
.github/workflows/nextjs.yml
- - name: Detect package manager
- id: detect-package-manager
- run: |
- if [ -f "${{ github.workspace }}/yarn.lock" ]; then
- echo "manager=yarn" >> $GITHUB_OUTPUT
- echo "command=install" >> $GITHUB_OUTPUT
- echo "runner=yarn" >> $GITHUB_OUTPUT
- exit 0
- elif [ -f "${{ github.workspace }}/package.json" ]; then
- echo "manager=npm" >> $GITHUB_OUTPUT
- echo "command=ci" >> $GITHUB_OUTPUT
- echo "runner=npx --no-install" >> $GITHUB_OUTPUT
- exit 0
- else
- echo "manager=npm" >> $GITHUB_OUTPUT
- echo "command=ci" >> $GITHUB_OUTPUT
- echo "runner=npx --no-install" >> $GITHUB_OUTPUT
- exit 0
- fi
manager, command, runnerの定義が無くなるので
それぞれを直接pnpm用に書き換えます
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "20"
- cache: ${{ steps.detect-package-manager.outputs.manager }}
+ cache: pnpm
- name: Install dependencies
- run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+ run: pnpm install
- name: Build with Next.js
- run: ${{ steps.detect-package-manager.outputs.runner }} next build
+ run: pnpm next build
キャッシュ用の設定を追加
pnpm/action-setup
を追加します
steps:
- name: Checkout
uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4
+ name: Install pnpm
+ with:
+ version: 10
+ run_install: false
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '20'
cache: pnpm
動作確認
mainブランチに変更をプッシュしてGithub Pagesにデプロイされることを確認します
以上でnpmからpnpmへの移行は終わりです
お疲れ様でした
Discussion