นี่ไม่ใช่การประลองจริง ๆ Cloudflare Tunnel (cloudflared) และ PortPreview อยู่คนละห้อง Cloudflare Tunnel ไว้รักษาบริการให้ออนไลน์ถาวรหลัง edge ของ Cloudflare — Zero Trust, named tunnel, โดเมนกำหนดเอง PortPreview ไว้สำหรับยี่สิบนาทีถัดไปของเซสชัน dev — ทดสอบ webhook, QA มือถือ, แชร์ branch กับดีไซเนอร์ การเลือกระหว่างทั้งสองส่วนใหญ่ขึ้นกับว่าคุณมีปัญหาอะไรจริง ๆ
Cloudflare Tunnel เก่งอะไร
cloudflared ถูกสร้างเพื่อสิ่งเดียว: นำบริการขึ้นอินเทอร์เน็ตโดยไม่เปิดพอร์ตขาเข้าแม้แต่พอร์ตเดียวและไม่เปิดเผย IP origin รันบนเซิร์ฟเวอร์ ผูก named tunnel กับ hostname บนโดเมน Cloudflare ของคุณ traffic จะไหลผ่าน edge ของ Cloudflare ไปยัง origin ผ่านการเชื่อมต่อขาออกที่เครื่องคุณเริ่ม
สิ่งที่มันทำได้ดี:
- การ routing production ฟีเจอร์ named tunnel ทนทาน รัน cloudflared เป็นบริการได้และ hostname ทำงานต่อข้ามการรีสตาร์ต
- นโยบายเข้าถึง Zero Trust ป้องกัน tunnel หลัง SSO, MFA หรือ allowlist IP สำหรับเปิดเครื่องมือภายใน
- โดเมนกำหนดเอง นำโดเมนของคุณมาบน Cloudflare tunnel สิ้นสุดที่
your-domain.comไม่ใช่ subdomain ของผู้ขาย - การ routing WARP เข้าถึงบริการส่วนตัวจากอุปกรณ์ใด ๆ บนเครือข่าย Cloudflare โดยไม่ตั้งค่า VPN
ไม่มีสิ่งใดเกี่ยวกับการดีบัก webhook
ที่ Cloudflare Tunnel เก้ ๆ กัง ๆ สำหรับ dev
โหมด quick tunnel (cloudflared tunnel --url localhost:3000) ใกล้เคียงที่สุดที่ cloudflared เป็นเครื่องมือ dev และมันทำงาน คุณได้ URL *.trycloudflare.com ชี้ไปยังพอร์ตในเครื่อง แต่:
- URL หมุนทุกเซสชันเหมือน tunnel dev ส่วนใหญ่
- ไม่มีตัวตรวจคำขอในตัว คุณเห็นเฉพาะที่เซิร์ฟเวอร์ dev log และไม่มากกว่านั้น การจับ payload webhook เพื่อเล่นซ้ำภายหลังต้องติด proxy หรือ logger แยก
- การตั้งค่า named tunnel (เวอร์ชัน URL เสถียร) เกี่ยวกับบัญชี Cloudflare, record DNS และไฟล์ config คุ้มสำหรับบริการอายุยืน; เกินจำเป็นสำหรับเซสชันวนซ้ำ webhook
ที่ PortPreview เข้ากันได้
PortPreview เป็น CLI tunnel localhost สำหรับลูป dev คำสั่งเดียว URL HTTPS สาธารณะ จับและเล่นซ้ำคำขอในตัว
npx portpreview 3000สิ่งที่เราปรับให้ดีคือช่วงเวลาระหว่าง "ฉันเปลี่ยน handler webhook Stripe" กับ "ฉันรู้ว่ามันทำงานไหม" ช่วงนั้นควรเป็นวินาที จับ payload แก้ handler เล่นซ้ำจนเขียว ทั้งหมดโดยไม่ทริกเกอร์เหตุการณ์ต้นน้ำใหม่
เคียงข้างกัน
| ความต้องการ | Cloudflare Tunnel | PortPreview |
|---|---|---|
| เซสชันเร็วดีบัก webhook | ได้ (quick tunnel) | สร้างมาเพื่อสิ่งนี้ |
| จับและเล่นซ้ำคำขอ | ไม่ | ใช่ |
| hostname named เสถียร | ใช่ (มีการตั้งค่า) | ไม่ใช่จุดเน้นเริ่มต้น |
| โดเมนกำหนดเอง | ใช่ | subdomain ของ tunnel |
| นโยบายเข้าถึง Zero Trust | ใช่ | ไม่ |
| ความซับซ้อนการตั้งค่า | ต่ำสำหรับ quick กลางสำหรับ named | คำสั่งเดียว |
| รันตลอดเป็นบริการ | ใช่ | ออกแบบสำหรับเซสชัน |
| ไคลเอนต์โอเพนซอร์ส | ใช่ (cloudflared) | ใช่ |
เมื่อใดใช้ตัวไหน
ใช้ Cloudflare Tunnel เมื่อ
- ต้องการบริการออนไลน์ 24/7 โดยไม่เปิดพอร์ตไฟร์วอลล์
- ต้องการเข้าถึงแบบ SSO ไปยังแดชบอร์ดภายในหรือเครื่องมือ admin
- ต้องการ URL โดเมนกำหนดเองที่เสถียรหนุนด้วย cert CA จริงและ DNS Cloudflare ที่มีอยู่
- อยู่บน Cloudflare แล้วและต้นทุนการตั้งค่าส่วนเพิ่มน้อย
ใช้ PortPreview เมื่อ
- วนซ้ำ handler webhook และต้องการเล่นซ้ำคลิกเดียว
- ต้องการแชร์ branch กับดีไซเนอร์สิบนาที
- ทดสอบ callback OAuth หรือ flow มือถือโดยไม่ตั้งค่า DNS
- ไม่อยากจัดการบัญชี Cloudflare แค่เพื่อทดสอบเหตุการณ์ Stripe
อยู่ร่วมกันได้ดี
หลายทีมที่เราคุยด้วยใช้ทั้งสอง Cloudflare Tunnel สำหรับเครื่องมือภายในแบบ always-on ที่ต้องการ URL คงที่และ SSO PortPreview สำหรับการดีบัก webhook รายวันที่ต้องการเล่นซ้ำและคำสั่งเดียว ไม่ขัดกัน — เพียงแต่รับใช้ส่วนต่างกันของเส้นทาง dev-ถึง-prod
หากกำลังชั่ง ngrok หรือ localtunnel ด้วย การเปรียบเทียบเหล่านั้นอาจเกี่ยวข้องโดยตรงกว่า เข้าร่วมรายชื่อรอของ PortPreview สำหรับฝั่งลูป dev