แชร์ 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  ← เครื่องคุณ

---

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

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

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

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

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

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

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

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

---

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

ขั้นตอน

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

npm run dev
# → localhost:3000

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

Windows (winget):

winget install Microsoft.DevTunnels

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

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