既存プロジェクトのデプロイ

Wrangler はフレームワークを自動検出し、Cloudflare Workers 向けにプロジェクトを設定できます。設定ファイルを手で用意したりアダプターをインストールしたりせず、既存プロジェクトを 1 コマンドでデプロイできます。

Wrangler 設定ファイルがないプロジェクトディレクトリで wrangler deploy または wrangler setup を実行すると、Wrangler は次を行います。

1. フレームワークを検出する - プロジェクトを解析し、使っているフレームワークを特定します
2. 確認を求める - 検出した設定を表示し、変更前に確認します
3. アダプターをインストールする - フレームワークに必要な Cloudflare アダプターをインストールします
4. 設定を生成する - 適切な設定で wrangler.jsonc を作成します
5. package.json を更新する - deploy、preview、cf-typegen などのスクリプトを追加します
6. git を設定する - .gitignore に Wrangler 固有のエントリを追加します

自動設定は次のフレームワークに対応しています。

React や Vue の SPA など、ほかのプロジェクトでも自動設定が動くことがあります。wrangler deploy または wrangler setup を実行し、検出されるか確認してください。

自動設定が走ると、次のファイルが作成または変更されることがあります。

フレームワークに合った設定で、新しい Wrangler 設定ファイルが作られます。

{
	"$schema": "node_modules/wrangler/config-schema.json",
	"name": "my-project",
	"main": "dist/_worker.js/index.js",
	// Set this to today's date
	"compatibility_date": "2026-09-20",
	"compatibility_flags": ["nodejs_compat"],
	"assets": {
		"binding": "ASSETS",
		"directory": "dist",
	},
	"observability": {
		"enabled": true,
	},
}

"$schema" = "node_modules/wrangler/config-schema.json"
name = "my-project"
main = "dist/_worker.js/index.js"
# Set this to today's date
compatibility_date = "2026-09-20"
compatibility_flags = [ "nodejs_compat" ]

[assets]
binding = "ASSETS"
directory = "dist"

[observability]
enabled = true

正確な設定はフレームワークによって異なります。

package.json に次のスクリプトが追加されます。

{
	"scripts": {
		"deploy": "npm run build && wrangler deploy",
		"preview": "npm run build && wrangler dev",
		"cf-typegen": "wrangler types"
	}
}

Wrangler 固有のエントリが追加されます。

# wrangler files
.wrangler
.dev.vars*
!.dev.vars.example

出力ディレクトリに Worker ファイルを生成するフレームワークでは、静的アセットのアップロードから除外するため .assetsignore が作られます。

_worker.js
_routes.json

既存プロジェクトをデプロイするには、プロジェクトディレクトリで wrangler deploy を実行します。

npx wrangler deploy

yarn wrangler deploy

pnpm wrangler deploy

Wrangler はフレームワークを検出し、適用する設定を表示し、変更とデプロイの前に確認を求めます。

デプロイせずにプロジェクトを設定するには、wrangler setup を使います。

npx wrangler setup

yarn wrangler setup

pnpm wrangler setup

デプロイ前に生成された設定を確認したいときに便利です。

ファイルを変更せず、どのような変更が入るかを見るには:

npx wrangler setup --dry-run

yarn wrangler setup --dry-run

pnpm wrangler setup --dry-run

生成される設定の要約が出力されます。

確認プロンプトを飛ばすには、--yes フラグ を使います。

npx wrangler deploy --yes

yarn wrangler deploy --yes

pnpm wrangler deploy --yes

妥当なデフォルトで設定が自動適用されます。CI/CD 環境や、検出された設定を確認せずに受け入れたいときに便利です。

Cloudflare ダッシュボードから GitHub または GitLab のリポジトリをインポートすると、autoconfig は非対話で走ります。リポジトリに Wrangler 設定ファイルがない場合、Workers Builds が必要な設定のプルリクエストを作成します。

PR には、上で説明した設定変更がすべて含まれます。マージ前にテストできるよう、プレビューデプロイも生成されます。マージすると、プロジェクトはデプロイできる状態になります。

詳細は 自動プルリクエスト を参照してください。

自動設定を走らせたくない場合は、wrangler deploy を実行する前に、有効な Wrangler 設定ファイル（wrangler.toml、wrangler.json、または wrangler.jsonc）をプロジェクトに置きます。

フレームワークガイド の各ガイドに従い、手動で設定することもできます。

Next.js プロジェクトでは、自動設定は Cloudflare Workers 向けのデフォルトデプロイパスとして vinext を使います。生成される設定は vinext と Vite の依存関係を追加し、Cloudflare Workers の設定を作り、開発・ビルド・デプロイ用の package スクリプトを追加します。

vinext は Incremental Static Regeneration（ISR）、"use cache"、unstable_cache などの Next.js キャッシュ機能に対応しています。本番アプリケーションでは、必要なキャッシュバックエンドを生成された Workers プロジェクトに設定します。詳細は vinext のキャッシュ ↗ を参照してください。

vinext ではなく OpenNext アダプターが必要な場合は、OpenNext アダプターガイド に従い手動で設定します。

Cloudflare ダッシュボードの Workers Builds からリポジトリをインポートすると、プロジェクトに複数のフレームワークがある場合は自動設定が失敗します。解決するには、ルートディレクトリ を、フレームワークが 1 つだけのパスに設定します。モノレポについては モノレポのセットアップ を参照してください。

ローカルで wrangler deploy または wrangler setup を実行した場合、複数のフレームワークが検出されると、どれを使うか確認されます。

フレームワークが検出されない場合は、package.json にそのフレームワークが依存関係として含まれていることを確認します。

Wrangler 設定ファイルがすでに存在する場合、自動設定は走りません。再設定するには、既存の設定ファイルを削除してから、もう一度 wrangler deploy または wrangler setup を実行します。

モノレポと npm / yarn / pnpm ワークスペースの対応は、現時点では限定的です。Wrangler はコマンドを実行したプロジェクトディレクトリを解析しますが、ワークスペースルートにインストールされた依存関係は検出しません。フレームワークが個別プロジェクトの package.json ではなく、ワークスペースルートの package.json に依存関係として書かれていると、フレームワーク検出が失敗することがあります。

問題があれば Wrangler の GitHub リポジトリ ↗ に報告してください。