Cloudflare Tunnel: เปิดเซิร์ฟเวอร์โลคอลให้โลกเห็นในไม่กี่นาที

เฮ้ย เคยไหมที่แบบว่า ทำเว็บเสร็จละอยากให้เพื่อนหรือลูกค้าดูบนเครื่องเราเนี่ยแหละ แต่ไม่อยาก deploy ขึ้นจริงจัง แค่โชว์เล่นๆ? หรือบางทีก็อยากลองเทส webhook จากภายนอกเข้ามาที่ dev server เรา? ปัญหาคือต้องมานั่งเปิด port forwarding ในเราเตอร์, ไม่ก็งงกับ NAT, บางที Firewall ก็กวนตีนอีก. เออ คืออย่างงี้ มันมีวิธีที่ง่ายกว่าเยอะมาก นั่นก็คือ Cloudflare Tunnel

เอาจริงๆ นะ Cloudflare Tunnel มันคืออะไรวะ? พูดง่ายๆ มันคือตัวกลางที่สร้าง secure tunnel จากเครื่องเรา (ที่อาจจะอยู่หลัง NAT หรือ Firewall) ไปยัง Cloudflare Network เว้ย. แล้ว Traffic จาก Internet ก็จะวิ่งผ่าน Cloudflare เข้ามาใน Tunnel นี้เลย โดยที่เราไม่ต้องเปิดพอร์ตอะไรเลยบนเราเตอร์เรา โคตรจะดี!

ประโยชน์หลักๆ ที่ผมชอบเลยนะ คือ 1. ไม่ต้องเปิดพอร์ต: อันนี้โคตรสำคัญสำหรับความปลอดภัย 2. ตั้งค่าง่าย: ง่ายกว่าการมานั่งงม DDNS หรือ router เยอะ 3. เร็ว: เพราะมันวิ่งผ่าน Cloudflare Edge Network 4. ฟรี: สำหรับการใช้งานส่วนตัว หรือ dev นี่คือจบเลย!

มาลองดูกันเลยดีกว่าว่าทำไง ไม่ได้ยากเลยเว้ย

# 1. ติดตั้ง cloudflared
# สำหรับ macOS (ใช้ Homebrew โคตรจะง่าย)
brew install cloudflare/cloudflared/cloudflared

# สำหรับ Linux (Debian/Ubuntu)
curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 -o /usr/local/bin/cloudflared
chmod +x /usr/local/bin/cloudflared

# สำหรับ Windows (PowerShell ในฐานะ Admin)
# ดาวน์โหลดตัว .exe จาก GitHub releases โดยตรง:
# https://github.com/cloudflare/cloudflared/releases
# แล้วเอาไปไว้ที่ PATH หรือรันจากโฟลเดอร์ที่โหลดมา

# 2. Login เข้า Cloudflare Account
# อันนี้จะเปิด browser ให้เราไป verify
cloudflared tunnel login

# 3. สร้าง Tunnel
# ตั้งชื่อ tunnel ให้มันหน่อย อันนี้ผมจะตั้งว่า my-dev-tunnel
cloudflared tunnel create my-dev-tunnel

# พอสร้างเสร็จ มันจะบอก ID ของ Tunnel มาให้ พร้อมกับบอกว่าไฟล์ credential (JSON) ไปอยู่ที่ไหน
# เก็บ ID ไว้ดีๆ นะ เพราะต้องใช้
# เช่น Output จะหน้าตาประมาณนี้:
# You can find your tunnel ID in the output or on the Cloudflare dashboard.
# A new tunnel has been created!
# Name: my-dev-tunnel
# ID: <YOUR_TUNNEL_ID>
# cloudflared will route traffic from this tunnel to your origin service.
# It will also create a Cloudflare-managed DNS record for your tunnel.
# It can be found at ~/.cloudflared/<YOUR_TUNNEL_ID>.json

หลังจากที่เราได้ Tunnel ID แล้ว เราต้องบอก cloudflared ว่าจะให้มันส่ง traffic ไปไหน เราจะสร้างไฟล์ config ชื่อ config.yml (หรืออะไรก็ได้ แต่ .cloudflared/config.yml เป็น default ที่ดี) ไว้ในโฟลเดอร์ .cloudflared ซึ่งมักจะอยู่ใน Home Directory ของเรา

# ~/.cloudflared/config.yml
tunnel: <YOUR_TUNNEL_ID>
credentials-file: /Users/username/.cloudflared/<YOUR_TUNNEL_ID>.json # หรือ C:\Users\username\.cloudflared\<YOUR_TUNNEL_ID>.json สำหรับ Windows

ingress:
  - hostname: my-dev-app.yourdomain.com # ตรงนี้สำคัญ! ต้องใช้โดเมนที่เรามีใน Cloudflare
    service: http://localhost:3000 # สมมติว่า dev server เราเปิดอยู่ที่ port 3000
  - service: http_status:404 # ถ้าไม่ตรงเงื่อนไขข้างบน ให้ส่ง 404

ข้อสำคัญตรงนี้: hostname ใน config.yml เนี่ย ต้องเป็นโดเมนที่เราเพิ่มไว้ใน Cloudflare แล้วนะ และก็ต้องเป็น Subdomain ที่เราจะใช้ เช่น my-dev-app.yourdomain.com ถ้ายังไม่มี ให้ไปเพิ่ม CNAME record ใน Cloudflare DNS ที่ชี้ไปที่ <YOUR_TUNNEL_ID>.cfargotunnel.com (Cloudflare จะแนะนำให้เองตอนสร้าง Tunnel) หรือจะให้ Cloudflare สร้าง DNS record ให้เราอัตโนมัติก็ได้ตอนรันคำสั่ง cloudflared tunnel route dns <YOUR_TUNNEL_ID> my-dev-app.yourdomain.com ก็ได้

# 4. สร้าง DNS Record (ถ้ายังไม่ได้ทำ)
# ให้ cloudflared จัดการสร้าง DNS record ให้เองเลย
cloudflared tunnel route dns my-dev-tunnel my-dev-app.yourdomain.com

# 5. รัน Tunnel!
# ใช้ชื่อ tunnel ที่เราสร้าง
cloudflared tunnel run my-dev-tunnel

# หรือถ้าเรามี config.yml ที่ถูกต้องแล้ว ก็แค่
# cloudflared tunnel --config ~/.cloudflared/config.yml run

# ถ้าทุกอย่างถูกต้อง คุณจะเห็นข้อความประมาณว่า Tunnel is active...
# แล้วก็ไปเปิด browser ที่ my-dev-app.yourdomain.com ได้เลย!

ปัญหาที่เคยเจอ: เคยเจอแบบว่ารันแล้วมันไม่ยอมเชื่อมต่อสักที ทั้งๆ ที่ config ก็ถูก ตรวจไปตรวจมา อ้าว! ลืมเปิด dev server บน localhost:3000 ซะงั้น! (โคตรจะเบลอ) หรือบางทีก็เป็นเรื่องของ DNS Cache ของเครื่องตัวเองที่ยังไม่ resolve โดเมนใหม่. อีกอันคือ hostname ใน config.yml ไม่ตรงกับโดเมนที่เรา set ไว้ใน Cloudflare อันนี้ก็เจอบ่อย. บางทีมี Firewall กวนๆ บล็อก outbound connection จาก cloudflared ด้วยนะ ก็ต้องไปเช็ค

บอกเลยว่า Cloudflare Tunnel นี่เป็นอะไรที่โคตรจะสะดวกตอน dev หรือตอนอยากโชว์งานให้ใครดูด่วนๆ ไม่ต้องมานั่งงมกับ network config ที่บางทีมันก็งงๆ เอาเป็นว่าถ้าต้องเปิด local dev server ออกไปข้างนอกแบบง่ายๆ และปลอดภัย อันนี้คือตัวเลือกอันดับต้นๆ ของผมเลย! ลองเล่นดูนะ ไม่ผิดหวังแน่นอน

Read more

Google ส่ง Gemini ลง Mac แบบ Native พร้อมตัวช่วย AI สุดล้ำ ยกระดับงานเดสก์ท็อป

Google ส่ง Gemini ลง Mac แบบ Native พร้อมตัวช่วย AI สุดล้ำ ยกระดับงานเดสก์ท็อป

Google เปิดตัว Gemini เวอร์ชัน Native บน Mac พร้อมฟีเจอร์ AI ล้ำสมัย ช่วยเพิ่มประสิทธิภาพการทำงาน ปลดล็อกความคิดสร้างสรรค์ และเชื่อมต่อข้อมูลส่วนตัวได้อย่างชาญฉลาด

By ทีมงาน devdog
เจาะลึก UEFA Champions League: สุดยอดความตื่นเต้นที่แฟนบอลทั่วโลกรอคอย

เจาะลึก UEFA Champions League: สุดยอดความตื่นเต้นที่แฟนบอลทั่วโลกรอคอย

เจาะลึก UEFA Champions League การแข่งขันระดับโลกที่แฟนบอลรอคอย พร้อมติดตามข่าวสารรอบโลกและการถ่ายทอดสดสุดพิเศษ ไม่พลาดทุกความมันส์!

By ทีมงาน devdog
Google อัปเกรด Chrome ครั้งใหญ่ เพิ่มฟีเจอร์ "Skills" ให้ AI จำคำสั่งโปรดของคุณ

Google อัปเกรด Chrome ครั้งใหญ่ เพิ่มฟีเจอร์ "Skills" ให้ AI จำคำสั่งโปรดของคุณ

อัปเกรด Chrome ด้วยฟีเจอร์ Skills ใหม่ ให้ AI จดจำและเรียกใช้คำสั่งโปรดของคุณได้ทันที ไม่ต้องพิมพ์ซ้ำ พร้อมเชื่อมต่อ Gemini ทั่วระบบ

By ทีมงาน devdog
CARTIER Santos-Dumont โฉมใหม่: เมื่อออบซิเดียนผสานตำนานนักบิน สู่ความงามเหนือกาลเวลา

CARTIER Santos-Dumont โฉมใหม่: เมื่อออบซิเดียนผสานตำนานนักบิน สู่ความงามเหนือกาลเวลา

คาร์เทียร์เปิดตัว Santos-Dumont หน้าปัดออบซิเดียน หินภูเขาไฟธรรมชาติผสานดีไซน์นักบินระดับตำนาน สะท้อนงานฝีมือร่วมสมัยและความหรูหรา

By ทีมงาน devdog