当你需要共享预览、测试 webhook 或从其他设备访问应用时,可以通过 Cloudflare Tunnel 暴露本地 dev 服务器。
本页介绍 Wrangler 和 Cloudflare Vite 插件 中的隧道支持。
你可以使用 Wrangler 或 Cloudflare Vite 插件为当前会话启动隧道。这将通过 Quick tunnel 提供随机的 *.trycloudflare.com 主机名,或通过 named tunnel 提供稳定的主机名。
Wrangler
运行 wrangler dev,然后按 [t] 启动或关闭隧道。Wrangler 会打印当前会话的公共隧道 URL。
要使用 named tunnel,请运行:
npx wrangler dev --tunnel-name=my-tunnelyarn wrangler dev --tunnel-name=my-tunnelpnpm wrangler dev --tunnel-name=my-tunnel如果希望 Wrangler 启动时自动打开隧道,请使用 --tunnel。
npx wrangler dev --tunnelyarn wrangler dev --tunnelpnpm wrangler dev --tunnelCloudflare Vite 插件
运行 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 的 preview 主机验证仍然适用:
- 对于 Quick tunnel,将
.trycloudflare.com添加到preview.allowedHosts。 - 对于 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 的人都可以访问你的 dev 服务器,因此在启用隧道前请审查应用暴露的内容。
- 特别注意未设访问控制的预览或管理端点。
- 审查连接到真实资源的任何远程绑定(remote bindings)。
- 审查将请求代理到私有或内部服务的任何代码。
- 如果你使用 Cloudflare Vite 插件运行
vite dev,HMR 和模块服务可能会通过隧道暴露源文件、文件路径或项目结构。如果只需要共享构建后的预览,公开共享时优先使用vite preview。 - 本地开发相关路由(如
/cdn-cgi/*)仍受限制,不会通过隧道暴露。 - 如果需要稳定的主机名或更严格的访问控制,请使用受 Cloudflare Access 保护的 named tunnel。