[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-how-to-use-cloudflare-tunnel-tutorial-all--*":3,"academy-blog-translations-xlabf2btsvflyqi":75},{"data":4,"page":74,"perPage":74,"totalItems":74,"totalPages":74},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":68,"keywords":69,"locale":44,"published_at":70,"scheduled_at":13,"school_blog":66,"short_description":71,"slug":72,"status":64,"title":6,"updated":73,"updated_by":13,"views":67},"วิธีใช้ Cloudflare Tunnel เชื่อม Localhost ออกเน็ต โดยไม่ต้องเปิด Port","sclblg987654321","school_blog_translations","\u003Cp>เชื่อว่า Developer ทุกคนต้องเคยเจอปัญหานี้: เขียนเว็บเสร็จแล้วในเครื่อง (Localhost) แต่อยากส่งให้ลูกค้าดู หรืออยากจะทดสอบ Webhook จาก Line, Stripe หรือ Facebook แต่ติดปัญหาเรื่อง Network จะทำ Port Forwarding ที่ Router ก็ยุ่งยาก แถมเน็ตบ้านสมัยนี้ส่วนใหญ่เป็น Private IP (CGNAT) ที่ทำยังไงก็เปิด Port ไม่ได้\u003C\u002Fp>\u003Cp>วันนี้ Superdev Academy จะพาไปรู้จักกับทางออกที่ดีที่สุดในยุคนี้ นั่นคือ Cloudflare Tunnel ครับ\u003C\u002Fp>\u003Ch2>Cloudflare Tunnel คืออะไร?\u003C\u002Fh2>\u003Cp>Cloudflare Tunnel (ชื่อเดิมคือ Argo Tunnel) เป็นส่วนหนึ่งของบริการ Cloudflare Zero Trust มันทำหน้าที่สร้าง \"ท่อ\" ที่ปลอดภัยเชื่อมต่อระหว่าง Server ในเครื่องของเรา (ไม่ว่าจะอยู่ในบ้าน, Office หรือ Data Center) เข้ากับ Network ของ Cloudflare โดยตรง\u003C\u002Fp>\u003Cp>ความเจ๋งคือ: ปกติเวลาคนจะเข้าเว็บเรา เขาต้องวิ่งมาหาเรา (Inbound) แต่ Cloudflare Tunnel จะให้เครื่องเราวิ่งไปหา Cloudflare เอง (Outbound) ทำให้เราไม่ต้องเปิด Port ใดๆ บน Router เลยแม้แต่ Portเดียว!\u003C\u002Fp>\u003Ch3>ทำไมต้องใช้ Cloudflare Tunnel? (เทียบกับ ngrok)\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cp>ฟรีและไม่จำกัด: ต่างจาก ngrok ตัวฟรีที่โดนจำกัดทั้งเวลาและ Bandwidth\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>ใช้ Domain ตัวเองได้: คุณสามารถเชื่อมต่อเข้ากับ Domain ที่คุณมีอยู่ใน Cloudflare ได้ทันที\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>ปลอดภัยสูง: ซ่อน Public IP ของเครื่องเราอย่างมิดชิด และได้ระบบป้องกัน DDoS จาก Cloudflare มาช่วยกรอง Traffic\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>HTTPS อัตโนมัติ: ไม่ต้องปวดหัวกับการทำ SSL Certificate เพราะ Cloudflare จัดการให้เสร็จสรรพ \u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>\u003Cstrong>🔒 ปิดประตูบ้านถาวร (Zero Attack Surface):\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>ปกติการทำ Port Forwarding คือการแง้มประตูบ้านทิ้งไว้ให้คนข้างนอกเข้ามาหาเราได้ ซึ่งเสี่ยงต่อการโดน Scan หาช่องโหว่ แต่ Cloudflare Tunnel จะทำการ \"ปิดประตูสนิท\" ไม่ต้องเปิด Port ใดๆ และไม่เปิดเผย Public IP ของเน็ตบ้านเราเลยแม้แต่นิดเดียว (Zero Attack Surface) ทำให้แฮกเกอร์หาทางเข้าเครื่องเราไม่เจอครับ\u003C\u002Fp>\u003Cimg src=\"https:\u002F\u002Fimagedelivery.net\u002Fg5Z0xlCQah-oO61sLqaEUA\u002FCloudflare_Tunnel_b04b6ea157\u002Ftwsme\" alt=\"Cloudflare Tunnel.webp\" width=\"1920\" height=\"1920\" data-align=\"left\" style=\"height: auto; margin-left: 0px; margin-right: auto; display: block;\">\u003Cp>\u003C\u002Fp>\u003Ch2>🛠 สิ่งที่ต้องเตรียมตัวก่อนเริ่ม (Prerequisites)\u003C\u002Fh2>\u003Cp>เพื่อให้การติดตั้ง Cloudflare Tunnel เป็นไปอย่างรวดเร็วและไม่ติดขัด คุณควรเตรียม 3 สิ่งนี้ให้พร้อมครับ:\u003C\u002Fp>\u003Ch3>1. บัญชี Cloudflare (Free Account)\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>ทำไมถึงต้องมี: เราต้องใช้ระบบจัดการของ Cloudflare Zero Trust ในการสร้างและควบคุม Tunnel\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>ข้อแนะนำ: เพียงแค่บัญชีแบบ Free Plan ก็เพียงพอสำหรับการใช้งาน Tunnel แล้วครับ คุณไม่จำเป็นต้องเสียเงินเพื่อใช้งานฟีเจอร์พื้นฐานนี้ โดยสามารถสมัครได้ที่\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fdash.cloudflare.com\u002F\"> \u003Cu>dash.cloudflare.com\u003C\u002Fu>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. Domain Name ที่จัดการผ่าน Cloudflare DNS\u003C\u002Fh3>\u003Cp>หัวใจสำคัญคือ Cloudflare Tunnel จะทำงานไม่ได้เลยถ้าไม่มีที่อยู่ (Domain) ให้มันยึดครับ\u003C\u002Fp>\u003Cp>\u003Cstrong>สิ่งที่ต้องเช็ก:\u003C\u002Fstrong>\u003C\u002Fp>\u003Col>\u003Cli>\u003Cp>\u003Cstrong>ต้อง Active:\u003C\u002Fstrong> เข้าไปดูในหน้า Dashboard ของ Cloudflare ให้ชัวร์ว่าโดเมนเราขึ้นสีเขียว Active แล้วนะ\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>ย้ายค่าย DNS:\u003C\u002Fstrong> ใครที่จดโดเมนไว้ที่อื่น (เช่น GoDaddy หรือ Namecheap) อย่าลืมเปลี่ยนค่า Name Server มาใช้ของ Cloudflare ให้เรียบร้อย\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>เหตุผลเพราะ Tunnel มันจะแอบไปสร้าง 'ทางลัด' หรือ CNAME Record ให้เราเองแบบอัตโนมัติครับ สะดวกสุดๆ!\u003C\u002Fp>\u003Ch3>3. Service หรือ Application ที่รันอยู่ในเครื่อง (Localhost)\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>ทำไมถึงต้องมี: Tunnel คือทางผ่าน ดังนั้นต้องมี \"ปลายทาง\" เตรียมรอไว้เพื่อให้ Traffic วิ่งไปถึง\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>ตัวอย่าง:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>Web App: หากคุณรัน Next.js, React หรือ Vue อยู่ในเครื่อง ให้เช็กว่ารันอยู่ที่ Port อะไร (เช่น http:\u002F\u002Flocalhost:3000)\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Backend: หากเป็น API ที่เขียนด้วย Go, Python หรือ Node.js (เช่น http:\u002F\u002Flocalhost:8080)\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Docker: หากรันผ่าน Container ตรวจสอบให้แน่ใจว่า Container นั้นทำงานอยู่ปกติและเราทราบ Internal Port ของมัน\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Tip: ก่อนจะทำ Tunnel ให้ลองเข้าเว็บผ่าน Browser ในเครื่องตัวเองให้ได้ก่อน เพื่อยืนยันว่า Service ของเราทำงานได้ปกติครับ\u003C\u002Fp>\u003Ch2>Step-by-Step: วิธีการติดตั้งและตั้งค่า\u003C\u002Fh2>\u003Cp>ในบทความนี้เราจะใช้วิธีที่จัดการง่ายที่สุดผ่านหน้า Cloudflare Dashboard (Remote Config) ครับ\u003C\u002Fp>\u003Ch3>1. สร้าง Tunnel ใน Dashboard\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cp>เข้าไปที่หน้า\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fone.dash.cloudflare.com\u002F\"> \u003Cu>Cloudflare Zero Trust\u003C\u002Fu>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>ไปที่เมนู Networks > Tunnels\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>กดปุ่ม Add a Tunnel เลือกเป็นแบบ Cloudflare (Managed)\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>ตั้งชื่อ Tunnel ของคุณ (เช่น superdev-local-server) แล้วกด Save\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Ch3>2. ติดตั้ง Connector (แนะนำวิธี Docker)\u003C\u002Fh3>\u003Cp>ในหน้าจอถัดไป Cloudflare จะมีคำสั่งให้เลือกตาม OS แต่สำหรับชาว Superdev เราแนะนำให้ใช้ Docker เพราะจัดการง่ายและไม่รกเครื่องครับ\u003C\u002Fp>\u003Cp>คัดลอกคำสั่งที่ได้จากหน้าจอ (ซึ่งจะมี Token เฉพาะของคุณ) มาวางใน Terminal:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">Bash\ndocker run cloudflare\u002Fcloudflared:latest tunnel --no-autoupdate run --token <YOUR_TOKEN_HERE>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>เมื่อรันแล้ว สถานะในหน้า Dashboard จะเปลี่ยนเป็น Healthy แสดงว่า \"ท่อ\" ของเราเชื่อมต่อสำเร็จแล้ว!\u003C\u002Fp>\u003Ch3>3. ตั้งค่า Public Hostname\u003C\u002Fh3>\u003Cp>ขั้นตอนสุดท้ายคือการบอก Cloudflare ว่าจะให้ Domain ไหนวิ่งมาที่เครื่องเรา:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Subdomain:\u003C\u002Fstrong> เช่น dev\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Domain:\u003C\u002Fstrong> เลือกโดเมนของคุณ\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Service Type:\u003C\u002Fstrong> เลือก \u003Cstrong>HTTP\u003C\u002Fstrong> (สำหรับ Web App ทั่วไปที่ยังไม่มี SSL ในเครื่องตัวเอง)\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>URL:\u003C\u002Fstrong> > * \u003Cstrong>กรณีรัน App ปกติ (Non-Docker):\u003C\u002Fstrong> กรอก localhost:3000\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>กรณีรัน Tunnel ผ่าน Docker (ตามขั้นตอนที่ 2):\u003C\u002Fstrong> ให้กรอก host.docker.internal:3000 แทนคำว่า localhost ครับ เพื่อให้ Container ของ Cloudflare มองเห็นโปรเจกต์ที่รันอยู่บนเครื่อง Host ของเรา\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>💡 Tip สำหรับชาว Docker:\u003C\u002Fstrong> > สาเหตุที่ต้องใช้ host.docker.internal เพราะถ้าเราใส่ localhost เฉยๆ ตัว Cloudflare Connector จะพยายามมองหา App \u003Cem>ภายในตัวมันเอง\u003C\u002Fem> ซึ่งหาไม่เจอแน่นอน การใช้คำสั่งนี้คือการบอกให้มันวิ่งกลับออกไปหาเครื่องคอมพิวเตอร์หลักของเรานั่นเองครับ\u003C\u002Fp>\u003Ch2>ลองทดสอบดูเลย!\u003C\u002Fh2>\u003Cp>ตอนนี้คุณสามารถเข้าเว็บที่รันอยู่ในเครื่องตัวเองผ่าน https:\u002F\u002Fdev.yourdomain.com ได้จากทุกที่ทั่วโลกแล้วครับ! ไม่ว่าคุณจะใช้เน็ตหอพัก เน็ตมือถือ หรือเน็ตออฟฟิศที่ Firewall หนาแค่ไหน Cloudflare Tunnel ก็เอาอยู่\u003C\u002Fp>\u003Cp>\u003Cstrong>หมายเหตุ:\u003C\u002Fstrong> ในการเข้าใช้งานครั้งแรกอาจจะรู้สึกว่าช้ากว่าการเข้า localhost เล็กน้อย เพราะข้อมูลต้องวิ่งไปที่ Network ของ Cloudflare ก่อน แต่ความเสถียรและความปลอดภัยที่ได้มานั้นคุ้มค่าแน่นอนครับ!\u003C\u002Fp>\u003Ch2>Pro Tip: เพิ่มความปลอดภัยด้วย Zero Trust Access\u003C\u002Fh2>\u003Cp>ถ้าคุณเอาไว้ตรวจงานข้างในทีม และไม่อยากให้คนนอกที่รู้ URL เข้ามาดูได้ คุณสามารถไปที่เมนู Access > Applications เพื่อสร้างหน้า Login กั้นไว้ได้ (เช่น ให้เฉพาะคนที่มี Email @company.com เท่านั้นที่เข้าได้) ซึ่งทั้งหมดนี้ \"ฟรี\" สำหรับผู้ใช้งานไม่เกิน 50 คนครับ\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cdiv data-type=\"horizontalRule\">\u003Chr>\u003C\u002Fdiv>\u003Cp>\u003C\u002Fp>\u003Ch2>สรุป\u003C\u002Fh2>\u003Cp>Cloudflare Tunnel คือเครื่องมือที่ช่วยให้ชีวิต Developer ง่ายขึ้นมาก ทั้งเรื่องความปลอดภัย ความสะดวก และประหยัดค่าใช้จ่าย ใครที่ยังใช้วิธีแบบเดิมๆ อยู่ แนะนำให้ลองเปลี่ยนมาใช้ดูครับ แล้วจะลืมการทำ Port Forwarding ไปเลย!\u003C\u002Fp>\u003Cp>ติดตามเทคนิคดีๆ สำหรับโปรแกรมเมอร์ได้ที่ Superdev Academy ครับ\u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"\u002Fblogs\u002Fcategories\u002FGolang\" title=\"Golang The Series\">Golang The Series\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"\u002Fblogs\u002Fcategories\u002FJS2GO\" title=\"JS2GO\">JS2GO\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\" title=\"10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\">10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>Follow Us:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.academy.th\" title=\"Follow Superdev Academy on Facebook\">Facebook: Superdev Academy\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\u002F\u002Fwww.youtube.com\u002F@SuperdevAcademy\" title=\"Watch on YouTube\">YouTube: Superdev Academy\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevacademy\u002F?hl=en target=\" title=\"See behind-the-scenes on Instagram\">Instagram: Superdev Academy\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy\" title=\"Watch short tips on TikTok\">TikTok: @superdevacademy\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002F\" title=\"Visit the official website of Superdev Academy\">Official Website: Superdev Academy.com\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003C\u002Fp>","cover_image_for_how_to_use_cloudflare_tunnel_to_expose_localhost_without_port_forwarding_zvg015xzin.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F08enic35zugf5ud\u002Fcover_image_for_how_to_use_cloudflare_tunnel_to_expose_localhost_without_port_forwarding_zvg015xzin.webp","2026-03-04 08:44:18.016Z","",{"keywords":15,"locale":38,"school_blog":48},[16,23,28,33],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:44:17.256Z","tfwqk04b06u56pz","วิธีใช้ Cloudflare Tunnel","2026-04-10 16:12:42.630Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:44:17.506Z","2hw2c6o2elosloo","Cloudflare Tunnel","2026-04-10 16:12:42.786Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:44:16.622Z","7k1sal58dnj3ycv","Cloudflare Zero Trust","2026-04-10 16:12:42.473Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:44:16.902Z","1pf59ie7wale4so","Localhost","2026-04-10 16:12:42.539Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":49,"collectionId":50,"collectionName":51,"expand":52,"id":66,"views":67},"rfxf19ot4iq992c","pbc_2105096300","school_blogs",{"category":53},{"blogIds":54,"collectionId":55,"collectionName":56,"created":57,"created_by":13,"id":49,"image":58,"image_alt":13,"image_path":59,"label":60,"name":61,"priority":62,"publish_at":63,"scheduled_at":13,"status":64,"updated":65,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:32:03.969Z","7acfigk1qkd_lv1k6bkji3.png","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Frfxf19ot4iq992c\u002F7acfigk1qkd_lv1k6bkji3.png",{"en":61,"th":61},"Web Development",0,"2025-01-21 03:43:00.282Z","published","2026-04-25 02:32:14.918Z","xlabf2btsvflyqi",313,"08enic35zugf5ud",[20,25,30,35],"2026-03-10 03:20:24.326Z","เจาะลึกวิธีใช้ Cloudflare Tunnel ตั้งแต่เริ่มต้นจนใช้งานได้จริง สอนวิธีเชื่อม Localhost ออกอินเทอร์เน็ตแบบไม่ต้องทำ Port Forwarding และไม่ต้องง้อ Public IP ปลอดภัยกว่าด้วยระบบ Zero Trust","how-to-use-cloudflare-tunnel-tutorial","2026-04-25 02:47:39.978Z",1,{"th":72}]