始める

基本的な `package.json` から始める

package.jsonjson

{
	"name": "cloudflare-vite-get-started",
	"private": true,
	"version": "0.0.0",
	"type": "module",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "npm run build && vite preview",
		"deploy": "npm run build && wrangler deploy"
	}
}

依存関係をインストールする

npm i -D vite @cloudflare/vite-plugin wrangler

yarn add -D vite @cloudflare/vite-plugin wrangler

pnpm add -D vite @cloudflare/vite-plugin wrangler

bun add -d vite @cloudflare/vite-plugin wrangler

Vite 設定ファイルを作成し、Cloudflare プラグインを含める

vite.config.tsts

import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
	plugins: [cloudflare()],
});

Cloudflare Vite プラグインは、既定では設定不要です。アプリケーションのルートにある wrangler.jsonc、wrangler.json、または wrangler.toml を探します。

設定オプションは API リファレンスを参照してください。

Worker の設定ファイルを作成する

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "cloudflare-vite-get-started",
	// Set this to today's date
	"compatibility_date": "2026-09-20",
	"main": "./src/index.ts"
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "cloudflare-vite-get-started"
# Set this to today's date
compatibility_date = "2026-09-20"
main = "./src/index.ts"

name フィールドは Worker の名前です。既定では、Worker の Vite Environment の名前にも使われます（詳細は Vite Environments を参照してください）。 main フィールドは、Worker コードのエントリファイルです。

Worker の設定について詳しくは、設定を参照してください。

Worker のエントリファイルを作成する

src/index.tsts

export default {
	fetch() {
		return new Response(`Running in ${navigator.userAgent}!`);
	},
};

この Worker へのリクエストは 'Running in Cloudflare-Workers!' を返します。コードが Workers ランタイム内で動いていることを示します。

開発、ビルド、プレビュー、デプロイ

これで、Vite の開発サーバーの起動（npm run dev）、アプリケーションのビルド（npm run build）、ビルド済みアプリケーションのプレビュー（npm run preview）、Cloudflare へのデプロイ（npm run deploy）ができます。