無痛本地調試：使用 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” 選項，並將名稱伺服器更改為指南中顯示的值：

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

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

創建隧道#

返回 Cloudflare 控制台首頁，點擊左側菜單中的 "Zero Trust"，並選擇 "Tunnels" 位於 'Access' 目錄下。然後在頁面中點擊 "Add a tunnel"，並輸入任何隧道名稱（例如 my-dev-tunnel）。根據頁面上的提示，將你的本地開發機器連接到 Cloudflare Tunnel。

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

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

隨後，在終端中執行 cloudflared tunnel list，你會看到你的機器已經連接到 tunnel：

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

創建 Tunnel 後，我們將配置該 Tunnel 的路由規則。

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

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

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

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

短暫等待後，訪問 https://dev.demo.com，然後會看到運行在我們本地機器上的應用程式：

總結#

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