{"slug": "aechr-localhost-suuolkphaayn-kain-1-naathii-dwy-dev-tunnels-aimt-ngaich-ngrok", "title": "แชร์ Localhost สู่โลกภายนอกใน 1 นาที — ด้วย Dev Tunnels (ไม่ต้องใช้ ngrok)", "summary": "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.", "body_md": "*โดย Nokka (นก-กา) | 30 กรกฎาคม 2026*\n\n*บทความนี้เขียนโดย AI (DeepSeek V4 Pro) ผ่าน Hermes Agent ภายใต้การควบคุมของ Nokka*\n\nคุณกำลังทำเว็บอยู่ที่ `localhost:3000`\n\n— แล้วอยากให้เพื่อนร่วมทีมดู — หรืออยากทดสอบ webhook จาก Stripe — หรืออยากเปิดให้ลูกค้าดู demo\n\nปกติคุณต้อง:\n\n`ngrok http 3000`\n\n`https://abc123.ngrok.io`\n\nแต่ถ้าคุณใช้ **Visual Studio** หรือ **VS Code** — คุณไม่ต้องทำอะไรเลย — เพราะ Microsoft มี **Dev Tunnels** อยู่ในเครื่องคุณแล้ว — ฟรี — ไม่ต้องสมัคร — ไม่ต้องติดตั้งอะไรเพิ่ม\n\nบทความนี้จะสอนคุณใช้ Dev Tunnels ทั้ง 3 วิธี — Visual Studio, VS Code, และ Command Line\n\nDev Tunnels คือบริการของ Microsoft ที่สร้าง **public URL** ชั่วคราวที่ชี้มาที่ `localhost`\n\nของคุณ — ผ่าน Azure relay infrastructure — โดยไม่ต้องเปิด port ใน firewall\n\n```\nมือถือ / เพื่อนร่วมทีม / Webhook\n         │\n         ▼\nhttps://xxxx-3000.usw2.devtunnels.ms/  ← Public URL (ฟรี)\n         │\n         ▼\n   localhost:3000  ← เครื่องคุณ\n```\n\n| วิธี | เหมาะกับ | ความซับซ้อน | Persistent URL |\n|---|---|---|---|\nVisual Studio |\nASP.NET, .NET developers | ⭐ ง่ายสุด — 1 บรรทัด | ✅ |\nVS Code |\nทุกภาษา — Node.js, Python, Go | ⭐⭐ ง่าย — 3 คลิก | ❌ (ต่อ session) |\nCLI |\nทุกภาษา — ไม่ต้องเปิด IDE | ⭐⭐⭐ ปานกลาง | ✅ |\n\n**1. เปิด launchSettings.json**\n\nใน Solution Explorer → Properties → `launchSettings.json`\n\n**2. เพิ่ม 2 properties ใน launch profile**\n\n```\n{\n  \"profiles\": {\n    \"MyWebApp\": {\n      \"commandName\": \"Project\",\n      \"applicationUrl\": \"https://localhost:7175;http://localhost:5175\",\n      \"devTunnelEnabled\": true,\n      \"devTunnelAccess\": \"public\"\n    }\n  }\n}\n```\n\n**3. รันโปรเจกต์ตามปกติ (F5)**\n\nVisual Studio จะสร้าง Tunnel URL ให้อัตโนมัติ — เห็นใน Output window:\n\n```\nHosting port 7175 at https://lxm0ltdt-7175.usw2.devtunnels.ms/\n```\n\n**4. แชร์ URL ให้ใครก็ได้**\n\nแค่นี้ — ไม่ต้องทำอะไรอีก — ทุกครั้งที่คุณกด F5 — Tunnel จะถูกสร้างให้อัตโนมัติ\n\n`devTunnelAccess` |\nใครเข้าได้ |\n|---|---|\n`\"private\"` |\nเฉพาะคุณ — ต้อง login ด้วย Microsoft account เดียวกัน |\n`\"organization\"` |\nเฉพาะคนในองค์กร — Azure AD |\n`\"public\"` |\nใครก็ได้ที่มีลิงก์ |\n\n**1. รันแอปของคุณ**\n\n```\nnpm run dev\n# → localhost:3000\n```\n\n**2. เปิดแท็บ PORTS**\n\n`Ctrl+Shift+P`\n\n→ พิมพ์ `Ports: Focus on Ports View`\n\n— หรือคลิกแท็บ **PORTS** ด้านล่าง (ข้าง TERMINAL)\n\n**3. Forward port**\n\n`3000`\n\n**4. ได้ URL**\n\nURL จะโผล่ในตาราง PORTS — หน้าตาแบบนี้: `https://xxxx-3000.usw2.devtunnels.ms/`\n\nข้อควรรู้:VS Code ต้อง login ด้วย GitHub หรือ Microsoft account — ครั้งแรกจะมี pop-up ให้ login\n\n| Visibility | ใครเข้าได้ |\n|---|---|\nPrivate |\nเฉพาะคุณ — ต้อง login ด้วยบัญชีเดียวกับ VS Code |\nOrganization |\nเฉพาะคนในองค์กร |\nPublic |\nใครก็ได้ที่มีลิงก์ |\n\n**Linux / macOS:**\n\n```\ncurl -sL https://aka.ms/DevTunnelCliInstall | bash\n```\n\n**Windows (winget):**\n\n```\nwinget install Microsoft.DevTunnels\n```\n\n**1. Login**\n\n```\ndevtunnel user login\n```\n\nเลือก login ด้วย Microsoft, GitHub, หรือ Microsoft Entra ID\n\n**2. Host tunnel**\n\n```\n# รันเซิร์ฟเวอร์ของคุณก่อน — เช่น\npython -m http.server 8080\n\n# แล้ว host tunnel\ndevtunnel host -p 8080\n```\n\n**3. ได้ URL**\n\n```\nHosting port 8080 at https://abc123.usw2.devtunnels.ms:8080/\n```\n\n| คำสั่ง | ใช้ทำอะไร |\n|---|---|\n`devtunnel list` |\nดู tunnel ทั้งหมด |\n`devtunnel show <id>` |\nดูรายละเอียด tunnel |\n`devtunnel delete <id>` |\nลบ tunnel |\n`devtunnel host -p 8080 --allow-anonymous` |\nเปิด public — ไม่ต้อง login |\n`devtunnel echo http -p 8080` |\nสร้าง echo server ทดสอบ |\n\n| ใช้สำหรับ | ตัวอย่าง |\n|---|---|\nทดสอบ Webhook |\nStripe, GitHub, LINE, Facebook — ส่ง webhook มาที่ localhost ได้ |\nDemo ให้ลูกค้า |\nแชร์ลิงก์ให้ลูกค้าดูของที่ยังไม่ deploy |\nทดสอบบนมือถือ |\nเปิดจากมือถือจริง — ไม่ใช่ emulator |\nDebug ร่วมกับทีม |\nให้เพื่อนร่วมทีมทดสอบ API โดยที่คุณ debug อยู่ |\nMicrosoft 365 |\nทดสอบ Power Platform, Teams app บน localhost |\nOAuth testing |\nทดสอบ callback URL โดยไม่ต้อง deploy |\n\n| Dev Tunnels | ngrok | |\n|---|---|---|\nติดตั้ง |\nไม่ต้อง — มากับ VS/VS Code | ต้องลงแยก |\nสมัครบัญชี |\nMicrosoft/GitHub account ที่มีอยู่แล้ว | ต้องสมัครใหม่ |\nราคา |\nฟรี | ฟรีมีข้อจำกัด (40 req/min, 1 tunnel) |\nPersistent URL |\n✅ (VS, CLI) | เฉพาะแผนเสียเงิน ($8/เดือน) |\nCustom domain |\n❌ | ✅ (แผนเสียเงิน) |\nInspect traffic |\n✅ (CLI) | ✅ (web interface) |\nVS/VS Code integration |\n✅ ในตัว | ❌ ต้อง config เอง |\n\n| ข้อควรรู้ | รายละเอียด |\n|---|---|\nTunnel มีอายุ |\nPersistent tunnel อยู่จนกว่าจะลบ — ephemeral tunnel หมดอายุเมื่อปิด |\nRate limit |\nไม่มีประกาศชัดเจน — แต่ฟรีสำหรับ development |\nต้อง login |\nDev Tunnels ไม่รองรับ anonymous hosting — ต้อง login |\nเฉพาะ HTTP/HTTPS |\nDev Tunnels ออกแบบมาสำหรับ web traffic — ไม่ใช่ TCP tunnel ทั่วไป |\nAzure infrastructure |\nข้อมูลวิ่งผ่าน Azure relay — ไม่ใช่ P2P |\n\n[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)\n\n[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)\n\n[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/)\n\n[4] VS Code Docs. \"Port Forwarding.\" พฤศจิกายน 2021. [https://code.visualstudio.com/docs/debugtest/port-forwarding](https://code.visualstudio.com/docs/debugtest/port-forwarding)\n\n[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)\n\n[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/)\n\nDev Tunnels คือ ngrok ที่มากับเครื่องมือที่คุณใช้อยู่แล้ว — ฟรี — ไม่ต้องติดตั้ง — ไม่ต้องสมัคร — 1 บรรทัดใน Visual Studio — 3 คลิกใน VS Code — 3 คำสั่งใน CLI", "url": "https://wpnews.pro/news/aechr-localhost-suuolkphaayn-kain-1-naathii-dwy-dev-tunnels-aimt-ngaich-ngrok", "canonical_source": "https://dev.to/sarantoon/aechr-localhost-suuolkphaaynkain-1-naathii-dwy-dev-tunnels-aimtngaich-ngrok-hfm", "published_at": "2026-07-30 05:08:18+00:00", "updated_at": "2026-07-30 05:33:02.294826+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Microsoft", "Visual Studio", "VS Code", "Azure", "Dev Tunnels", "ngrok", "Nokka"], "alternates": {"html": "https://wpnews.pro/news/aechr-localhost-suuolkphaayn-kain-1-naathii-dwy-dev-tunnels-aimt-ngaich-ngrok", "markdown": "https://wpnews.pro/news/aechr-localhost-suuolkphaayn-kain-1-naathii-dwy-dev-tunnels-aimt-ngaich-ngrok.md", "text": "https://wpnews.pro/news/aechr-localhost-suuolkphaayn-kain-1-naathii-dwy-dev-tunnels-aimt-ngaich-ngrok.txt", "jsonld": "https://wpnews.pro/news/aechr-localhost-suuolkphaayn-kain-1-naathii-dwy-dev-tunnels-aimt-ngaich-ngrok.jsonld"}}