講到要讓我們正在開發的網頁應用程式,臨時生一個網址來對外服務,就不能不提到 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 網頁,或是要將網頁丟給客戶先試用看看,網址就會看起來稍微體面一點。