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

> Source: <https://dev.to/sarantoon/aechr-localhost-suuolkphaaynkain-1-naathii-dwy-dev-tunnels-aimtngaich-ngrok-hfm>
> Published: 2026-07-30 05:08:18+00:00

*โดย 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 <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 | 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](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](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/](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](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](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/](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