[食譜好菜] 使用 Cloudflare Tunnel 來取代 ngrok

講到要讓我們正在開發的網頁應用程式,臨時生一個網址來對外服務,就不能不提到 ngrok 這個服務,而且它有免費版,但是免費版斷線重連會重新產生新的網址,即使付 $10 鎂/月(年繳 $8 鎂/月),也只能固定一組網址。

如果不嫌免費版 ngrok 一直換網址麻煩,那 ngrok 就能滿足我們,但如果想要有固定的網址,可是一個月 $10 鎂又付不太下去,那麼 Cloudflare Tunnel 是可以考慮的服務。

Cloudflare Tunnel 這個服務本身是免費的,但是要使用這個服務之前,必須要先有一個託管在 Cloudflare 的網域名稱,如果我們剛好沒有,那可以直接在 Cloudflare 購買,網域名稱的錢是以年計的,舉我自己挑的 supershowwei.win 這個網域名稱為例,一年只要 $4.37 鎂,一個月只要 $0.364 鎂,相當便宜。

註冊網域名稱

要購買一個網域名稱,就從 Cloudflare 管理介面的「Domain Registration」點選「Register Domains」,接著輸入一個自己想要網域名稱,只要網域名稱沒有被別人註冊走,而且覺得價格合理,卡刷下去就好了。

建立 Cloudflare Tunnel

Cloudflare Tunnel 服務位於管理介面的「Zero Trust」功能中,進入 Zero Trust 管理介面之後,在「Networks」底下就可以找到「Tunnels」。

接著我們點擊「Create a tunnel

點選「Cloudflared」,然後點擊「Next」。

輸入「Tunnel name」後,點擊「Save tunnel」,我們就完成了第一步。

安裝 Connector

第二步我們要回到我們的本機電腦,根據我們的作業系統選擇 Connector 的版本,我選擇的是 Windows 64-bit 的版本。

安裝 Cloudflared 服務

在安裝好 Connector 之後,複製 Cloudflare 幫我們準備好的命令,並且以系統管理者身分執行這個命令,就能將 Cloudflared 服務安裝起來。

我們回到 Cloudflare 管理介面,看到 Connectors 有出現已連線的 Connector 的話,就表示安裝成功了。

設定 Public Hostnames

最後一步,我們要將「公開網址」與我們本機電腦的「內部網址」對應起來,這邊可以看到「Subdomain」不再是隨機字串,可以隨著我們的需要自行輸入。

而且 Cloudflare Tunnel 不只能對應 HTTP 服務,其它協定的服務也行,「Service Type」目前支援的協定有:HTTP、HTTPS、UNIX、TCP、SSH、RDP、UNIX+TLS、SMB、HTTP_STATUS、BASTION。

將所需的資訊都設定完畢後,點擊「Save tunnel」。

我們看到 Tunnel 的狀態為「HEALTHY」就表示 Tunnel 建立成功,而且目前處於連線的狀態。

只要內部服務是活著的,就能透過我們設定的公開網址存取得到,而且自動掛上 HTTPS 自然是不在話下。

我會想要改用 Cloudflare Tunnel 的其中一個原因,是它可以使用自己想要的 Subdomain,我們在跟客戶 demo 網頁,或是要將網頁丟給客戶先試用看看,網址就會看起來稍微體面一點。

參考資料

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學