ติดตั้งใช้งาน Ngrok ทำ localhost ให้ online ได้ทั่วโลก

   By: DH Team

   อัปเดตล่าสุด Nov. 24, 2024

ติดตั้งใช้งาน Ngrok ทำ localhost ให้ online ได้ทั่วโลก

การ deploy เว็บไซต์ให้เป็นหน้าเว็บจริง ๆ ให้ใช้งานได้เหมือนกันกับที่รันใน localhost นั้น สำหรับมือใหม่ไม่ใช่เรื่องง่ายเลย คงจะดีกว่าถ้าเรามีเครื่องมืออะไรบางอย่างมาแก้ปัญหาตรงนี้เพื่อทดสอบหน้าเว็บของเรา


Ngrok คืออะไร ?

Ngrok (อ่านว่า "เอ็น จี ร็อค") คือ เซอร์วิสสำหรับทำ port forwarding เพื่อเปิด URL จาก localhost ของเราเป็น public โดยสามารถนำจุดเด่นตรงนี้มาทดสอบเว็บของเราได้ แทนที่เราจะสามารถรันหน้าเว็บเพียงแค่ใน localhost ตัวอย่างเช่น

http://localhost:8000

บทความแนะนำ: localhost คืออะไร

แน่นอนว่า URL ด้านบนจะมีเพียงเราที่สามารถเข้าลิงก์นี้ได้ แล้วถ้าเราส่งลิงก์ด้านบนให้เพื่อนเพื่อให้ทดสอบดูหน้าเว็บของเราล่ะ มันส่งไปได้หรือไม่


แน่นอนครับว่า ไม่สามารถเข้าดูได้ ดังนั้นวันนี้เราจะมาใช้ ngrok ในการเปิด port ให้ใครก็ได้ในโลกสามารถเข้าดูหน้าเว็บเราได้


Ngrok Download & Installation

เราสามารถดาวน์โหลด ngrok ได้โดยไปที่หน้า เว็บ ngrok โดยจะมีวิธีการติดตั้ง 2 แบบสามารถเลือกติดตั้งได้ตามสะดวก

  1. ติดตั้งผ่าน CLI 
  2. ติดตั้งแบบ manual

วิธีที่ 1 - ติดตั้งผ่าน CLI

วิธีการนี้เราจะติดตั้งผ่าน Terminal (สำหรับ macOS/Linux) หรือ PowerShell/Command Prompt (สำหรับ Windows) ถือว่าเป็นวิธีการที่สะดวกและรวดเร็วที่สุดเพราะว่าติดตั้งสะดวกในไม่กี่คำสั่งครับ 

Windows (ติดตั้งผ่าน Chocolatey Package Manager) 

choco install ngrok


Mac (ติดตั้งผ่านคำสั่ง Homebrew)

brew install ngrok/ngrok/ngrok


Linux (ติดตั้งผ่าน Apt)

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
  sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && \
  echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | \
  sudo tee /etc/apt/sources.list.d/ngrok.list && \
  sudo apt update && sudo apt install ngrok


เมื่อติดตั้งเสร็จแล้ว ลองเช็คเวอร์ชัน Ngrok

ngrok version


เพียงเท่านี้ก็ถือว่าเราติดตั้ง Ngrok สำเร็จ พร้อมใช้งานครับ


วิธีที่ 2 - ติดตั้งแบบ Manual

วิธีการนี้จะมีหลายขั้นตอนกว่าการติดตั้งแบบแรก เหมาะกับมือใหม่ที่ยังไม่ค่อยคุ้นชินการใช้พวก CLI 

  1. ดาวน์โหลด Ngrok Zip file
  2. แตก Zip ไฟล์ออกมา (unzip file) จากนั้นจะเห็นไฟล์ .exe
  3. เลือกวาง ngrok.exe ไฟล์ไว้ใน path หรือ Drive ที่ต้องการ เช่น Drive C เป็นต้น

เพียงเท่านี้ก็ถือว่าติดตั้ง Ngrok แบบ manual สำเร็จแล้วครับ


วิธีการใช้งาน Ngrok

ต่อมาก็จะเป็นการใช้งาน Ngrok ซึ่งขอบอกว่าวิธีการใช้งานง่ายมาก ๆ ไม่ได้มีขั้นตอนอะไรที่ยุ่งยากซับซ้อนดังต่อไปนี้ โดยจะเรียกวิธีการนี้ว่าการ "Start tunnel" โดยเปิด Terminal ของเราขึ้นมา แล้วเลือกหมายเลข port ที่เราต้องการเปิด ซึ่งในที่นี้คือ port 8000

เปิด Terminal ขึ้นมา

 ngrok http 8000


จะได้


พอร์ต 8000 ก็จะถูก forward หรือเปิดออกให้คนภายนอกเข้ามาที่ localhost ของเราได้ผ่านลิงก์

https://b880-134-236-119-38.ngrok.io


สมมติว่าเรากำลังใช้ Django ในการพัฒนาเว็บ และต้องการเปิด port 8000 ให้คนสามารถเข้าหน้าเว็บเราได้จากภายนอก ก็นำลิงก์ URL ด้านบนที่ถูก forward เรียบร้อยไปกำหนดใน  settings.py    ของ Django ในตัวแปร   ALLOWED_HOSTS = []  ได้เลย

# settings.py (Django)
ALLOWED_HOSTS = ['b880-134-236-119-38.ngrok.io', '127.0.0.1', 'localhost' ]


หรือถ้าไม่อยากกำหนดแบบด้านบนเราสามารถกำหนดแบบให้ยอมรับทุกโดเมนด้วยการใช้เครื่องหมาย  '*'  wildcard (ไม่แนะนำ) ให้ยอมรับทุกโดเมน

# settings.py Django Python
ALLOWED_HOSTS = ['*']


เป็นอันเสร็จสิ้นการใช้งาน ngrok ทดสอบส่งลิงก์ให้เพื่อนได้เลยครับ


เราสามารถส่งลิงก์นี้ให้เพื่อนสามารถเข้าดูเว็บไซต์ของเราได้เลยครับ


ข้อควรรู้เกี่ยวกับ Ngrok

  • Ngrok จะสุ่ม domain name ขึ้นมาใหม่ทุกครั้ง นั่นหมายความว่า เราสามารถใช้ domain name เดิมใน Ngrok ได้เพียงแค่ไม่กี่ชั่วโมงเท่านั้น (ยกเว้น Paid plan จะสามารถใช้ domain name เดิมได้ครับ)
  • Ngrok จะมีระยะเวลาของแต่ละ session เพียงแค่ 2 ชั่วโมง นั่นหมายความว่า เมื่อครบ 2 ชั่วโมงแล้วเซอร์วิสของ Ngrok จะหยุดทำงาน แล้วเราต้องทำการ start tunnel ขึ้นมาให้ถ้าหากต้องการใช้งานอีก และแน่นอนครับว่า Ngrok ก็จะสุ่ม domain name ขั้นมาให้ใหม่


Ngrok ราคาในการใช้บริการ

สุดท้ายแล้ว เดี๋ยวเราจะมาดูราคาการใช้บริการของ Ngrok กันครับ สำหรับบางโปรเจคท์ที่เราอาจจะต้องการฟีเจอร์ที่ advance มากขึ้นยกตัวอย่าง เช่น อยากให้ domain name เหมือนเดิมไม่เปลี่ยนแปลงหรือสุ่มใหม่ทุกครั้ง และอื่น ๆ อีกหลากหลายฟีเจอร์ที่ตัวฟรีไม่มีให้

ชื่อแพลน

ราคา (ต่อเดือน)

คำอธิบาย

Free

$0

สำหรับนักพัฒนาส่วนบุคคล

Personal

$8

สำหรับนักพัฒนาส่วนบุคคลและไม่ใช่เชิงการค้า

Pro

$20

สำหรับทีมนักพัฒนาและต้องการสเกลสู่โปรดักชัน

Enterprise

$65

สำหรับธุรกิจและมีความปลอดภัยในระดับสูงสุด


อ่านเพิ่มเติมได้ใน Ngrok Pricinig



จบลงไปแล้วกับบทความการติดตั้งและใช้งาน Ngrok หวังว่าคงจะเป็นประโยชน์นะครับ อย่าลืมติดตามเพจ devhub ด้วยนะครับ



เปิดโลกการเขียนโปรแกรมและ Software Development ด้วย online courses ที่จะพาคุณอัพสกิลและพัฒนาสู่การเป็นมืออาชีพ เรียนออนไลน์ เรียนจากที่ไหนก็ได้ พร้อมซัพพอร์ตหลังเรียน

เรียนเขียนโปรแกรม

คอร์สเรียนแนะนำ

พัฒนาเว็บไซต์ด้วย Django Python

คอร์สอบรม เรียนทำเว็บ ด้วย Django สุดยอด web framework อันดับ 1 ที่ได้รับ…

Full Stack Developer 2024

คอร์สเรียน Full Stack Developer 2024 ด้วยเฟรมเวิร์คยอดนิยมในการพัฒนา A…