Cloudflare Pagesでpnpmを使ってデプロイする

Cloudflare Pagesには、彼らのGithubアプリを自身のGithubアカウントもしくは組織にインストールし、リポジトリへのPushやPull Requestをトリガーに、Cloudflare Pagesにデプロイできる機能がります。Next.jsプロジェクトでpmpnを使いたい場合の、ビルドコマンドに一部必要な設定があるので紹介します。

余談ですが、例題としてモノリポで運用しているケースで書いていきます。

モノリポ構成

モノリポは、以下の通りです。

project_root

.
├── backend
├── frontend
  ├── public
  ├── src
    └── pages
  ├── package.json
  ├── next.config.js
  └── next-env.d.ts
├── packages
├── package.json
└── pnpm-workspace.yaml

pnpm-workspace.yaml

packages:
  - "packages/**"
  - "backend"
  - "frontend"

package.json

{
  "engines": {
    "node": ">=18",
    "pnpm": ">=8",
    "preinstall": "npx only-allow pnpm"
  },
  "packageManager": "pnpm@8.1.1",
  "scripts": {
    "frontend": "pnpm -F \"frontend\""
  }
}

frontend/package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": ">=18",
    "pnpm": ">=8",
    "preinstall": "npx only-allow pnpm"
  },
  "packageManager": "pnpm@8.1.1",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  }
}

ビルドの構成

ルートディレクトリ

後述するビルドコマンドを実行と成果物を出力するロケーションを指定します。今回は、packagesといった自作の依存関係があることを想定した構成になっているので、frontendディレクトリを指定せず、ルートディレクトリを指定します。

フレームワークプリセット

フレームワークプリセットをNext.jsなどにすると、推奨されるビルドコマンドが自動入力されてしまうので、NoneでOKです。

ビルドコマンド

ルートディレクトリから見たときのコマンドを記述します。

ビルドコマンド

npm install -g pnpm && pnpm frontend i && pnpm frontend build && pnpm frontend export

pnpmでビルドするにあたっては、npmでpnpmをインストールするところから始まります。その後、pnpm frontend iで依存関係をインストールし、buildとexportをします。

ビルド出力ディレクトリ

next exportをすると、outというディレクトリが生成されるので、それを指定することになります。今回は、ルートディレクトリから見てfrontend下のoutに生成されるので、そのパスを指定します。

最後に

Cloudflare Pagesで、pnpmで構築する方法についてのポイントは、ビルドコマンドの指定でnpmでpnpmをインストールしてしまう、というところだけですね。