Dùng Cloudflare Tunnel để demo localhost trên điện thoại và nhiều thiết bị

Dùng Cloudflare Tunnel để demo localhost trên điện thoại và nhiều thiết bị

Bảo vệ đồ án sắp đến, hội đồng muốn xem demo trên điện thoại. Hoặc đơn giản hơn: khách hàng ở xa muốn thử tính năng mới trước khi chính thức deploy. Mở localhost lên cho người ngoài xem là việc tưởng đơn giản nhưng hay gây đau đầu.

Mở port router thì phức tạp và không phải lúc nào cũng được phép. IP tĩnh thì phải trả tiền thêm. ngrok miễn phí thì URL thay đổi mỗi lần restart và bị rate limit khó chịu. Cloudflare Tunnel giải quyết hết những vấn đề này, hoàn toàn miễn phí.

Vấn đề

Môi trường dev localhost có một đặc điểm: chỉ máy đang chạy mới truy cập được. http://localhost:5173 hay http://127.0.0.1:8001 không đi ra ngoài mạng.

Các giải pháp thường thấy đều có vấn đề riêng:

  • Expose qua IP local (http://192.168.x.x:5173): chỉ hoạt động khi cùng WiFi, không dùng được 3G/4G.
  • ngrok free tier: URL ngẫu nhiên thay đổi mỗi lần, giới hạn số connection, thỉnh thoảng bị block.
  • Deploy lên server tạm: tốn thời gian setup, phải build và push code, không phản ánh đúng môi trường local đang phát triển.

Cloudflare Tunnel tạo một đường hầm mã hóa từ máy bạn ra Cloudflare network — không cần mở port, không cần IP tĩnh, HTTPS sẵn, hoạt động qua mọi mạng.

Giải pháp: Cloudflare Tunnel (miễn phí)

cloudflared là công cụ CLI của Cloudflare, tạo tunnel từ localhost ra internet trong vài giây. Có hai chế độ:

  • Quick tunnel (không cần tài khoản): URL ngẫu nhiên, đủ dùng cho demo nhanh.
  • Named tunnel (cần tài khoản Cloudflare): URL cố định, gắn được subdomain riêng.

Cài đặt và chạy

Ubuntu/Debian:

wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb

macOS:

brew install cloudflared

Tạo tunnel nhanh — không cần tài khoản:

# Expose frontend Vite dev server
cloudflared tunnel --url http://localhost:5173

# Expose FastAPI backend
cloudflared tunnel --url http://localhost:8001

Sau vài giây sẽ thấy:

+--------------------------------------------------------------------------------------------+
|  Your quick Tunnel has been created! Visit it at:                                          |
|  https://random-adjective-words.trycloudflare.com                                         |
+--------------------------------------------------------------------------------------------+

Copy URL đó, mở trên điện thoại hoặc gửi cho người khác — xem được ngay, HTTPS tự động.

Tích hợp vào Docker Compose

Nếu project dùng Docker Compose (như khi chạy helpdesk system), thêm service tunnel vào docker-compose.yml:

services:
  backend:
    # ... config hiện tại ...

  tunnel:
    image: cloudflare/cloudflared:latest
    command: tunnel --no-autoupdate run --token ${TUNNEL_TOKEN}
    environment:
      - TUNNEL_TOKEN=${TUNNEL_TOKEN}
    depends_on:
      - backend
    restart: unless-stopped

TUNNEL_TOKEN lấy từ Cloudflare Dashboard sau khi tạo Named Tunnel. Cách này giúp tunnel tự động khởi động cùng stack và URL không đổi giữa các lần restart.

Lưu ý thực tế

URL thay đổi mỗi lần restart với quick tunnel. Nếu chỉ demo một lần thì ổn. Nếu cần URL cố định (ví dụ để đặt trong config của khách hàng, hay test webhook), phải dùng Named Tunnel có đăng nhập:

cloudflared login
cloudflared tunnel create my-demo
cloudflared tunnel route dns my-demo demo.yourdomain.com
cloudflared tunnel run my-demo

CORS phải update. App FastAPI của bạn có whitelist CORS origins — khi dùng tunnel, phải thêm URL tunnel vào danh sách:

# backend/.env.docker
CORS_ORIGINS=http://localhost:5173,https://random.trycloudflare.com

Hoặc tổng quát hơn cho môi trường demo:

allow_origins=["*"]  # Chỉ dùng khi demo, không để production

Socket.IO và WebSocket hoạt động tốt. Cloudflare Tunnel hỗ trợ HTTP/2 và WebSocket đầy đủ — realtime notification, live chat, Socket.IO đều chạy qua tunnel mà không cần cấu hình thêm. Đây là điểm hơn hẳn một số giải pháp tunnel khác chỉ hỗ trợ HTTP thuần.

Tốc độ chấp nhận được cho demo. Tunnel thêm một chút latency do traffic đi qua Cloudflare edge, nhưng với demo UI thông thường thì không đáng kể. Không nên dùng cho production thay thế deployment thật.

Tóm lại: Cloudflare Tunnel là công cụ không thể thiếu trong bộ kit của developer khi cần demo nhanh — cài một lần, chạy một lệnh, có URL HTTPS public ngay lập tức. Miễn phí, không giới hạn kết nối, WebSocket hỗ trợ tốt. Với demo hội đồng hay khách hàng, đây là cách nhanh nhất để đưa localhost ra ngoài thế giới mà không cần đụng đến server thật.