ローカル開発サーバーを共有する

プレビューの共有、webhook のテスト、別デバイスからのアプリへのアクセスが必要なときは、Cloudflare Tunnel 経由でローカル開発サーバーを公開できます。

このページでは、Wrangler と Cloudflare Vite plugin のトンネル対応について説明します。

Wrangler または Cloudflare Vite plugin で、現在のセッション用にトンネルを開始できます。得られるホスト名は、Quick tunnel によるランダムな *.trycloudflare.com、または named tunnel による固定ホスト名のどちらかです。

Wrangler

wrangler dev を実行し、[t] を押してトンネルを開始または終了します。Wrangler は、現在のセッションの公開トンネル URL を表示します。

named tunnel を使う場合は、次を実行します。

npx wrangler dev --tunnel-name=my-tunnel

yarn wrangler dev --tunnel-name=my-tunnel

pnpm wrangler dev --tunnel-name=my-tunnel

--tunnel を指定すると、Wrangler の起動時にトンネルが自動で開きます。

npx wrangler dev --tunnel

yarn wrangler dev --tunnel

pnpm wrangler dev --tunnel

Cloudflare Vite plugin

vite dev を実行し、t + Enter を押してトンネルを開始または終了します。named tunnel を設定したい場合や、Vite の起動時にトンネルを自動で開きたい場合は、プラグイン設定に tunnel を追加します。

固定ホスト名の named tunnel を使う場合:

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

export default defineConfig({
	plugins: [
		cloudflare({
			tunnel: { name: "my-tunnel" },
		}),
	],
});

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

export default defineConfig({
	plugins: [
		cloudflare({
			tunnel: { name: "my-tunnel" },
		}),
	],
});

Vite の起動時にトンネルを自動で開きたい場合は、tunnel.autoStart を true に設定します。

vite preview を使う場合も、Vite のプレビューホスト検証は適用されます。

• Quick tunnel の場合は、preview.allowedHosts に .trycloudflare.com を追加します。
• named tunnel の場合は、解決済みホスト名、または .my-domain.com のような一致するドメインサフィックスを preview.allowedHosts に追加します。

例:

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

export default defineConfig({
	preview: {
		allowedHosts: [
			// For Quick tunnels:
			".trycloudflare.com",
			// For named tunnels:
			".my-domain.com",
		],
	},
	plugins: [
		cloudflare({
			tunnel: { name: "my-tunnel" },
		}),
	],
});

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

export default defineConfig({
	preview: {
		allowedHosts: [
			// For Quick tunnels:
			".trycloudflare.com",
			// For named tunnels:
			".my-domain.com"
		],
	},
	plugins: [
		cloudflare({
			tunnel: { name: "my-tunnel" },
		}),
	],
});

トンネル URL を知っている人は誰でも開発サーバーに到達できます。トンネルを有効にする前に、アプリが何を公開しているかを確認してください。

• 認証のないプレビューや管理用エンドポイントに特に注意します。
• 実リソースに接続している remote bindings を確認します。
• プライベートまたは内部サービスへリクエストをプロキシするコードを確認します。
• Cloudflare Vite plugin と vite dev を使っている場合、HMR とモジュール配信により、ソースファイル、ファイルパス、プロジェクト構成がトンネル経由で露出することがあります。ビルド済みプレビューだけを共有する場合は、公開共有には vite preview を使ってください。
• /cdn-cgi/* などのローカル開発用ルートは制限されたままで、トンネル経由では公開されません。
• 固定ホスト名やより厳しいアクセス制御が必要な場合は、Cloudflare Access で保護した named tunnel を使います。

• Cloudflare Tunnel