Cloudflare Tunnel: เปิด Localhost ออกเน็ตแบบโคตรเซฟ ไม่ต้องง้อ Port Forwarding

บทความนี้ ขอพูดถึง Cloudflare Tunnel ตัวช่วยที่ชีวิตนักพัฒนาโลคอลๆ แบบเราๆ ง่ายขึ้นเยอะ ไม่ต้องมานั่งงมกับเรื่อง Port Forwarding ให้ปวดหัวอีกต่อไป หลายคนคงเคยเจอใช่ไหมครับ เวลาอยากโชว์โปรเจกต์ที่รันอยู่บนเครื่องเราให้เพื่อนดู หรืออยากเทส webhook จากภายนอก แต่ติดตรงที่เน็ตบ้านเรามันจะเปิดพอร์ตก็ยาก แถมน่ากลัวเรื่องความปลอดภัยอีก.

Cloudflare Tunnel เนี่ยนะ คือมันเป็นวิธีที่ทำให้บริการที่อยู่บนเครื่องคอมฯ เราเนี่ย สามารถออกสู่อินเทอร์เน็ตได้เลย โดยที่ "ไม่ต้องเปิดพอร์ต" บนเราเตอร์ซักพอร์ตเดียว แถมการเชื่อมต่อมันเป็นแบบ outbound connection ด้วยนะ คือตัว cloudflared (agent ของ Cloudflare) มันจะวิ่งออกไปหา Cloudflare เอง ทำให้ปลอดภัยโคตรๆ เพราะไม่มีใครสามารถวิ่งเข้ามาในเครือข่ายเราได้โดยตรง.

มาลองดูกันว่าทำไงบ้างนะ

ก่อนอื่นเลย ต้องมีบัญชี Cloudflare ก่อนนะครับ แล้วก็เพิ่มโดเมนของเราเข้าไปใน Cloudflare ด้วย. อันนี้สำคัญ!

1. ติดตั้ง cloudflared

สำหรับ Mac:

brew install cloudflare/cloudflare/cloudflared

สำหรับ Linux (Debian/Ubuntu):

curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 -o cloudflared
chmod +x cloudflared
sudo mv cloudflared /usr/local/bin/

Windows ก็มีนะ ไปโหลดจากหน้าเว็บ Cloudflare ได้เลย หรือ choco install cloudflared ก็ได้.

2. เข้าสู่ ระบบ Cloudflare

เปิด Terminal/CMD ขึ้นมา แล้วพิมพ์:

cloudflared tunnel login

คำสั่งนี้มันจะเปิดหน้าเว็บ Cloudflare ขึ้นมาให้เราล็อกอิน แล้วก็เลือกโดเมนที่เราต้องการใช้ พอเสร็จมันจะสร้างไฟล์ certificate ไว้ในเครื่องเราเอง ไม่ต้องทำไรมาก.

3. สร้าง Tunnel

มาถึงขั้นตอนสร้างอุโมงค์ครับ ตั้งชื่ออะไรก็ได้ที่เราจำได้ง่ายๆ เช่น my-awesome-tunnel

cloudflared tunnel create my-awesome-tunnel

พอสร้างเสร็จ มันจะให้ Tunnel ID มา (ประมาณ xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) แล้วก็บอก Path ของไฟล์ Credentials มาให้เก็บไว้ดีๆ นะครับ.

4. ตั้งค่า Config File

มาสร้างไฟล์ config.yml กันดีกว่าครับ จะวางไว้ที่ไหนก็ได้นะ แต่ถ้าอยากให้มันจัดการง่ายๆ ผมแนะนำให้สร้างโฟลเดอร์สำหรับ tunnel นี้ แล้วเอาไฟล์ credentials ที่ได้จากข้อ 3 มาวางไว้ด้วย แล้วสร้าง config.yml ในนั้นเลย โคตรสะดวก.

ตัวอย่าง config.yml แบบง่ายๆ:

tunnel: <YOUR_TUNNEL_ID_HERE> # เอา Tunnel ID ที่ได้มาจากขั้นตอนที่ 3 มาใส่
credentials-file: /path/to/your/credentials/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json # Path เต็มๆของไฟล์ credentials

ingress:
  - hostname: myapp.yourdomain.com # โดเมนที่เราต้องการให้คนเข้าถึง
    service: http://localhost:8000 # บริการที่เราอยาก expose ออกไป เช่น web server ของเรา
  - service: http_status:404 # ถ้าไม่เจออะไร ให้ตอบ 404

ตรง service: http://localhost:8000 เนี่ย สมมติว่าผมรัน Flask app ง่ายๆ บน port 8000 นะครับ ถ้าใครใช้ port อื่นก็เปลี่ยนตามได้เลย.

5. ทำ DNS Record ที่ Cloudflare Dashboard

เข้าไปที่ Cloudflare Dashboard (เว็บของ Cloudflare นั่นแหละ) เลือกโดเมนของเรา แล้วไปที่เมนู DNS ครับ.

เราต้องสร้าง CNAME record โดย: * Type: CNAME * Name: myapp (หรืออะไรก็ได้ที่เราอยากให้เป็น Subdomain เช่น www, api ถ้าเราตั้งใน config.yml ว่า myapp.yourdomain.com ก็ใส่แค่ myapp ตรงนี้) * Target: <YOUR_TUNNEL_ID_HERE>.cfargotunnel.com (เอา Tunnel ID เรามาใส่)

สำคัญมากนะตรงนี้ !! ผมเคยพลาดบ่อยมาก ลืมใส่ตรงนี้ หรือใส่ Target ผิดเป็นแค่ yourdomain.com เฉยๆ เนี่ยแหละ พอ cloudflared รันแล้วจะเจอ Error ว่า "can't establish connection" หรือ "no route to host" อะไรพวกนี้ประจำ โคตรน่าหงุดหงิด เพราะมันไม่ได้บอกตรงๆ ว่า DNS ผิดนี่สิ!

6. รัน Tunnel!

สุดท้ายก็รันมันเลย! เข้าไปใน Path ที่เราสร้าง config.yml ไว้ แล้วพิมพ์:

cloudflared tunnel run

ถ้าทุกอย่างถูกต้อง มันจะขึ้นว่า Tunnel เชื่อมต่อแล้ว แล้วเราก็สามารถเข้าถึง myapp.yourdomain.com ได้จากที่ไหนก็ได้บนโลกใบนี้แล้วครับ!

ความคิดเห็นส่วนตัว: Cloudflare Tunnelนี่เป็นอะไรที่โคตรดีสำหรับงาน prototyping หรืองานที่เราต้องการโชว์ demo ให้ลูกค้าดูแบบไวๆ ไม่ต้องเสียเวลาเซ็ตอัพ VPS หรือเช่า server อะไรมากมาย แถมยังได้ SSL/TLS ฟรีๆ จาก Cloudflare อีกต่างหาก สะดวก ปลอดภัย ลดความปวดหัวได้เยอะจริงครับ อย่างน้อยก็ไม่ต้องมานั่งงมกับ iptables หรือไฟร์วอลล์ของเราเตอร์แล้วอ่ะ!

ข้อเสียก็อาจจะมีบ้าง เช่น ถ้าอินเทอร์เน็ตที่บ้านเราหลุด อุโมงค์ก็หลุดตาม หรือถ้า Cloudflare มีปัญหา (ซึ่งโอกาสน้อยมาก) ก็อาจจะเข้าไม่ได้เหมือนกัน แต่โดยรวมแล้ว ฟีเจอร์ฟรีที่ได้มานี่คุ้มเกินราคาจริงๆ ครับ แนะนำเลยสำหรับใครที่อยากโชว์ของแต่ไม่อยากปวดหัวเรื่องเน็ตเวิร์ค.

หวังว่าจะเป็นประโยชน์นะครับ!

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