工商時間

這系列講的是「讓本地系統安全走入公網」——而在那之前，你得先有一套真正能打的 AI 全端應用：

《AI 賦能全端開發：從零打造企業級智慧應用》：從 Spring Boot 後端、React 前端到資料庫與權限，一路加上 Spring AI、RAG 與 AI Agent，用一個專案走完整條路。

🎁 課程最後額外加碼「Cloudflare Tunnel 穿透實戰」：教你如何在免固定 IP、不開路由器 Port 的安全前提下，把公司內部或本機架設好的全套系統安全穿透到公網，讓外部客戶、主管或團隊直接連線體驗！

👉 前往 Hahow 課程頁

一條指令把 Spring Boot + React 送上公網：Cloudflare Tunnel 實戰

上期我們把內網穿透的底層秘密拆開了：不要等待外部連進來，而是由本地主動向雲端邊緣（Edge）建立出站長連線。

這期我們直接動手。

情境很常見：你在筆電上跑著 Spring Boot 後端（localhost:8080），前端 React 開發伺服器跑在 Vite（localhost:5173）。客戶或主管說想線上看一下 Demo，或者你想在手機上實測觸控體驗。

你不需要去 AWS 開 EC2、不需要買固定 IP、不需要登入路由器設定 Port Forwarding，甚至不用自己去申請 SSL 憑證。

我們只需要一個工具：cloudflared。

四步打通公網隧道

整個設定流程乾淨俐落，在 Windows（PowerShell）或 macOS/Linux 上完全一致：

第一步：安裝並登入 Cloudflare

# Windows 使用 winget 安裝（或至官方 GitHub 下載單一執行檔）
winget install Cloudflare.cloudflared

# 授權登入（會自動彈出瀏覽器，選擇你託管在 Cloudflare 的網域名稱）
cloudflared tunnel login

第二步：建立專屬隧道（Tunnel）

# 建立名為 ai-crm 的隧道
cloudflared tunnel create ai-crm

執行後會得到一個隧道的 UUID（例如 a1b2c3d4-5678-90ab-cdef-1234567890ab），並在本地的 .cloudflared 資料夾生成以該 UUID 命名的認證憑證檔案（<UUID>.json）。

第三步：核心靈魂——一份 config.yml 搞定前後端同站路由

傳統部署全端專案最煩的就是 CORS（跨來源資源共用）：前端在 domain-a.com，後端在 api.domain-b.com，每次發請求瀏覽器都要先送一次 OPTIONS preflight，Headers 沒設好就直接報紅。

Cloudflare Tunnel 的 Ingress Rules 讓我們用一份檔案，把前後端收攏進同一個網域名稱：

# config.yml
tunnel: a1b2c3d4-5678-90ab-cdef-1234567890ab
credentials-file: C:\Users\your-name\.cloudflared\a1b2c3d4-5678-90ab-cdef-1234567890ab.json

ingress:
  # 1. 將 /api 開頭的所有後端請求，導向 Spring Boot (8080)
  - hostname: crm.yourdomain.com
    path: ^/api
    service: http://localhost:8080

  # 2. 其餘所有頁面請求，導向 React Vite 前端 (5173)
  - hostname: crm.yourdomain.com
    service: http://localhost:5173

  # 3. 兜底規則（Catch-all）：未匹配的請求回傳 404
  - service: http_status:404

Cloudflare Tunnel Ingress 路由：一份 config.yml 同時轉發後端 8080 與前端 5173，消除 CORS 預檢請求

第四步：綁定 DNS 並啟動隧道

# 讓 Cloudflare 自動在你的網域下加上 CNAME DNS 紀錄
cloudflared tunnel route dns ai-crm crm.yourdomain.com

# 啟動隧道！
cloudflared tunnel run ai-crm

按下 Enter 的那一瞬間，打開瀏覽器輸入 https://crm.yourdomain.com——
你的本地開發機，已經頂著全球 Anycast CDN 與正式 HTTPS 憑證，正式對全世界開放了。