【ゼロコンフィグ】Cloudflare Workers に Nuxt をデプロイ

ステップ

1. プロジェクトの作成
2. パッケージを追加
3. 設定の追加
4. コマンドの設定
5. デプロイ

1. プロジェクトの作成

以下のコマンドを実行することでNuxtプロジェクトを作成することができます。
プロジェクトが作成済みの方は次のセクションからご覧ください。

pnpm create nuxt@latest <project-name>

今回はnuxt-workerをプロジェクト名にしました。
ここは好きに入力してもらって結構です。

次に作成したプロジェクトのディレクトリに移動します。

cd <project-name>

ディレクトリ構造は以下のようになります。

├── README.md
├── app
│   └── app.vue
├── node_modules
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── favicon.ico
│   └── robots.txt
└── tsconfig.json

2. パッケージを追加

次に必要なパッケージをインストールします。

pnpm add -D wrangler nitro-cloudflare-dev

3. 設定の追加

wranfler.jsonc

{
  "name": "nuxt-worker",
  "main": "./.output/server/index.mjs",
  "compatibility_date": "2025-10-06" // プロジェクト作成日に置き換え
}

詳細な設定方法はこちらを参考にしてください。

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },

+ modules: ["nitro-cloudflare-dev"],

+ nitro: {
+   preset: 'cloudflare_module',
+   cloudflare: {
+     deployConfig: true,
+     nodeCompat: true,
+   },
+ },
})

詳細な設定はこちらを参考にしてください。

この時点でローカル開発環境は完成です。

pnpm dev

devサーバーを起動すると、このようにモジュールが利用されていることが確認できます。

4. コマンドの設定

package.jsonにコマンドを追加します。

• preview: ビルドしないと使えない一部のバインディングを使っている場合のデバッグに必要です。
• build: ビルドしてCloudflareにデプロイします。

{
  "name": "nuxt-worker",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "postinstall": "nuxt prepare",
+   "preview": "pnpm run build && wrangler dev",
+   "deploy": "pnpm run build && wrangler deploy"
  },
  "dependencies": {
    "nuxt": "^4.1.2",
    "vue": "^3.5.22",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "nitro-cloudflare-dev": "^0.2.2",
    "wrangler": "^4.42.0"
  }
}

5. デプロイ

pnpm run deploy

実行すると以下のようになります。
途中でCLIにて質問される場合がありますが適宜選択してください。

✨ Success! Uploaded 10 files (2.43 sec)

# ~~~~~~~~

Total Upload: 615.70 KiB / gzip: 168.68 KiB
Worker Startup Time: 19 ms
Your Worker has access to the following bindings:
Binding            Resource      
env.ASSETS         Assets        

Uploaded nuxt-worker (10.04 sec)
Deployed nuxt-worker triggers (1.89 sec)
  https://nuxt-worker.kojimax.workers.dev
Current Version ID: a9c20557-b4ff-4876-9233-b3830e306a7a

ダッシュボードでもデプロイできていることが確認できました！

おまけ. テンプレートを使用

Githubにて今回紹介した方法でテンプレートを公開しています。

https://github.com/EnjoyKojima/nuxt-worker