การใช้งาน ngrok ในลักษณะต่าง ๆ

• ngrok คืออะไร
• 1. ติดตั้งและตั้งค่าเบื้องต้น
• 2. เปิด Local Web Application
• 3. เปิด REST API สำหรับทดสอบ
• 4. รับ Webhook จากระบบภายนอก
• 5. ทดสอบ OAuth Callback
• 6. ใช้กับ Mobile Application
• 7. เปิด TCP Service
• 8. ใช้กับ Docker
• 9. ใช้เป็น Gateway หน้า API
• 10. เพิ่ม OAuth หน้า Local Application
• 11. จำกัด IP
• 12. Custom Domain
• 13. รัน ngrok เป็น Service
• 14. Request Inspection และ Debugging
• 15. รูปแบบการใช้งานที่พบบ่อย
• 16. ข้อควรระวังด้าน Security
• สรุป
• เอกสารอ้างอิง

คู่มือเชิงปฏิบัติสำหรับ Developer, API Testing, Webhook, Docker, TCP/SSH และการเพิ่ม Security หน้า Local Service

#ngrok คืออะไร

ngrok เป็นบริการ ingress/gateway ที่ทำให้ service ซึ่งรันอยู่ในเครื่อง local, container, server หลัง NAT/firewall หรือ private network สามารถมี public endpoint สำหรับรับ traffic จากภายนอกได้ โดย agent ของ ngrok เป็นฝ่ายสร้าง outbound connection ไปยัง ngrok edge จึงไม่จำเป็นต้องทำ port forwarding แบบดั้งเดิม

แนวคิดพื้นฐาน:

Internet / SaaS / Mobile App
          |
          v
   Public ngrok URL
          |
          v
      ngrok Edge
          |
     Secure Tunnel
          |
          v
 localhost / Docker / API / SSH

#1. ติดตั้งและตั้งค่าเบื้องต้น

หลังติดตั้ง ngrok ให้เชื่อม agent กับบัญชี:

ngrok config add-authtoken <YOUR_AUTHTOKEN>

สมมติ Web Application รันที่ port 3000:

ngrok http 3000

จะได้ public HTTPS endpoint ซึ่ง forward มายัง localhost:3000

เหมาะสำหรับ:

• Demo เว็บไซต์
• แชร์งานให้ผู้เรียน/ทีมทดสอบ
• ทดสอบจากโทรศัพท์จริง
• ทดสอบ frontend กับ backend ที่รันในเครื่อง

#2. เปิด Local Web Application

ตัวอย่าง React, Next.js, Laravel หรือ Spring Boot:

ngrok http 3000

หรือ Laravel:

php artisan serve
ngrok http 8000

Architecture:

Browser
   |
 HTTPS
   v
ngrok.app
   |
 Tunnel
   v
localhost:8000
   |
 Laravel

ข้อดีคือไม่ต้อง deploy application ขึ้น cloud เพียงเพื่อให้บุคคลภายนอกเข้าทดสอบชั่วคราว

#3. เปิด REST API สำหรับทดสอบ

สมมติ API:

http://localhost:8080/api/users

เปิด endpoint:

ngrok http 8080

จากนั้น client ภายนอก เช่น Postman, Mobile App หรือระบบอื่น สามารถเรียกผ่าน public URL ที่ ngrok จัดสรรให้

เหมาะกับ:

• API integration testing
• Mobile backend development
• Frontend/backend ที่พัฒนาแยกเครื่อง
• Demo API ในห้องเรียน

#4. รับ Webhook จากระบบภายนอก

นี่เป็น use case สำคัญมาก เพราะผู้ให้บริการภายนอกไม่สามารถ callback มาที่ localhost ได้โดยตรง

ตัวอย่าง local endpoint:

POST http://localhost:3000/webhook

เปิดด้วย:

ngrok http 3000

แล้วนำ URL เช่น:

https://<ngrok-domain>/webhook

ไปกำหนดเป็น webhook callback ของ GitHub, Stripe หรือระบบ SaaS ที่ใช้งาน

Flow:

GitHub / Stripe / SaaS
        |
        | POST webhook
        v
    ngrok Edge
        |
        v
 localhost:3000/webhook

สำหรับ production-like testing ควรตรวจสอบ webhook signature ไม่ใช่อาศัยเพียง URL ที่เดายาก

#5. ทดสอบ OAuth Callback

OAuth provider ต้อง redirect browser กลับมายัง URL ที่เข้าถึงได้จากภายนอก

Local callback:

http://localhost:3000/auth/callback

สามารถเปิด application ด้วย ngrok แล้วกำหนด redirect URI เป็น public ngrok URL:

https://<ngrok-domain>/auth/callback

เหมาะสำหรับพัฒนา:

• Google Login
• GitHub Login
• OAuth 2.0 / OIDC integrations

#6. ใช้กับ Mobile Application

มือถือจริงอาจไม่สามารถเข้าถึง localhost ของเครื่องพัฒนาได้โดยตรง

แทนที่จะ hard-code:

http://localhost:8080/api

ให้ mobile app เรียก:

https://<ngrok-domain>/api

และให้ ngrok forward ไปยัง:

localhost:8080

วิธีนี้เหมาะกับ Flutter, React Native, Android และ iOS ระหว่าง development

#7. เปิด TCP Service

ngrok รองรับ TCP endpoint จึงใช้กับ service ที่ไม่ใช่ HTTP ได้ด้วย ตัวอย่างเชิงแนวคิด:

ngrok tcp 22

สามารถใช้กับ SSH หรือ TCP-based service ตามสิทธิ์และข้อจำกัดของแผนที่ใช้งาน

Flow:

Remote Client
     |
     | TCP
     v
 ngrok TCP Endpoint
     |
     v
 localhost:22
     |
    SSH

อย่าเปิด SSH, database หรือ administrative service สู่ public network โดยไม่มี authentication, access control และมาตรการ hardening ที่เหมาะสม

#8. ใช้กับ Docker

กรณี application อยู่ใน Docker สามารถรัน ngrok agent เป็น container ได้

บน Windows/macOS ตัวอย่าง:

docker run --rm -it   -e NGROK_AUTHTOKEN=<YOUR_AUTHTOKEN>   ngrok/ngrok:latest   http host.docker.internal:8080

บน Linux สามารถใช้ host networking ตาม environment:

docker run --net=host --rm -it   -e NGROK_AUTHTOKEN=<YOUR_AUTHTOKEN>   ngrok/ngrok:latest http 8080

อีกแนวทางคือวาง app และ ngrok ไว้ใน Docker Compose network เดียวกัน แล้ว forward ไปยังชื่อ service ภายใน network

#9. ใช้เป็น Gateway หน้า API

ngrok รุ่นปัจจุบันไม่ได้จำกัดบทบาทไว้แค่ tunnel แต่สามารถวางเป็น gateway หน้า service และใช้ Traffic Policy เพื่อทำงาน เช่น:

• Authentication
• OAuth / OIDC
• JWT validation
• IP restrictions
• Rate limiting
• Request/response transformation
• Routing
• Webhook verification
• WAF

ภาพรวม:

Client
  |
  v
ngrok Gateway
  |-- Authentication
  |-- Access Policy
  |-- Rate Limit
  |-- Routing
  v
API / Service

จึงสามารถใช้เพิ่ม control หน้า legacy API โดยไม่จำเป็นต้องแก้ application code ทุกส่วน

#10. เพิ่ม OAuth หน้า Local Application

Traffic Policy สามารถบังคับ authentication ก่อน request จะถึง application

ตัวอย่างแนวคิด policy.yml:

on_http_request:
  - actions:
      - type: oauth
        config:
          provider: google

รัน:

ngrok http 8080 --traffic-policy-file policy.yml

เหมาะกับ demo/admin tool ที่ไม่ควรเปิดให้ทุกคนบนอินเทอร์เน็ตเข้าถึง

#11. จำกัด IP

หาก endpoint ใช้เฉพาะทีมงานหรือระบบที่ทราบ source IP ควรกำหนด IP/CIDR allow/deny ผ่าน Traffic Policy แทนการเปิด endpoint โดยไม่มีข้อจำกัด

Use case:

Allowed IP
    |
    v
ngrok Edge ----> Local API

Unknown IP
    |
    +----------> Reject

เหมาะกับ internal demo, partner integration และ administrative endpoint

#12. Custom Domain

สำหรับงานที่ต้องการ hostname คงที่ สามารถใช้ domain ที่กำหนดเองได้ในแผนที่รองรับ เช่นแนวคิด:

ngrok http 8080 --url https://app.example.com

เหมาะกับ:

• OAuth redirect URI ที่ไม่อยากเปลี่ยน
• Webhook endpoint ระยะยาว
• Demo environment
• Development integration ที่ต้องการ URL คงที่

#13. รัน ngrok เป็น Service

หากต้องการให้ tunnel กลับมาทำงานหลังเครื่อง restart สามารถติดตั้ง agent เป็น service ได้:

ngrok service install --config ./ngrok.yml
ngrok service start

เหมาะกับ development server, lab server หรือ integration environment ที่ต้องเปิด endpoint ต่อเนื่อง

#14. Request Inspection และ Debugging

ngrok มีความสามารถด้าน traffic inspection ช่วยตรวจสอบ request/response, headers, body, latency และรายละเอียดของ traffic

มีประโยชน์มากกับ:

• Debug webhook
• ตรวจ payload
• ตรวจ HTTP headers
• วิเคราะห์ callback failure
• API testing

#15. รูปแบบการใช้งานที่พบบ่อย

#16. ข้อควรระวังด้าน Security

การเปิด tunnel หมายถึง service ภายในอาจถูกเข้าถึงจากอินเทอร์เน็ตได้ ควร:

1. เปิดเฉพาะ port/service ที่จำเป็น
2. ใช้ authentication สำหรับข้อมูลที่ไม่ควรเป็น public
3. ใช้ IP restriction เมื่อทำได้
4. ตรวจสอบ webhook signature
5. หลีกเลี่ยงการ expose database หรือ SSH โดยไม่มี hardening
6. ไม่ commit authtoken หรือ secret ลง Git
7. ปิด endpoint เมื่อเลิกใช้งาน
8. ตรวจ traffic และ log ระหว่างการทดสอบ

#สรุป

ngrok เหมาะกับวงจรพัฒนาซอฟต์แวร์หลายรูปแบบ ตั้งแต่การแชร์ Web Application และ REST API จาก localhost, รับ Webhook, ทดสอบ OAuth/Mobile App, expose TCP service, ทำงานร่วมกับ Docker ไปจนถึงการใช้เป็น gateway ที่บังคับ authentication และ traffic policy หน้า application

สำหรับการเรียนการสอน Software Engineering สามารถนำไปทำ workshop ต่อเนื่องได้ เช่น:

Workshop 1: Local Web -> ngrok
Workshop 2: REST API -> Postman ผ่าน ngrok
Workshop 3: GitHub Webhook -> ngrok -> Local API
Workshop 4: Docker -> ngrok
Workshop 5: Secure Endpoint ด้วย OAuth / Traffic Policy
Workshop 6: API Gateway และ IP Restriction

#เอกสารอ้างอิง

• ngrok Documentation / Share localhost: https://ngrok.com/use-cases/share-localhost
• ngrok Gateway: https://ngrok.com/gateway
• ngrok Docker: https://ngrok.com/download/docker
• ngrok Security: https://ngrok.com/security