INTEGRITY Dokumentace

← Cloudflare Workers / workers / local-development

Sdílení místního vývojového serveru

Svůj lokální vývojový server můžete zpřístupnit přes Cloudflare Tunnel když potřebujete sdílet náhled, otestovat webhook nebo přistupovat k aplikaci z jiného zařízení.

Tato stránka popisuje podporu tunelů v Wrangler a Cloudflare Vite plugin.

Spustit tunel

Tunel pro aktuální relaci můžete spustit pomocí Wrangler nebo pluginu Cloudflare Vite. Získáte tak buď náhodnou *.trycloudflare.com hostname přes Quick tunnel, nebo stabilní název hostitele pomocí pojmenovaný tunel.

Wrangler

Spustit wrangler dev, poté stiskněte [t] pro spuštění nebo ukončení tunelu. Wrangler vypíše veřejnou URL adresu nebo adresy tunelu pro aktuální relaci.

Chcete-li použít pojmenovaný tunel, spusťte:

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

Použijte --tunnel pokud chcete, aby se tunel otevřel automaticky při spuštění Wrangleru.

npx wrangler dev --tunnel

Cloudflare Vite plugin

Spustit vite dev, poté stiskněte t + Enter pro spuštění nebo ukončení tunelu. Přidejte tunnel do konfigurace pluginu, pokud chcete nastavit pojmenovaný tunel nebo aby se tunel otevíral automaticky při spuštění Vite.

Chcete-li použít pojmenovaný tunel se stabilními názvy hostitelů:

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

export default defineConfig({
	plugins: [
		cloudflare({
			tunnel: { name: "my-tunnel" },
		}),
	],
});
vite.config.ts
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

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

Pokud chcete, aby se tunel otevřel automaticky při spuštění Vite, nastavte tunnel.autoStart na true.

Při použití vite preview, ověřování hostitelů náhledu ve Vite stále platí:

Například:

vite.config.js
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" },
		}),
	],
});
vite.config.ts
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" },
		}),
	],
});

Bezpečnostní aspekty

Kdokoli, kdo zná URL tunelu, se může připojit k vašemu vývojovému serveru. Než tunel povolíte, zkontrolujte tedy, co vaše aplikace vystavuje navenek.