แชร์ Localhost สู่โลกภายนอกใน 1 นาที — ด้วย Dev Tunnels (ไม่ต้องใช้ ngrok)

แชร์ Localhost สู่โลกภายนอกใน 1 นาที — ด้วย Dev Tunnels (ไม่ต้องใช้ ngrok)

โดย Nokka (นก-กา) | 30 กรกฎาคม 2026

บทความนี้เขียนโดย AI (DeepSeek V4 Pro) ผ่าน Hermes Agent ภายใต้การควบคุมของ Nokka

คุณกำลังทำเว็บอยู่ที่ localhost:3000 — แล้วอยากให้เพื่อนร่วมทีมดู — หรืออยากทดสอบ webhook จาก Stripe — หรืออยากเปิดให้ลูกค้าดู demo

ปกติคุณต้อง:

1. ติดตั้ง ngrok
2. สมัครบัญชี
3. รัน ngrok http 3000
4. ได้ URL แบบ https://abc123.ngrok.io

แต่ถ้าคุณใช้ Visual Studio หรือ VS Code — คุณไม่ต้องทำอะไรเลย — เพราะ Microsoft มี Dev Tunnels อยู่ในเครื่องคุณแล้ว — ฟรี — ไม่ต้องสมัคร — ไม่ต้องติดตั้งอะไรเพิ่ม

บทความนี้จะสอนคุณใช้ Dev Tunnels ทั้ง 3 วิธี — Visual Studio, VS Code, และ Command Line

🎯 Dev Tunnels คืออะไร

Dev Tunnels คือบริการของ Microsoft ที่สร้าง public URL ชั่วคราวที่ชี้มาที่ localhost ของคุณ — ผ่าน Azure relay infrastructure — โดยไม่ต้องเปิด port ใน firewall

มือถือ / เพื่อนร่วมทีม / Webhook
         │
         ▼
https://xxxx-3000.usw2.devtunnels.ms/  ← Public URL (ฟรี)
         │
         ▼
   localhost:3000  ← เครื่องคุณ

Enter fullscreen mode Exit fullscreen mode

🆚 3 วิธี — เลือกตามเครื่องมือที่คุณใช้

วิธี เหมาะกับ ความซับซ้อน Persistent URL Visual Studio ASP.NET, .NET developers ⭐ ง่ายสุด — 1 บรรทัด ✅ VS Code ทุกภาษา — Node.js, Python, Go ⭐⭐ ง่าย — 3 คลิก ❌ (ต่อ session) CLI ทุกภาษา — ไม่ต้องเปิด IDE ⭐⭐⭐ ปานกลาง ✅

วิธีที่ 1: Visual Studio — ง่ายสุด (1 บรรทัด)

ขั้นตอน

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"
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

3. รันโปรเจกต์ตามปกติ (F5)

Visual Studio จะสร้าง Tunnel URL ให้อัตโนมัติ — เห็นใน Output window:

Hosting port 7175 at https://lxm0ltdt-7175.usw2.devtunnels.ms/

Enter fullscreen mode Exit fullscreen mode

4. แชร์ URL ให้ใครก็ได้

แค่นี้ — ไม่ต้องทำอะไรอีก — ทุกครั้งที่คุณกด F5 — Tunnel จะถูกสร้างให้อัตโนมัติ

3 ระดับการเข้าถึง

devTunnelAccess ใครเข้าได้ "private" เฉพาะคุณ — ต้อง login ด้วย Microsoft account เดียวกัน "organization" เฉพาะคนในองค์กร — Azure AD "public" ใครก็ได้ที่มีลิงก์

วิธีที่ 2: VS Code — 3 คลิก

ขั้นตอน

1. รันแอปของคุณ

npm run dev
# → localhost:3000

Enter fullscreen mode Exit fullscreen mode

2. เปิดแท็บ PORTS

Ctrl+Shift+P → พิมพ์ Ports: Focus on Ports View — หรือคลิกแท็บ PORTS ด้านล่าง (ข้าง TERMINAL)

3. Forward port

• ถ้า port 3000 ยังไม่โผล่ → คลิก “Forward a Port” → พิมพ์ 3000
• คลิกขวาที่ port 3000 → Port Visibility → Public

4. ได้ URL

URL จะโผล่ในตาราง PORTS — หน้าตาแบบนี้: https://xxxx-3000.usw2.devtunnels.ms/

ข้อควรรู้: VS Code ต้อง login ด้วย GitHub หรือ Microsoft account — ครั้งแรกจะมี pop-up ให้ login

3 ระดับการเข้าถึง (VS Code)

Visibility ใครเข้าได้ Private เฉพาะคุณ — ต้อง login ด้วยบัญชีเดียวกับ VS Code Organization เฉพาะคนในองค์กร Public ใครก็ได้ที่มีลิงก์

วิธีที่ 3: CLI — ใช้กับอะไรก็ได้

ติดตั้ง

Linux / macOS:

curl -sL https://aka.ms/DevTunnelCliInstall | bash

Enter fullscreen mode Exit fullscreen mode

Windows (winget):

winget install Microsoft.DevTunnels

Enter fullscreen mode Exit fullscreen mode

วิธีใช้ — 3 คำสั่ง

1. Login

devtunnel user login

Enter fullscreen mode Exit fullscreen mode

เลือก login ด้วย Microsoft, GitHub, หรือ Microsoft Entra ID

2. Host tunnel

# รันเซิร์ฟเวอร์ของคุณก่อน — เช่น
python -m http.server 8080

# แล้ว host tunnel
devtunnel host -p 8080

Enter fullscreen mode Exit fullscreen mode

3. ได้ URL

Hosting port 8080 at https://abc123.usw2.devtunnels.ms:8080/

Enter fullscreen mode Exit fullscreen mode

คำสั่งที่มีประโยชน์

คำสั่ง ใช้ทำอะไร devtunnel list ดู tunnel ทั้งหมด devtunnel show <id> ดูรายละเอียด tunnel devtunnel delete <id> ลบ tunnel devtunnel host -p 8080 --allow-anonymous เปิด public — ไม่ต้อง login devtunnel echo http -p 8080 สร้าง echo server ทดสอบ

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

ใช้สำหรับ ตัวอย่าง ทดสอบ Webhook Stripe, GitHub, LINE, Facebook — ส่ง webhook มาที่ localhost ได้ Demo ให้ลูกค้า แชร์ลิงก์ให้ลูกค้าดูของที่ยังไม่ deploy ทดสอบบนมือถือ เปิดจากมือถือจริง — ไม่ใช่ emulator Debug ร่วมกับทีม ให้เพื่อนร่วมทีมทดสอบ API โดยที่คุณ debug อยู่ Microsoft 365 ทดสอบ Power Platform, Teams app บน localhost OAuth testing ทดสอบ callback URL โดยไม่ต้อง deploy

🆚 Dev Tunnels vs ngrok

Dev Tunnels ngrok ติดตั้ง ไม่ต้อง — มากับ VS/VS Code ต้องลงแยก สมัครบัญชี Microsoft/GitHub account ที่มีอยู่แล้ว ต้องสมัครใหม่ ราคา ฟรี ฟรีมีข้อจำกัด (40 req/min, 1 tunnel) Persistent URL ✅ (VS, CLI) เฉพาะแผนเสียเงิน ($8/เดือน) Custom domain ❌ ✅ (แผนเสียเงิน) Inspect traffic ✅ (CLI) ✅ (web interface) VS/VS Code integration ✅ ในตัว ❌ ต้อง config เอง

⚠️ ข้อควรรู้

ข้อควรรู้ รายละเอียด Tunnel มีอายุ Persistent tunnel อยู่จนกว่าจะลบ — ephemeral tunnel หมดอายุเมื่อปิด Rate limit ไม่มีประกาศชัดเจน — แต่ฟรีสำหรับ development ต้อง login Dev Tunnels ไม่รองรับ anonymous hosting — ต้อง login เฉพาะ HTTP/HTTPS Dev Tunnels ออกแบบมาสำหรับ web traffic — ไม่ใช่ TCP tunnel ทั่วไป Azure infrastructure ข้อมูลวิ่งผ่าน Azure relay — ไม่ใช่ P2P

📚 แหล่งอ้างอิง

[1] Microsoft Learn. “Create and host a dev tunnel.” มีนาคม 2025. https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started

[2] Microsoft Learn. “Dev tunnels in Visual Studio 2022.” พฤษภาคม 2025. https://learn.microsoft.com/en-us/aspnet/core/test/dev-tunnels

[3] Visual Studio Blog. “Public preview of dev tunnels in Visual Studio for ASP.NET Core projects.” พฤศจิกายน 2022. https://devblogs.microsoft.com/visualstudio/public-preview-of-dev-tunnels-in-visual-studio-for-asp-net-core-projects/

[4] VS Code Docs. “Port Forwarding.” พฤศจิกายน 2021. https://code.visualstudio.com/docs/debugtest/port-forwarding

[5] Microsoft Learn. “Dev tunnels command-line reference.” มีนาคม 2025. https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/cli-commands

[6] Nitin Kumar Singh. “Dev Tunnels: Test Webhooks and Share Local Apps Without a Deploy.” เมษายน 2026. https://nitinksingh.com/posts/dev-tunnels-test-webhooks-and-share-local-apps-without-a-deploy/

Dev Tunnels คือ ngrok ที่มากับเครื่องมือที่คุณใช้อยู่แล้ว — ฟรี — ไม่ต้องติดตั้ง — ไม่ต้องสมัคร — 1 บรรทัดใน Visual Studio — 3 คลิกใน VS Code — 3 คำสั่งใน CLI