• #nuxt
  • #cloudflare
  • #deployment
  • #automation
  • #pnpm

Cloudflareデプロイの自動化スクリプト追加

課題

以前は Cloudflare Pages へのデプロイに2つのコマンドを順番に実行する必要があった：

pnpm build
wrangler pages deploy

これが面倒なので、1コマンドで実行できるようにしたい。

解決方法

apps/web/package.json の scripts セクションに新しいスクリプトを追加した。

追加したスクリプト

{
  "scripts": {
    "deploy:cloudflare": "pnpm build && wrangler pages deploy"
  }
}

使い方

pnpm deploy:cloudflare

このコマンド1つで以下が順番に実行される：

  1. pnpm build - Nuxt アプリケーションをビルド
  2. postbuild フック - node scripts/fix-routes.mjs が自動実行される
  3. wrangler pages deploy - Cloudflare Pages にデプロイ

注意点：pnpm の組み込みコマンドとの衝突

最初の試み（失敗）

当初、スクリプト名を deploy にしていた：

{
  "scripts": {
    "deploy": "pnpm build && wrangler pages deploy"
  }
}

発生したエラー

pnpm deploy
# ERR_PNPM_CANNOT_DEPLOY  A deploy is only possible from inside a workspace

原因

pnpm には pnpm deploy という組み込みコマンドがあり、これは monorepo のワークスペースをデプロイするための特殊なコマンド。

カスタムスクリプトとして deploy という名前を使うと、pnpm の組み込みコマンドと衝突してしまう。

解決策

スクリプト名を deploy:cloudflare に変更することで、衝突を回避した。

代替案：pnpm run を使う方法

もし deploy という名前をどうしても使いたい場合は、以下のように明示的に run を付けることでカスタムスクリプトを実行できる：

pnpm run deploy

ただし、混乱を避けるために deploy:cloudflare のように明示的な名前を使う方が推奨される。

メリット

  1. 操作の簡略化 - 2コマンド → 1コマンドに
  2. ミスの削減 - ビルドとデプロイの順序を間違えない
  3. 安全性 - && を使っているため、ビルドに失敗した場合はデプロイが実行されない

参考