เปิด localhost ให้คนอื่นเข้าได้ ด้วย Cloudflare Tunnels

สวัสดีครับ บทความนี้เป็น note สั้นๆ เกี่ยวกับ Cloudflare Quick Tunnels (หรือ TryCloudflare) เป็นเครื่องมือฟรีจาก Cloudflare ที่ช่วยให้เราเปิด localhost บนเครื่องเรา ให้คนอื่นเข้าผ่าน public URL ได้ แค่รันคำสั่งเดียว ไม่ต้องสมัคร account ไม่ต้องตั้งค่า DNS และไม่ต้องเปิด port ใดๆ

ใช้ทำอะไรได้บ้าง?

ปกติเวลาเรา dev เว็บบนเครื่อง เราจะเปิดที่ http://localhost:3000 ซึ่งคนอื่นเข้าไม่ได้ ถ้าเราอยากให้

• เพื่อนร่วมทีม หรือลูกค้า ลองเปิดดูเว็บที่เรากำลังทำอยู่
• เปิดทดสอบบนมือถือจริงๆ
• ให้ service ภายนอก เช่น Stripe, GitHub ส่ง webhook มาหาเครื่องเรา

ปกติต้อง deploy ก่อน แต่ถ้าใช้ Quick Tunnels ก็ได้ URL แบบนี้มาเลย

https://quiet-marble-otter-canyon.trycloudflare.com → http://localhost:3000

หลักการคือ cloudflared บนเครื่องเรา จะเชื่อมต่อออกไปหา Cloudflare (outbound อย่างเดียว) แล้วคนที่เข้า URL ด้านบน จะวิ่งผ่าน network ของ Cloudflare มาหาเครื่องเรา ได้ HTTPS มาให้ฟรีๆ ด้วย

Step 1 : ติดตั้ง cloudflared

ติดตั้งผ่าน Homebrew (macOS)

brew install cloudflared

ส่วน Windows หรือ Linux ดาวน์โหลดได้จากหน้า Downloads หรือ GitHub Releases ครับ

Downloads

Reference information for Downloads in Zero Trust networking. developers.cloudflare.com

ตรวจสอบว่าติดตั้งถูกต้อง

cloudflared --version

ถ้าเคยติดตั้งไว้นานแล้ว ต้องเป็นเวอร์ชัน 2020.5.1 ขึ้นไปนะครับ

Step 2 : รัน Web Server บนเครื่อง

รันโปรเจ็คของเราตามปกติ เช่น

npm run dev

Step 3 : เปิด Tunnel

เปิดอีก terminal นึง แล้วรันคำสั่งนี้ โดยใส่ URL ของ localhost ที่เราต้องการ

# Terminal 2
cloudflared tunnel --url http://localhost:4321

รอสักพัก จะเห็นใน terminal แสดง URL แบบสุ่มของเรา ประมาณนี้

+--------------------------------------------------------------------------------------------+
|  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
|  https://quiet-marble-otter-canyon.trycloudflare.com                                       |
+--------------------------------------------------------------------------------------------+

Step 4 : แชร์ URL

Copy URL https://xxxx.trycloudflare.com ส่งให้คนอื่น หรือลองเปิดบนมือถือได้เลย ถ้าเปิดแล้วเห็นเว็บเรา แสดงว่าใช้งานได้แล้วครับ 🎉

ปัญหาที่อาจเจอ : Vite บล็อก Host

ถ้าใช้ Vite (รวมถึง framework ที่ใช้ Vite เช่น Astro, SvelteKit) เปิดผ่าน URL ของ tunnel แล้วอาจจะเจอข้อความประมาณนี้

Blocked request. This host ("quiet-marble-otter-canyon.trycloudflare.com") is not allowed.

เพราะ Vite จะบล็อก host ที่ไม่รู้จัก วิธีแก้คือเพิ่ม .trycloudflare.com ลงใน server.allowedHosts (ขึ้นต้นด้วย . เพื่อให้รวม subdomain ทั้งหมด)

export default {
  server: {
    allowedHosts: ['.trycloudflare.com'],
  },
}

ถ้าต้องการใช้งานจริงแบบ production หรืออยากได้ domain ของตัวเอง ให้สมัคร Cloudflare account แล้วสร้าง Cloudflare Tunnel แบบปกติแทนครับ

Cloudflare Tunnel

Securely connect your origin servers, APIs, and services to Cloudflare with post-quantum encrypted tunnels — no public IPs required. developers.cloudflare.com

สรุป

เปิด localhost ให้คนอื่นเข้าได้ ด้วย Cloudflare Quick Tunnels แค่

1. ติดตั้ง cloudflared → brew install cloudflared
2. รัน web server บนเครื่อง → npm run dev
3. เปิด tunnel → cloudflared tunnel --url http://localhost:PORT
4. Copy URL https://xxxx.trycloudflare.com ไปแชร์ได้เลย

ส่วนใครที่ทำ Stripe webhook อยู่ แนะนำให้ใช้ Stripe CLI ดีกว่าครับ ลองอ่านได้จากบทความ วิธีการ Test Stripe Webhook บนเครื่อง local

หากใครติดปัญหาตรงส่วนไหน สอบถามมาได้นะครับ

Happy Coding ❤️