ติดตั้งใช้งาน 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 ด้วยนะครับ

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