跳转到内容
搜索文档

使用 Cloudflare Tunnel 预览本地项目

最后更新 查看 MarkdownAgent 设置

Cloudflare Tunnel 在你的基础设施中运行轻量级守护进程 (cloudflared),在源 Web 服务器与 Cloudflare 全球网络之间建立出站连接(Tunnel)。实际上,你可以使用 Cloudflare Tunnel 允许远程访问本地机器上运行的服务。它是 Ngrok 等流行工具的替代方案,通过 TryCloudflare 服务提供免费的长时 Tunnel。

虽然 Cloudflare Pages 为项目的新 branch 和提交提供唯一的部署预览 URL,但在开发过程中可以使用 Cloudflare Tunnel 访问本地运行的应用和服务器。在本指南中,你将安装 Cloudflare Tunnel 并创建新 tunnel 以访问本地运行的应用。你需要 Cloudflare 账户才能开始使用 Cloudflare Tunnel。

安装 Cloudflare Tunnel

Cloudflare Tunnel 可安装在 Windows、Linux 和 macOS 上。要了解如何安装 Cloudflare Tunnel,请参阅 Cloudflare for Teams 文档中的安装 cloudflared 页面。

通过在命令行中运行 cloudflared --version 确认 cloudflared 已正确安装:

cloudflared --version
cloudflared version 2021.5.9 (built 2021-05-21-1541 UTC)

运行本地服务

使用 Cloudflare Tunnel 最简单的方式是本地运行应用,例如 ReactSvelteKit 站点。使用这些框架开发应用时,通常会使用 npm run develop 脚本或类似命令挂载并运行应用在某个 localhost 端口上。例如,流行的 vite 工具在端口 5173 上运行开发中的 React 应用,可通过 http://localhost:5173 访问。

启动 Cloudflare Tunnel

本地开发服务器运行后,可以在新的命令行窗口中运行 cloudflared tunnel 实例化新的 Cloudflare Tunnel,传入 --url 标志及 localhost URL 和端口。cloudflared 将向命令行输出日志,包括带有 tunnel URL 的横幅:

cloudflared tunnel --url http://localhost:5173
2021-07-15T20:11:29Z INF Cannot determine default configuration path. No file [config.yml config.yaml] in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp /etc/cloudflared /usr/local/etc/cloudflared]
2021-07-15T20:11:29Z INF Version 2021.5.9
2021-07-15T20:11:29Z INF GOOS: linux, GOVersion: devel +11087322f8 Fri Nov 13 03:04:52 2020 +0100, GoArch: amd64
2021-07-15T20:11:29Z INF Settings: map[url:http://localhost:5173]
2021-07-15T20:11:29Z INF cloudflared will not automatically update when run from the shell. To enable auto-updates, run cloudflared as a service: https://developers.cloudflare.com/argo-tunnel/reference/service/
2021-07-15T20:11:29Z INF Initial protocol h2mux
2021-07-15T20:11:29Z INF Starting metrics server on 127.0.0.1:42527/metrics
2021-07-15T20:11:29Z WRN Your version 2021.5.9 is outdated. We recommend upgrading it to 2021.7.0
2021-07-15T20:11:29Z INF Connection established connIndex=0 location=ATL
2021-07-15T20:11:32Z INF Each HA connection's tunnel IDs: map[0:cx0nsiqs81fhrfb82pcq075kgs6cybr86v9vdv8vbcgu91y2nthg]
2021-07-15T20:11:32Z INF +-------------------------------------------------------------+
2021-07-15T20:11:32Z INF |  Your free tunnel has started! Visit it:                    |
2021-07-15T20:11:32Z INF |    https://seasonal-deck-organisms-sf.trycloudflare.com     |
2021-07-15T20:11:32Z INF +-------------------------------------------------------------+

在此示例中,已创建随机生成的 URL https://seasonal-deck-organisms-sf.trycloudflare.com 并分配给 tunnel 实例。在浏览器中访问此 URL 将显示运行的应用,请求通过 Cloudflare 全球网络安全转发,经本地机器上的 tunnel 到达 localhost:5173

Cloudflare Tunnel 示例呈现随机生成的 URL

后续步骤

Cloudflare Tunnel 可通过多种方式配置,用途不仅限于提供对开发中应用的访问。例如,你可以为 cloudflared 提供配置文件,添加超出简单 --url 标志的更复杂路由和 tunnel 设置。你还可以附加 Cloudflare DNS 记录到域名或子域名,以便轻松访问指向本地机器的长时 tunnel。

最后,通过结合 Cloudflare Access,你可以安全访问 tunnel,而无需暴露整个服务器或牺牲安全性。请参阅 Cloudflare for Teams 文档,了解 Cloudflare 全套 Zero Trust 工具的更多信息。

这篇文档对您有帮助吗?