跳转到内容
搜索文档

共享本地 dev 服务器

最后更新 查看 MarkdownAgent 设置

当你需要共享预览、测试 webhook 或从其他设备访问应用时,可以通过 Cloudflare Tunnel 暴露本地 dev 服务器。

本页介绍 WranglerCloudflare Vite 插件 中的隧道支持。

启动隧道

你可以使用 Wrangler 或 Cloudflare Vite 插件为当前会话启动隧道。这将通过 Quick tunnel 提供随机的 *.trycloudflare.com 主机名,或通过 named tunnel 提供稳定的主机名。

Wrangler

运行 wrangler dev,然后按 [t] 启动或关闭隧道。Wrangler 会打印当前会话的公共隧道 URL。

要使用 named tunnel,请运行:

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

如果希望 Wrangler 启动时自动打开隧道,请使用 --tunnel

npx wrangler dev --tunnel

Cloudflare Vite 插件

运行 vite dev,然后按 t + Enter 启动或关闭隧道。如果希望配置 named tunnel 或在 Vite 启动时自动打开隧道,请在插件配置中添加 tunnel

要使用具有稳定主机名的 named tunnel:

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

export default defineConfig({
	plugins: [
		cloudflare({
			tunnel: { name: "my-tunnel" },
		}),
	],
});
vite.config.tsts
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 的 preview 主机验证仍然适用:

  • 对于 Quick tunnel,将 .trycloudflare.com 添加到 preview.allowedHosts
  • 对于 named tunnel,将解析后的主机名或匹配的后缀(如 .my-domain.com)添加到 preview.allowedHosts

例如:

vite.config.jsjs
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.tsts
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 的人都可以访问你的 dev 服务器,因此在启用隧道前请审查应用暴露的内容。

  • 特别注意未设访问控制的预览或管理端点。
  • 审查连接到真实资源的任何远程绑定(remote bindings)
  • 审查将请求代理到私有或内部服务的任何代码。
  • 如果你使用 Cloudflare Vite 插件运行 vite dev,HMR 和模块服务可能会通过隧道暴露源文件、文件路径或项目结构。如果只需要共享构建后的预览,公开共享时优先使用 vite preview
  • 本地开发相关路由(如 /cdn-cgi/*)仍受限制,不会通过隧道暴露。
  • 如果需要稳定的主机名或更严格的访问控制,请使用受 Cloudflare Access 保护的 named tunnel。

相关文档

这篇文档对您有帮助吗?