无痛本地调试：使用 Cloudflare Tunnel 实现 HTTPS 和自定义主机名

在我们的日常开发中，我们经常使用 http://localhost 来访问和调试我们的应用程序，这在大多数情况下是足够的。然而，在以下情况中，我们可能需要使用 HTTPS 和自定义主机名来调试我们的应用程序：

• 当你的应用程序使用需要 HTTPS 的 API（例如 Web Crypto API 或其他需要 HTTPS 的第三方库）
• 当你想要集成的第三方服务要求你提供一个全球可访问的基于 HTTPS 的 API 接口，并且需要调试这个接口

市场上有许多解决这些问题的解决方案，但大多数都复杂且容易出错。在这里，我要介绍如何使用 Cloudflare Tunnel 快速为本地开发环境使用 HTTPS 和自定义主机名。

什么是 Cloudflare Tunnel#

Cloudflare Tunnel 是 Cloudflare 提供的一项服务，允许你将基础设施安全地连接到 Cloudflare 网络。它本质上在你的服务器和 Cloudflare 的全球网络之间创建了一个安全高效的连接，确保你的网络流量得到保护和优化。

通过使用 Cloudflare Tunnel，你可以轻松地将本地开发机器连接到 Cloudflared 的全球网络。之后，你可以将你的域名托管在 Cloudflare 上，并通过 Cloudflare Tunnel 将该域名的请求转发到你的本地机器。

前置条件#

在开始之前，请确保你：

• 已经拥有一个域名，并在注册商（你购买域名的地方）禁用了 DNSSEC。
• 已经创建了一个 Cloudflare 账户。

注意：在本教程中，出于演示目的，我们假设使用 demo.com 作为我们的域名。

将网站添加到 Cloudflare#

首先，你需要使用你的 Cloudflare 账户登录 Cloudflare 仪表板 并从左侧菜单中选择“网站”选项。然后，点击页面上的“开始”按钮（如果已经有记录，点击“添加网站”）。按照提示完成使用你拥有的域名添加网站。在成功添加网站后，你将看到以下内容：

如图所示，添加的网站尚未激活。你需要按照页面上的指南登录到你的域名注册商并更新域名的名称服务器以激活你的网站。

以 Godaddy 上的域名为例：

进入域名设置页面，访问 DNS 选项卡下的“名称服务器”选项，并将名称服务器更改为指南中显示的值：

更改后，等待一小段时间，Cloudflare 上的相应网站将被激活：

配置完这些内容后，你的域将托管在 Cloudflare 上，并且 Cloudflare 将自动为域启用 HTTPS。

创建隧道#

返回 Cloudflare 仪表板主页，点击左侧菜单中的“零信任”，然后选择“访问”目录下的“隧道”。然后，在页面上点击“添加隧道”，输入任意隧道名称（例如 my-dev-tunnel）。根据页面上的提示，将本地开发机器连接到 Cloudflare 隧道。

以 MacOS 为例，打开终端并执行页面上显示的命令：

如果你的机器之前已经安装了“cloudflared”，则不需要执行 brew install cloudflare/cloudflare/cloudflared。

之后，在你的终端中执行 cloudflared tunnel list，你将看到你的机器已经连接到该隧道：

将流量路由到创建的隧道#

在创建隧道之后，我们将为该隧道配置路由规则。

假设我们的本地应用程序正在 http://localhost:3000 上运行，我们希望将所有对 https://dev.demo.com 的请求转发到本地应用程序运行的端口。

首先，我们返回到我们的隧道页面，找到我们刚刚创建的隧道，点击右侧的三个点按钮，并选择“配置”。

根据我们的需求填写相关配置：

此配置将地址 dev.demo.com 路由到我们机器上的 http://localhost:3000。然后点击“保存主机名”。

经过短暂等待后，访问 https://dev.demo.com，你将看到我们本地机器上运行的应用程序：

总结#

通过本教程，你现在应该能够轻松地在本地开发环境中实现 HTTPS 和自定义主机名，而无需担心复杂的配置和错误。希望你能从本教程中受益！