INTEGRITY Документация

← Cloudflare Workers / workers / local-development

Общий доступ к локальному серверу разработки

Локальный сервер разработки можно предоставить через Cloudflare Tunnel когда вам нужно поделиться предпросмотром, протестировать вебхук или получить доступ к приложению с другого устройства.

На этой странице описана поддержка туннелей в Wrangler и Cloudflare Vite plugin.

Запуск туннеля

Туннель для текущей сессии можно запустить с помощью Wrangler или Cloudflare Vite plugin. В результате вы получите либо случайный *.trycloudflare.com хост через Quick tunnel, либо стабильное имя хоста через именованный туннель.

Wrangler

Запустите wrangler dev, затем нажмите [t] чтобы запустить или закрыть туннель. Wrangler выведет публичный URL-адрес (или адреса) туннеля для текущей сессии.

Чтобы использовать именованный туннель, выполните:

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

Используйте --tunnel если вы хотите, чтобы туннель открывался автоматически при запуске Wrangler.

npx wrangler dev --tunnel

Cloudflare Vite plugin

Запустите vite dev, затем нажмите t + Enter чтобы запустить или закрыть туннель. Добавьте tunnel в конфигурацию плагина, если нужно настроить именованный туннель или открывать туннель автоматически при запуске Vite.

Чтобы использовать именованный туннель с постоянными именами хостов:

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" },
		}),
	],
});

Если вы хотите, чтобы туннель открывался автоматически при запуске Vite, укажите tunnel.autoStart к true.

При использовании vite preview, проверка хоста предпросмотра Vite по-прежнему применяется:

Например:

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" },
		}),
	],
});

Соображения по безопасности

Любой, у кого есть URL туннеля, может обратиться к вашему серверу разработки, поэтому перед включением туннеля проверьте, что именно открывает ваше приложение.