Cloudflare Tunnel 教學｜免費讓本機程式上線的最佳方案

引言：免費、穩定、企業級

想讓別人看到你的 localhost，但 ngrok 免費版限制太多？

Cloudflare Tunnel 是你的最佳選擇——完全免費，而且提供企業級的穩定度。

它不只能產生公開網址，還能免費綁定自訂網域、自帶 SSL 憑證和 DDoS 防護。

本文會從最簡單的臨時網址，到綁定自訂網域的完整設定，全部教給你。

要點一－Cloudflare Tunnel 是什麼？

基本概念

Cloudflare Tunnel（原名 Argo Tunnel）是 Cloudflare 提供的網路穿透服務。

它會在你的電腦和 Cloudflare 的全球網路之間建立一條加密隧道，讓外部可以透過 Cloudflare 連線到你的本機程式。

你的電腦 (localhost:3000)
         ↓ 加密隧道
   Cloudflare 全球網路
         ↓
公開網址 / 自訂網域
         ↓
    任何人都能連線

和 Ngrok 的差異

兩種使用方式

1. 快速隧道（Quick Tunnel）

不需登入，一行指令產生臨時網址：

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

會得到 *.trycloudflare.com 的網址。

2. 命名隧道（Named Tunnel）

需要 Cloudflare 帳號，可以：
- 綁定自訂網域
- 網址永久有效
- 同時管理多個服務

要點二－為什麼選擇 Cloudflare Tunnel？

完全免費

沒有流量限制、沒有連線數限制、沒有時間限制。

• ❌ Ngrok 免費版：每分鐘 20 個請求
• ✅ Cloudflare Tunnel：無限制

免費自訂網域

只要你有網域在 Cloudflare 管理，就可以免費綁定：

dev.yourdomain.com → localhost:3000

Ngrok 需要付費才有這個功能。

網址永久有效

設定好的 Tunnel 不會因為重啟而改變：

• ❌ Ngrok 免費版：每次重啟換新網址
• ✅ Cloudflare Tunnel：永久固定

企業級穩定度

Cloudflare 是全球最大的 CDN 之一：

• 全球 200+ 資料中心
• 99.99% SLA 可靠度
• 自帶 DDoS 防護

自動 SSL

不用設定 Let's Encrypt，Cloudflare 自動配置 SSL 憑證。

要點三－事前準備：Cloudflare 帳號與網域

快速隧道不需準備

如果只是要產生臨時網址（*.trycloudflare.com），不需要任何準備，直接跳到安裝 cloudflared。

自訂網域需要準備

如果要綁定自己的網域，需要：

1. Cloudflare 帳號

前往 dash.cloudflare.com 免費註冊。

2. 網域在 Cloudflare 管理

有兩種方式：

• 方式一：購買新網域，直接在 Cloudflare Registrar 購買
• 方式二：轉移現有網域的 DNS 到 Cloudflare

3. 轉移 DNS 步驟

1. 在 Cloudflare 新增你的網域
2. Cloudflare 會提供兩個 Nameserver
3. 到你的網域註冊商，把 Nameserver 改成 Cloudflare 提供的
4. 等待 DNS 生效（通常幾分鐘到 24 小時）

確認 DNS 設定完成

在 Cloudflare Dashboard 看到綠色勾勾就代表完成：

your-domain.com ✅ Active

要點四－安裝 cloudflared CLI

cloudflared 是 Cloudflare Tunnel 的命令列工具。

macOS 安裝

# Homebrew（推薦）
brew install cloudflare/cloudflare/cloudflared

# 或手動下載
curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-darwin-amd64.tgz | tar xz
sudo mv cloudflared /usr/local/bin

Windows 安裝

# Chocolatey
choco install cloudflared

# 或 Winget
winget install Cloudflare.cloudflared

或到 GitHub Releases 下載 exe 檔。

Linux 安裝

Debian/Ubuntu

# 加入 Cloudflare GPG key
sudo mkdir -p --mode=0755 /usr/share/keyrings
curl -fsSL https://pkg.cloudflare.com/cloudflare-main.gpg | sudo tee /usr/share/keyrings/cloudflare-main.gpg >/dev/null

# 加入套件庫
echo 'deb [signed-by=/usr/share/keyrings/cloudflare-main.gpg] https://pkg.cloudflare.com/cloudflared jammy main' | sudo tee /etc/apt/sources.list.d/cloudflared.list

# 安裝
sudo apt-get update && sudo apt-get install cloudflared

驗證安裝

cloudflared --version
# cloudflared version 2024.x.x

要點五－快速上線：cloudflared tunnel

這是最簡單的方式，不需登入、不需設定，一行指令就能產生公開網址。

執行快速隧道

假設你的程式跑在 port 3000：

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

會看到輸出類似：

2024-01-16 ... INF Requesting new quick Tunnel on trycloudflare.com...
2024-01-16 ... INF +-----------------------------------------------------------+
2024-01-16 ... INF |  Your quick Tunnel has been created! Visit it at:        |
2024-01-16 ... INF |  https://random-words-here.trycloudflare.com              |
2024-01-16 ... INF +-----------------------------------------------------------+

把這個網址給別人，他們就能看到你的 localhost:3000 了。

快速隧道的限制

• 網址是隨機產生的
• 關閉終端機就失效
• 無法綁定自訂網域

適合臨時快速分享，如果需要更多功能，請繼續往下看。

其他 port

# React Vite
cloudflared tunnel --url http://localhost:5173

# Django
cloudflared tunnel --url http://localhost:8000

# 任何 port
cloudflared tunnel --url http://localhost:YOUR_PORT

要點六－進階設定：建立命名 Tunnel

命名 Tunnel 可以：
- 綁定自訂網域
- 網址永久有效
- 系統服務自動啟動

步驟一：登入 Cloudflare

cloudflared tunnel login

會開啟瀏覽器，選擇你要使用的網域並授權。

授權成功後，憑證會存在 ~/.cloudflared/cert.pem。

步驟二：建立 Tunnel

cloudflared tunnel create my-tunnel

這會產生一個 Tunnel ID 和憑證檔案：

Tunnel credentials written to ~/.cloudflared/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json
Created tunnel my-tunnel with id xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

記下這個 Tunnel ID，之後會用到。

步驟三：建立設定檔

建立 ~/.cloudflared/config.yml：

tunnel: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
credentials-file: /Users/yourname/.cloudflared/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json

ingress:
  - hostname: dev.yourdomain.com
    service: http://localhost:3000
  - service: http_status:404

說明：
- tunnel：你的 Tunnel ID
- credentials-file：Tunnel 憑證路徑
- ingress：路由規則，最後一條必須是 catch-all

步驟四：啟動 Tunnel

cloudflared tunnel run my-tunnel

現在 dev.yourdomain.com 就會連到你的 localhost:3000。

要點七－綁定自訂網域

設定 DNS 路由

在啟動 Tunnel 之前，需要設定 DNS：

cloudflared tunnel route dns my-tunnel dev.yourdomain.com

這會自動在 Cloudflare DNS 新增 CNAME 記錄。

驗證設定

到 Cloudflare Dashboard → 你的網域 → DNS：

會看到：

完整流程整理

# 1. 登入
cloudflared tunnel login

# 2. 建立 Tunnel
cloudflared tunnel create my-app

# 3. 設定 DNS
cloudflared tunnel route dns my-app dev.yourdomain.com

# 4. 建立 config.yml（見上一節）

# 5. 啟動
cloudflared tunnel run my-app

現在任何人訪問 https://dev.yourdomain.com 就會看到你的 localhost:3000。

💡 想把程式正式上線但覺得設定太複雜？ 可以聯繫我們讓工程師協助你完成設定。

要點八－多服務設定：一個 Tunnel 多個網站

一個 Tunnel 可以同時轉發多個服務到不同的子網域。

設定多個服務

修改 config.yml：

tunnel: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
credentials-file: /path/to/credentials.json

ingress:
  # 前端 React 應用
  - hostname: app.yourdomain.com
    service: http://localhost:3000

  # 後端 API
  - hostname: api.yourdomain.com
    service: http://localhost:8000

  # 管理後台
  - hostname: admin.yourdomain.com
    service: http://localhost:8080

  # 預設 404
  - service: http_status:404

設定對應 DNS

cloudflared tunnel route dns my-tunnel app.yourdomain.com
cloudflared tunnel route dns my-tunnel api.yourdomain.com
cloudflared tunnel route dns my-tunnel admin.yourdomain.com

啟動

cloudflared tunnel run my-tunnel

現在三個子網域都可以用了。

路徑路由

也可以用路徑區分：

ingress:
  - hostname: yourdomain.com
    path: /api/*
    service: http://localhost:8000

  - hostname: yourdomain.com
    service: http://localhost:3000

  - service: http_status:404

要點九－常見問題排解

問題一：tunnel login 失敗

Unable to find Cloudflare credentials

解決：重新執行登入

cloudflared tunnel login

確認瀏覽器有成功授權。

問題二：DNS 設定失敗

Could not route to tunnel

可能原因：
1. 網域不在 Cloudflare 管理
2. DNS 還沒生效

解決：
- 確認網域已加入 Cloudflare
- 等待 DNS 生效（最多 24 小時）

問題三：502 Bad Gateway

原因：本機服務沒在跑

解決：

# 確認服務有啟動
curl http://localhost:3000

問題四：config.yml 語法錯誤

驗證設定檔：

cloudflared tunnel ingress validate

會告訴你哪裡有問題。

問題五：開機自動啟動

macOS：

sudo cloudflared service install

Linux（systemd）：

sudo cloudflared --config /path/to/config.yml service install
sudo systemctl enable cloudflared
sudo systemctl start cloudflared

💡 Cloudflare Tunnel 設定遇到問題？ 可以聯繫我們讓工程師幫你處理。

程式只能在本機跑？

讓我們幫你從 localhost 走向全世界，把專案部署到雲端。

幫我上線

常見問題 FAQ

Q1：Cloudflare Tunnel 免費嗎？

是的，Cloudflare Tunnel 完全免費，沒有流量限制、連線限制或時間限制。你需要的只是一個免費的 Cloudflare 帳號。

Q2：Cloudflare Tunnel 和 Ngrok 哪個好？

看需求：
- 最簡單快速 → Ngrok（一行指令）
- 免費且需要自訂網域 → Cloudflare Tunnel
- 長期穩定使用 → Cloudflare Tunnel
- 不想註冊任何帳號 → Ngrok 快速隧道或 Localtunnel

Q3：沒有網域可以用嗎？

可以。使用快速隧道（Quick Tunnel）不需要網域：

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

會得到 *.trycloudflare.com 的臨時網址。

Q4：設定複雜嗎？

快速隧道非常簡單，一行指令就能用。命名隧道（綁定自訂網域）需要幾個步驟，但按照本文教學操作，大約 10-15 分鐘可以完成。

延伸閱讀

• 如何讓 Localhost 上線？5 種方法總覽
• Ngrok 教學｜一鍵讓 Localhost 變成公開網址
• Localhost 轉正式上線｜從本機到雲端部署完整流程
• Localhost 是什麼？127.0.0.1 完整指南

程式只能在本機跑？

讓我們幫你從 localhost 走向全世界，把專案部署到雲端。

幫我上線

圖片描述

插圖 1：Cloudflare Tunnel 概念圖
- 檔名 slug: cloudflare-tunnel-concept
- 圖片類型: 概念示意圖
- 主要視覺元素:
- 左側：開發者電腦顯示 localhost
- 中央：Cloudflare 橘色雲端 logo 和隧道圖示
- 右側：地球圖示代表全球用戶
- 文字標註: "免費"、"自訂網域"、"DDoS 防護"、"SSL"標籤
- 色調與風格: Cloudflare 品牌橘色調，現代科技感
- 構圖建議: 水平流程圖，中央強調 Cloudflare 的特點優勢

插圖 2：cloudflared 安裝驗證畫面
- 檔名 slug: cloudflared-version-check
- 圖片類型: 終端機截圖示意
- 主要視覺元素:
- 深色終端機背景
- 命令提示符號
- 版本輸出結果
- 文字標註: cloudflared --version 指令和輸出
- 色調與風格: 終端機深色主題
- 構圖建議: 簡潔的終端機畫面，重點標示版本號

插圖 3：多服務路由示意圖
- 檔名 slug: cloudflare-tunnel-multi-service
- 圖片類型: 流程示意圖
- 主要視覺元素:
- 左側：Cloudflare Tunnel 節點
- 右側：多個 localhost 服務節點
- 連接線標註子網域
- 文字標註: "app.domain.com → :3000"、"api.domain.com → :8000" 等
- 色調與風格: 技術流程圖風格，使用不同顏色區分服務
- 構圖建議: 一對多的分支結構，清晰顯示路由關係

插圖 4：Quick Tunnel vs Named Tunnel 比較
- 檔名 slug: quick-vs-named-tunnel
- 圖片類型: 比較資訊圖
- 主要視覺元素:
- 左右兩欄對比
- Quick Tunnel：簡單圖示
- Named Tunnel：更完整的設定圖示
- 文字標註: 各自特點列表、適合情境
- 色調與風格: 資訊圖表風格，清晰對比
- 構圖建議: 雙欄並排設計，底部附選擇建議