The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

使用 Cloudflare Tunnel 的 TryCloudflare 取代 ngrok

📅 2023/08/26 00:05 📁 介紹好用工具, 網路管理

最近在嘗試 Cloudflare Tunnel 服務，這是一套免費的服務，可以讓你在本機網路與 Cloudflare 網路之間建立一個隧道(Tunnel)，讓外部的網路可以透過 Cloudflare 的端點(Edge)連線到你的本機端服務。不過 Cloudflare Tunnel 在設定上稍微有點麻煩，步驟有點多，而且要事先建立好 Cloudflare 帳號。不過，我發現 Cloudflare 還有提供一個 TryCloudflare 或 Quick Tunnels 服務，也是免費的，但使用這個服務連 Cloudflare 帳號都不用建立，只要安裝 cloudflared 工具就可以直接開始使用，對於臨時想要從外網測試一個服務來說非常的方便，尤其是你想用手機測試電腦桌機網站的時候。

cloudflared

使用 TryCloudflare 服務有以下優點：

  • 完全免費
  • 安裝簡便
  • 內建 SSL/TLS 加密連線
  • 免註冊帳號，安裝後即可使用

使用 TryCloudflare 服務有以下缺點：

  • 每次連線都會產生一個新的網址，重新建立通道就會產生新的網址
  • 連線最多只能維持 24 小時，如需更長時間請改用完整版的 Cloudflare Tunnel 設定

安裝 cloudflared 工具

更新 cloudflared 工具

你可以透過以下命令快速更新到最新版：

cloudflared update

使用 cloudflared 工具

這套 cloudflared 工具其實涵蓋了 Cloudflare Tunnel 的完整功能，參數與選項特別多，有興趣深入研究可參考官網文件或現有的許多部落格文章。

以下是一些常用的範例：

  1. 啟動一個 Cloudflare Tunnel 並使用內建的 hello-world 服務

    通常我們想建立 Tunnel 都是因為本機有個 Web 服務，需要立即讓外網連線到這個服務，但是如果你還沒有 Web 服務，又想測試 Cloudflare Tunnel 的功能怎麼辦？那就啟動內建的 Hello World 網站即可！

    cloudflared tunnel --hello-world

    cloudflared tunnel --hello-world

    建立好 Quick Tunnel 之後，會在 Terminal 視窗中看到一個網址，透過那個網址就可以快速連到你本機的 Hello World 網站：

    Congrats! You created a tunnel!

  2. 透過 Cloudflare Tunnel 網路連接到本機的 localhost:4200 網站

    我以 Angular Live Development Server 為例，先啟動本機伺服器：

    ng serve

    然後啟動 Cloudflare Tunnel：

    cloudflared tunnel --url http://localhost:4200

    連到網頁後，你會立刻發現網頁上會顯示 Invalid Host header 字樣，網站完全無法連線。這是因為 Angular Live Development Server 預設只允許 localhost 這個 Hostname 連線，但是 Cloudflare Tunnel 會使用一個隨機的 Hostname 來連線，所以連線會被拒絕。

    解決方法有兩種：

    • 調整 ng serve 的啟動參數，特別加上 --disable-host-check 參數

      這個參數可以避免 Angular Live Development Server 檢查 HTTP 要求的 Host 標頭，這樣就可以讓任何 Hostname 連線到本機網站。

      ng serve --disable-host-check

    • 調整 cloudflared tunnel 的啟動參數，特別加上 --http-host-header="localhost" 參數

      這個參數可以指定從 Cloudflare 的 Edge 連線到本機網站時要使用的 Hostname 名稱，這樣就可以讓本機網站正常運作。

      cloudflared tunnel --url "http://localhost:4200" --http-host-header="localhost"

  3. 透過 Cloudflare Tunnel 網路連接到本機再跳轉到外部網站

    這種用法如同建立一個快速的 VPN 通道，讓外部網路可以先透過 Cloudflare Tunnel 連線到本機，然後再透過本機的網路連線到外部網站，使用你目前的網路連到目的網站。有許多網站可能有鎖定 IP 才能存取，如果臨時想要存取這些網站，就可以透過這種方式來達成，不用撥接 VPN 就可以做到。

    cloudflared tunnel --url "ifconfig.co" --http-host-header="ifconfig.co"

快速啟動命令

由於 ngrok 在啟動網站時非常方便，一般來說啟動的命令如下：

ngrok http 4200

我也如法炮製，寫了一個 C:\Windows\cok.cmd 批次檔，其內容如下：

@ECHO OFF
cloudflared tunnel --url "%1://localhost:%2" --http-host-header="localhost"

今後你只要這樣下指令，就可以快速啟動 Cloudflare Tunnel 並測試本機的 http://localhost:4200 網站了：

cok http 4200

相關連結

留言評論