無痛本地調試：使用 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，你可以輕鬆地將你的本地開發機器連接到 Cloudflare 的全球網絡。然後，你可以將你的域名托管到 Cloudflare 並通過 Cloudflare Tunnel 將域名的請求轉發到本地機器。

先決條件#

在你開始之前，請確保你：

• 已擁有一個域名並在你的註冊商（即你購買域名的地方）禁用了 DNSSEC。
• 之前已創建了 Cloudflare 帳戶。

注意：在本教程中，為了演示目的，我們假設使用我們的域名 demo.com。

將網站添加到 Cloudflare#

首先，你需要使用你的 Cloudflare 帳戶登錄到 Cloudflare 儀表板，然後從左側菜單中選擇「Website」選項。接著，點擊頁面上的「Get started」（如果已有記錄，點擊「Add website」）按鈕。按照提示完成使用你擁有的域名來添加網站。在成功添加網站後，你將看到以下內容：

如圖所示，添加的網站尚未啟用。你需要按照頁面上的指導登錄到你的域名註冊商並更新域名的名稱伺服器以激活你的網站。

以 Godaddy 上的域名為例：

進入域名設置頁面，訪問 DNS 標籤下的「Nameservers」選項，並將 Nameservers 改為指南中顯示的值：

更改後，等待一段時間，Cloudflare 上對應的網站將被激活：

配置這些內容後，你的域名將被托管在 Cloudflare 上，Cloudflare 將自動為該域名啟用 HTTPS。

創建隧道#

返回 Cloudflare 儀表板主頁，點擊左側菜單中的「Zero Trust」，然後選擇「Tunnels」下的「Access」目錄。接著，在頁面上點擊「Add a tunnel」，並輸入任何隧道名稱（例如，my-dev-tunnel）。根據頁面上的提示，將你的本地開發機器連接到 Cloudflare 隧道。

以 MacOS 為例，打開終端並執行頁面顯示的命令：

如果你的機器之前已經安裝過 "cloudflared"，則無需執行 brew install cloudflare/cloudflare/cloudflared。

然後，在你的終端中執行 cloudflared tunnel list，你將看到你的機器已經連接到隧道：

將流量路由到創建的隧道#

創建隧道後，我們將為隧道配置路由規則。

假設我們的本地應用運行在 http://localhost:3000 端口上，我們希望將所有對 https://dev.demo.com 的請求轉發到本地應用運行的端口。

首先，我們返回到隧道頁面，找到剛剛創建的隧道，點擊右側的三點按鈕，然後選擇「Config」。

根據我們的需求填寫相關配置：

這一配置將地址 dev.demo.com 路由到我們機器上的 http://localhost:3000。然後點擊「Save hostname」。

稍候片刻，訪問 https://dev.demo.com，你將看到在我們本地機器上運行的應用：

總結#

通過本教程，你現在應該能夠輕鬆地在本地開發環境中實現 HTTPS 和自定義主機名，不必擔心複雜的配置和錯誤。希望你能從本教程中受益！