แชร์ Localhost สู่โลกภายนอกใน 1 นาที — ด้วย Dev Tunnels (ไม่ต้องใช้ ngrok) Microsoft's Dev Tunnels service provides a free, built-in alternative to ngrok for exposing localhost to the internet, available directly in Visual Studio, VS Code, and via CLI. The service creates temporary public URLs through Azure relay infrastructure without firewall configuration, supporting webhook testing, team demos, and mobile debugging. Developer Nokka demonstrates three methods to set up Dev Tunnels in under a minute, noting that Visual Studio offers the simplest one-line setup with persistent URLs. โดย Nokka นก-กา | 30 กรกฎาคม 2026 บทความนี้เขียนโดย AI DeepSeek V4 Pro ผ่าน Hermes Agent ภายใต้การควบคุมของ Nokka คุณกำลังทำเว็บอยู่ที่ localhost:3000 — แล้วอยากให้เพื่อนร่วมทีมดู — หรืออยากทดสอบ webhook จาก Stripe — หรืออยากเปิดให้ลูกค้าดู demo ปกติคุณต้อง: ngrok http 3000 https://abc123.ngrok.io แต่ถ้าคุณใช้ Visual Studio หรือ VS Code — คุณไม่ต้องทำอะไรเลย — เพราะ Microsoft มี Dev Tunnels อยู่ในเครื่องคุณแล้ว — ฟรี — ไม่ต้องสมัคร — ไม่ต้องติดตั้งอะไรเพิ่ม บทความนี้จะสอนคุณใช้ Dev Tunnels ทั้ง 3 วิธี — Visual Studio, VS Code, และ Command Line Dev Tunnels คือบริการของ Microsoft ที่สร้าง public URL ชั่วคราวที่ชี้มาที่ localhost ของคุณ — ผ่าน Azure relay infrastructure — โดยไม่ต้องเปิด port ใน firewall มือถือ / เพื่อนร่วมทีม / Webhook │ ▼ https://xxxx-3000.usw2.devtunnels.ms/ ← Public URL ฟรี │ ▼ localhost:3000 ← เครื่องคุณ | วิธี | เหมาะกับ | ความซับซ้อน | Persistent URL | |---|---|---|---| Visual Studio | ASP.NET, .NET developers | ⭐ ง่ายสุด — 1 บรรทัด | ✅ | VS Code | ทุกภาษา — Node.js, Python, Go | ⭐⭐ ง่าย — 3 คลิก | ❌ ต่อ session | CLI | ทุกภาษา — ไม่ต้องเปิด IDE | ⭐⭐⭐ ปานกลาง | ✅ | 1. เปิด launchSettings.json ใน Solution Explorer → Properties → launchSettings.json 2. เพิ่ม 2 properties ใน launch profile { "profiles": { "MyWebApp": { "commandName": "Project", "applicationUrl": "https://localhost:7175;http://localhost:5175", "devTunnelEnabled": true, "devTunnelAccess": "public" } } } 3. รันโปรเจกต์ตามปกติ F5 Visual Studio จะสร้าง Tunnel URL ให้อัตโนมัติ — เห็นใน Output window: Hosting port 7175 at https://lxm0ltdt-7175.usw2.devtunnels.ms/ 4. แชร์ URL ให้ใครก็ได้ แค่นี้ — ไม่ต้องทำอะไรอีก — ทุกครั้งที่คุณกด F5 — Tunnel จะถูกสร้างให้อัตโนมัติ devTunnelAccess | ใครเข้าได้ | |---|---| "private" | เฉพาะคุณ — ต้อง login ด้วย Microsoft account เดียวกัน | "organization" | เฉพาะคนในองค์กร — Azure AD | "public" | ใครก็ได้ที่มีลิงก์ | 1. รันแอปของคุณ npm run dev → localhost:3000 2. เปิดแท็บ PORTS Ctrl+Shift+P → พิมพ์ Ports: Focus on Ports View — หรือคลิกแท็บ PORTS ด้านล่าง ข้าง TERMINAL 3. Forward port 3000 4. ได้ URL URL จะโผล่ในตาราง PORTS — หน้าตาแบบนี้: https://xxxx-3000.usw2.devtunnels.ms/ ข้อควรรู้:VS Code ต้อง login ด้วย GitHub หรือ Microsoft account — ครั้งแรกจะมี pop-up ให้ login | Visibility | ใครเข้าได้ | |---|---| Private | เฉพาะคุณ — ต้อง login ด้วยบัญชีเดียวกับ VS Code | Organization | เฉพาะคนในองค์กร | Public | ใครก็ได้ที่มีลิงก์ | Linux / macOS: curl -sL https://aka.ms/DevTunnelCliInstall | bash Windows winget : winget install Microsoft.DevTunnels 1. Login devtunnel user login เลือก login ด้วย Microsoft, GitHub, หรือ Microsoft Entra ID 2. Host tunnel รันเซิร์ฟเวอร์ของคุณก่อน — เช่น python -m http.server 8080 แล้ว host tunnel devtunnel host -p 8080 3. ได้ URL Hosting port 8080 at https://abc123.usw2.devtunnels.ms:8080/ | คำสั่ง | ใช้ทำอะไร | |---|---| devtunnel list | ดู tunnel ทั้งหมด | devtunnel show