คู่มือการกำหนดค่า Ngrok Reverse Proxy บน ServBay

Ngrok คือเครื่องมือที่ทรงพลัง ช่วยให้บริการเว็บที่ทำงานอยู่บนเครื่องของคุณสามารถเข้าถึงได้อย่างปลอดภัยจากอินเทอร์เน็ต เพียงแค่เชื่อมต่อ Ngrok กับ ServBay คุณก็สามารถสร้างทางผ่านเข้าสู่เว็บไซต์ท้องถิ่นของคุณให้สาธารณะเข้าถึงได้อย่างปลอดภัย เหมาะอย่างยิ่งสำหรับการนำเสนอผลงาน, ทดสอบ Webhook หรือแบ่งปันเว็บที่กำลังพัฒนากับสมาชิกในทีมที่อยู่นอกองค์กร คู่มือนี้จะสอนวิธีตั้งค่าและใช้งาน Ngrok Reverse Proxy ผ่าน ServBay แบบละเอียด

ภาพรวม

ServBay สนับสนุน Ngrok ในตัว ทำให้ขั้นตอนติดตั้งและตั้งค่าง่ายสุด ๆ คุณสามารถจัดการ Tunnel ของ Ngrok ได้ผ่านอินเทอร์เฟซกราฟิกบน ServBay โดยตรง เพียงคลิกไม่กี่ครั้งก็สามารถแมปเว็บไซต์ท้องถิ่น (Localhost) ไปยัง URL สาธารณะได้ทันที

กรณีการใช้งาน

• สาธิตผลงานให้ลูกค้า: โชว์เว็บไซต์ฝั่งเครื่องของคุณให้ลูกค้าดูแม้อยู่คนละสถานที่
• ทดสอบ Webhook: ทดลองบริการของ Third-party ที่ต้องใช้ callback URL สาธารณะ (เช่น Payment gateway, API)
• ทดสอบบนอุปกรณ์มือถือ: ให้มือถือเชื่อมต่อ backend API บนเครื่องคุณผ่าน URL สาธารณะได้
• ร่วมพัฒนากับทีม: แบ่งปันการเข้าถึงเว็บ Local ชั่วคราวกับสมาชิกในทีม

ข้อกำหนดเบื้องต้น

1. ติดตั้ง ServBay แล้ว: ต้องแน่ใจว่าคุณได้ติดตั้งและรัน ServBay บน macOS เรียบร้อย
2. บัญชี Ngrok: ต้องมีบัญชี Ngrok คุณสามารถสมัครฟรีหรือแบบชำระเงินได้ที่ เว็บไซต์ทางการ Ngrok
3. มีเว็บไซต์ Local: เพิ่มและรันเว็บไซต์อย่างน้อย 1 เว็บไซต์ผ่าน ServBay เช่น servbay.demo

ขั้นตอนการใช้งาน

1. ติดตั้ง Ngrok Package บน ServBay

ก่อนใช้งานครั้งแรก ต้องติดตั้ง Ngrok บน ServBay ก่อน:

1. เปิดแอป ServBay
2. ที่แถบซ้าย เลือก ซอฟต์แวร์แพ็คเกจ (Packages)
3. ในรายการแพ็กเกจ หา Ngrok หรือพิมพ์ค้นหาด้านบน
4. กดปุ่มติดตั้งถัดจาก Ngrok
5. เมื่อติดตั้งเสร็จ ลองสลับสวิตช์เปิดบริการที่ด้านขวาของ Ngrok อาจเปิดไม่ติดหรือแสดงสถานะแปลก ๆ ได้หากยังไม่ได้ตั้งค่า AuthToken ยังไม่ต้องตกใจ เราจะตั้งค่าในขั้นตอนถัดไป

2. ขอรับ Ngrok Authtoken ของคุณ

Ngrok จะใช้ Authtoken เพื่อยืนยันตัวตนบัญชีและอนุญาตการใช้งาน

1. ไปที่ Ngrok Dashboard แล้วเข้าสู่ระบบบัญชีของคุณ

2. ที่แดชบอร์ด มองหาหัวข้อ Your Authtoken ("Getting Started" -> "Your Authtoken") ทางเมนูด้านซ้าย

3. คัดลอก Authtoken (เป็นสตริงยาว ๆ) และเก็บไว้ให้ปลอดภัย

   

3. ตั้งค่า Ngrok บน ServBay

ได้ Authtoken แล้ว กลับมาที่ ServBay เพื่อกำหนดค่า

1. ที่แถบนำทางซ้าย เลือก Tunnel

2. ในรายการ Tunnel Services เลือก ngrok

   

3. Auth Token (รหัสมอบสิทธิ์):

   • วาง Authtoken ที่คุณคัดลอกเมื่อสักครู่ลงในช่อง Auth Token

4. กำหนด Tunnel (Local Domain และ External Domain): ServBay สามารถสร้าง Tunnel หลายเส้นสำหรับแต่ละเว็บไซต์ Local

   • Local Domain (เว็บไซต์ท้องถิ่น):
     • คลิกเลือกเว็บไซต์ Local ที่ต้องการเปิดเผยผ่าน Ngrok เช่น servbay.test หรือ servbay.demo
   • External Domain (โดเมนภายนอก):
     • ผู้ใช้งาน Ngrok ฟรี: ปล่อยช่องนี้ว่างไว้ Ngrok จะสุ่มสร้าง URL สาธารณะ (เช่น ปลายทาง .ngrok-free.app หรือโดเมนฟรีของ Ngrok อื่น ๆ) ServBay จะโชว์ URL อัตโนมัติเมื่อ Tunnel เปิดใช้งานสำเร็จ
     • ผู้ใช้แบบจ่ายเงิน: ถ้าได้ตั้งค่าโดเมนตัวเองไว้ในบัญชี Ngrok ให้กรอกชื่อโดเมนนั้นได้เลย

5. เพิ่ม Tunnel หลายเส้น:

   • ต้องการสร้าง Tunnel ให้หลายเว็บไซต์ ให้คลิกปุ่ม + ขวาของรายการ Tunnel เพื่อเพิ่ม เสร็จแล้วทำแบบเดิมในขั้นตอน 4

6. บันทึกการตั้งค่า:

   • เมื่อครบทุกอย่างแล้ว คลิกปุ่ม Save (บันทึก) ด้านล่างขวา

4. เริ่มต้นและตรวจสอบ Ngrok Service

1. หลัง Save แล้ว ServBay จะพยายามสตาร์ทบริการ Ngrok ด้วยค่าที่ตั้งไว้
2. ดูสัญญาณไฟสถานะข้าง ngrok ถ้าทุกอย่างถูกต้อง ระบบจะเชื่อมต่อสำเร็จ ไฟเปลี่ยนเป็นสีเขียว
3. ในแต่ละ Tunnel หากช่อง External Domain เว้นว่างไว้ ตอนนี้จะโชว์ URL สาธารณะที่ Ngrok สร้างให้
4. ทดสอบการเข้าถึง:
   • กดปุ่มคัดลอกข้าง URL เพื่อก๊อปวางไปใช้งาน
   • หรือคลิกไอคอนเบราว์เซอร์ (รูปเข็มทิศหรือโลก) เพื่อเปิด URL นั้นในเบราว์เซอร์ทันที
   • ถ้าทุกอย่างปกติ จะเข้าถึงเว็บไซต์ Local ผ่าน URL Ngrok ได้เลย

5. การจัดการ Ngrok Tunnel

ในหน้า Ngrok Config ของ ServBay:

• คัดลอกโดเมนภายนอก: คลิกปุ่มคัดลอกเพื่อแชร์ลิงก์
• เปิดในเบราว์เซอร์: คลิกที่ไอคอนเบราว์เซอร์เพื่อทดสอบทันที
• เพิ่ม Tunnel: ปุ่ม +
• ลบ Tunnel ที่ไม่ใช้แล้ว: ปุ่ม -
• หยุดบริการ: สวิตช์ข้าง Ngrok Service สำหรับปิด (หรือเปิดใหม่)

ข้อควรระวัง

• ข้อจำกัดเวอร์ชันฟรีของ Ngrok: URL ภายนอกจะสุ่มเปลี่ยนทุกครั้งที่เปิดปิด Tunnel การใช้แบบฟรียังมีข้อจำกัดเรื่องจำนวนการเชื่อมต่อ แบนด์วิธ และเวลาการใช้งาน อยากได้โดเมนคงที่และฟีเจอร์เพิ่มเติมควรสมัครแบบชำระเงิน
• ตรวจสอบการทำงานเว็บไซต์ Local: ไซต์ที่ระบุใน Local Domain ต้องเปิดใช้งานได้ปกติบน ServBay (เช่น เลือก PHP, Nginx หรือ Apache ที่เหมาะสมและตั้งค่าเว็บถูกต้อง) Ngrok ทำหน้าที่แค่ส่งข้อมูล ไม่ได้บูทหรือแก้ปัญหาบริการ Local ให้
• ไฟร์วอลล์: ตรวจสอบให้แน่ใจว่า Firewall หรือแอนตี้ไวรัสบน macOS ของคุณไม่บล็อกการเชื่อมต่อของ ServBay หรือ Ngrok
• HTTPS: Ngrok รองรับ HTTPS อัตโนมัติ ช่วยให้ทดสอบเว็บอย่างปลอดภัยตามมาตรฐานปัจจุบัน

คำถามที่พบบ่อย (FAQ)

• ถาม: Ngrok เปิดไม่ติด สถานะแสดงไฟสีแดงหรือส้ม ทำยังไง?
  • ตอบ: เช็คว่ากรอก Authtoken ของ Ngrok ถูกต้องหรือไม่ ตรวจสอบอินเทอร์เน็ตว่าต่อได้หรือไม่ สามารถเข้าเว็บ Ngrok ได้ตามปกติหรือเปล่า ดู log ของ Ngrok (ไอคอน log ข้างบริการ) เพื่อเช็กข้อผิดพลาดโดยละเอียด
• ถาม: เป็นผู้ใช้ Ngrok ฟรี ทำไมช่อง External Domain ว่างเปล่าหรือมีข้อความ "Leave blank if you're a free user"?
  • ตอบ: ปกติ! สำหรับผู้ใช้ฟรีไม่ต้องกรอก เมื่อเปิด Tunnel แล้ว ServBay จะนำ URL แบบสุ่มที่ Ngrok สร้างมาแสดงให้เอง
• ถาม: สามารถใช้ Ngrok คู่กับ Tunnel อื่น (เช่น frp, Cloudflared) พร้อมกันได้ไหม?
  • ตอบ: ServBay รองรับติดตั้งและตั้งค่า Tunnel ได้หลายประเภท อยากใช้ตัวไหนเปิดพร้อมกัน เลือกได้ แต่อาจทำให้กำหนดค่าและเส้นทางเครือข่ายซับซ้อนหรือเกิดปัญหาชนกัน ควรตรวจสอบการตั้งค่าและเข้าใจวิธีทำงานของแต่ละตัว

สรุป

ด้วยการผสาน Ngrok เข้ามาใน ServBay นักพัฒนาเว็บบน macOS จะเปิดเผย Local Development Environment สู่สาธารณะได้สะดวกและปลอดภัยมากขึ้น ไม่ว่าจะต้องสาธิตให้ลูกค้า, ทดสอบ Webhook, หรือแบ่งปันให้ทีม ก็สามารถทำได้ด้วยคลิกเดียว อย่าลืมกำหนดค่าตามประเภทบัญชีของคุณ (ฟรีหรือชำระเงิน) และตรวจสอบให้บริการ Local พร้อมใช้งานเสมอ