Trả lời nhanh: Ba nấc theo vòng đời bản demo: ngrok, một lệnh có URL công khai từ máy đang chạy, hoàn hảo cho phiên xem 15 phút rồi tắt; Cloudflare Tunnel, demo sống nhiều ngày trên tên miền đẹp của bạn (demo.ten-mien.vn), miễn phí, không mở port; subdomain trên VPS, bản staging tử tế chạy như thật, có HTTPS, làm nhà lâu dài cho vòng duyệt nhiều tuần. Quy tắc nhanh: xem một lần → ngrok; duyệt qua lại vài ngày → Tunnel; quy trình duyệt nghiêm túc song song bản chính → staging trên VPS.
"Anh gửi em xem bản nháp với", câu nói kích hoạt một quyết định kỹ thuật nhỏ mà dân làm web gặp mỗi tuần. Gửi ảnh chụp thì thiếu sống động; deploy hẳn thì chưa tới lúc. Bài này xếp ba công cụ đúng ba tình huống, kèm thao tác từng cái và những cái bẫy tế nhị (link chết giữa chừng, khách xem được cả trang admin...) của việc phơi đồ dở dang.
- ngrok: URL tạm trong 5 giây từ localhost, phiên demo ngắn, tắt là biến mất
- Tunnel: tên miền của bạn + chạy dài ngày + miễn phí, vua của vòng duyệt 2-7 ngày
- Subdomain VPS/staging: môi trường giống production, chuẩn cho duyệt nghiêm túc
- Bẫy chung: quên khóa demo (ai có link đều xem), demo chết giữa chừng, lẫn dữ liệu thật
Nấc 1: ngrok - demo từ chính máy đang code
ngrok http 3000
# => https://abc123.ngrok-free.app tro thang vao localhost:3000Ưu điểm tuyệt đối: tốc độ có link (5 giây) và tính dùng-xong-vứt, hợp cảnh gọi video với khách, share màn hình sống, xem xong link tự chết theo phiên. Giới hạn đúng bản chất: URL ngẫu nhiên kém chuyên nghiệp (bản free), máy bạn phải bật suốt phiên xem, và trang chào của ngrok free chen trước app. Đừng dùng cho: demo cần sống qua đêm, hoặc gửi link trong email trang trọng.
Nấc 2: Cloudflare Tunnel - demo sống nhiều ngày, tên miền của bạn
Đã có cloudflared trên VPS (bài Tunnel trong cụm), thêm một demo chỉ là hai dòng vào ingress:
- hostname: demo-khach-a.ten-mien.vn
service: http://127.0.0.1:3001cùng một lệnh route dns, xong: khách mở demo-khach-a.ten-mien.vn bất cứ lúc nào trong tuần duyệt, HTTPS sẵn, chuyên nghiệp như hàng thật. App demo chạy trong tmux/PM2 trên VPS nên laptop bạn tắt thoải mái. Đây là điểm ngọt của đa số vòng duyệt khách hàng: đủ bền để khách xem đi xem lại, đủ nhẹ để dựng trong 5 phút, và miễn phí.
Nấc 3: Staging trên VPS - bản sao nghiêm túc của production
Khi dự án có nhịp duyệt dài (agency với khách doanh nghiệp, sản phẩm có quy trình QA), demo lâm thời không đủ, cần staging: subdomain cố định (staging.ten-mien.vn qua Caddy như mọi site khác), deploy bằng chính pipeline CI/CD (nhánh staging → máy staging), database riêng với dữ liệu mẫu. Giá trị: khách duyệt trên môi trường giống hệt nơi hàng thật sẽ chạy, những lỗi kiểu 'trên demo được mà lên thật lại hỏng' chết từ trứng. Một VPS tầm trung chứa được cả production lẫn staging (hai thư mục, hai port, hai database), không cần máy riêng cho đến khi tải thật lớn.
Bốn cái bẫy của việc phơi đồ dở - và khóa từng cái
- Ai có link đều xem được: demo nhạy cảm thì khóa, Cloudflare Access (email OTP, free) cho Tunnel, hoặc basic auth một dòng trong Caddy. Đừng tin 'URL khó đoán'.
- Demo chết giữa lúc khách xem: app demo cũng cần PM2/restart policy, cái chết của demo lúc 21h khách rảnh xem là cái chết đắt nhất.
- Lẫn dữ liệu thật: demo trỏ nhầm database production là tai nạn kinh điển, khách bấm nghịch, dữ liệu thật lãnh đủ. Staging luôn database riêng, seed dữ liệu mẫu.
- Quên dọn: demo xong việc còn sống hàng tháng thành cửa hậu bị quét. Nghi thức đóng dự án: gỡ ingress, tắt app, dọn DNS, 2 phút giữ nhà sạch.
Chọn nấc theo tình huống
| Tình huống | Dùng cách nào | Vì sao |
|---|---|---|
| Cho khách xem nhanh trong 30 phút, ngay lúc đang viết mã | Đường hầm tạm từ máy cá nhân | Dựng trong một phút, không cần cấu hình gì |
| Bản xem trước sống vài ngày, muốn địa chỉ theo tên miền của bạn | Đường hầm gắn tên miền | Địa chỉ cố định, không phải gửi lại đường dẫn mới mỗi lần |
| Khách nghiệm thu, cần bản giống bản chạy thật | Môi trường thử trên máy chủ | Cùng cấu hình, cùng dữ liệu mẫu, chạy 24 giờ |
| Nhiều người trong đội cùng xem và thử | Môi trường thử trên máy chủ | Không phụ thuộc vào máy của một người |
Bốn cái bẫy khi phơi bản chưa hoàn thiện, và khóa từng cái
| Bẫy | Hậu quả | Cách khóa |
|---|---|---|
| Bản xem trước bị công cụ tìm kiếm lập chỉ mục | Nội dung nháp xuất hiện trên kết quả tìm kiếm | Thêm tệp chặn thu thập, và đặt thẻ chặn lập chỉ mục |
| Dùng dữ liệu thật của khách hàng để trình diễn | Lộ dữ liệu cá nhân | Luôn dùng dữ liệu giả, không có ngoại lệ |
| Không có lớp đăng nhập | Ai có đường dẫn cũng vào được | Đặt một lớp xác thực đơn giản trước bản xem trước |
| Bản xem trước nối vào cơ sở dữ liệu thật | Thao tác thử làm hỏng dữ liệu thật | Tách hẳn cơ sở dữ liệu, và tách cả khóa thanh toán |
Danh sách kiểm trước khi gửi đường dẫn cho khách
# 1. Chan cong cu tim kiem curl -s https://xem-truoc.tenmien.vn/robots.txt curl -sI https://xem-truoc.tenmien.vn/ | grep -i "x-robots-tag" # 2. Kiem co lop dang nhap chua curl -sI https://xem-truoc.tenmien.vn/ | head -3 # nen tra ve 401 # 3. Kiem KHONG noi vao co so du lieu that grep -rn "DATABASE_URL" .env # 4. Kiem khoa thanh toan dang o che do thu nghiem grep -rn "sk_live\|pk_live" . && echo "CANH BAO: dang dung khoa that"
Bước bốn là bước quan trọng nhất và hay bị bỏ qua: bản xem trước dùng khóa thanh toán thật nghĩa là mỗi lần khách bấm thử là một giao dịch thật.
Câu hỏi thường gặp
ngrok có bản trả phí, có đáng nâng không?
Đáng khi bạn demo từ localhost thường xuyên và cần URL cố định + bỏ trang chào. Nhưng ở tần suất đó, cân nhắc luôn nấc 2: Tunnel trên VPS cho giá trị tương đương, miễn phí, và demo không phụ thuộc laptop.
Khách cần xem trên điện thoại thì sao?
Cả ba cách đều ra URL công khai, điện thoại mở bình thường. Đây chính là lý do dùng chúng thay vì localhost + share màn hình: khách tự cầm máy vuốt thử là chất lượng phản hồi khác hẳn.
Preview deployment của Vercel/Coolify so với ba cách này?
Cùng họ nấc 3 tự động hóa: mỗi PR một URL. Đã dùng các nền tảng đó thì tận dụng luôn; bài này cho phần còn lại của thế giới, app trên VPS tự quản, demo WordPress, đồ chưa vào pipeline.
Một VPS chứa bao nhiêu bản demo cùng lúc?
Tính theo RAM như mọi app: demo tĩnh/nhẹ gần như miễn phí, app Node mỗi bản ~200-400 MB. Gói 8 GB thoải mái chục demo lặt vặt cạnh production, nhớ mỗi bản một port và có nhãn tên rõ.
