pnpm + Next.js で GitHub Pages からサイトを公開するときの GitHub Actions

この記事の概要

GitHub から提供されているワークフローの中にある Next.js 用のものには pnpm のための設定がありません。

そのため、少し変更を加えました。
大したことない記事ですが、備忘録として投稿します。

最終的な内容

これで動きました。
変更した箇所もこの後に記載します。

name: Deploy Next.js site to Pages

on:
  push:
    branches: ["main"]

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with:
          version: 8.15.6
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: pnpm
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          static_site_generator: next
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
      - name: Install dependencies
        run: pnpm install
      - name: Build with Next.js
        run: pnpm next build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Detect package manager の削除

GitHub から提供されているワークフローでは Detect package manager というセクションがありますが、削除します。

  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v4
-       - 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 "Unable to determine package manager"
-             exit 1
-           fi
        # この後も続く

使っているパッケージマネージャーが npm か yarn かを判断して、後のコマンドを変えてくれているのですが、pnpm には対応していません。

分岐に pnpm を加えても良いのですが、手を加えるならいっそ消して（統一して）しまった方が楽だと考え、消しました。

なお、ここでの判定内容が、この後以下のような形式で使われています。

• ${{ steps.detect-package-manager.outputs.manager }}
• ${{ steps.detect-package-manager.outputs.command }}
• ${{ steps.detect-package-manager.outputs.runner }}

上から順に

• pnpm
• install
• pnpm

と書き直せば大丈夫です。

pnpm/action-setup の使用

今のままだとキャッシュができないので pnpm/action-setup を使います。

とは言っても、以下を追加しただけです

  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v4
+       - uses: pnpm/action-setup@v2
+         with:
+           version: 8.15.6
        - name: Setup Node
          uses: actions/setup-node@v4
          with:
            node-version: "20"
            cache: pnpm
        - name: Setup Pages
          uses: actions/configure-pages@v5
          with:
            static_site_generator: next

バージョンを 8.15.6 と記載しているのは、この記事を書いた時点での最新バージョンがそれだったからというだけです。

6.10.0 以上であれば問題無いようです。

ちなみに一応ですが、バージョン指定無しだとエラーで次ステップに進みませんでした。