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

โดย 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  ← เครื่องคุณ

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

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

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

devtunnel host -p 8080

3. ได้ URL

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

[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