By: DH Team
อัปเดตล่าสุด Nov. 24, 2024
การ deploy เว็บไซต์ให้เป็นหน้าเว็บจริง ๆ ให้ใช้งานได้เหมือนกันกับที่รันใน localhost นั้น สำหรับมือใหม่ไม่ใช่เรื่องง่ายเลย คงจะดีกว่าถ้าเรามีเครื่องมืออะไรบางอย่างมาแก้ปัญหาตรงนี้เพื่อทดสอบหน้าเว็บของเรา
Ngrok (อ่านว่า "เอ็น จี ร็อค") คือ เซอร์วิสสำหรับทำ port forwarding เพื่อเปิด URL จาก localhost ของเราเป็น public โดยสามารถนำจุดเด่นตรงนี้มาทดสอบเว็บของเราได้ แทนที่เราจะสามารถรันหน้าเว็บเพียงแค่ใน localhost ตัวอย่างเช่น
http://localhost:8000
บทความแนะนำ: localhost คืออะไร
แน่นอนว่า URL ด้านบนจะมีเพียงเราที่สามารถเข้าลิงก์นี้ได้ แล้วถ้าเราส่งลิงก์ด้านบนให้เพื่อนเพื่อให้ทดสอบดูหน้าเว็บของเราล่ะ มันส่งไปได้หรือไม่
แน่นอนครับว่า ไม่สามารถเข้าดูได้ ดังนั้นวันนี้เราจะมาใช้ ngrok ในการเปิด port ให้ใครก็ได้ในโลกสามารถเข้าดูหน้าเว็บเราได้
เราสามารถดาวน์โหลด ngrok ได้โดยไปที่หน้า เว็บ ngrok โดยจะมีวิธีการติดตั้ง 2 แบบสามารถเลือกติดตั้งได้ตามสะดวก
วิธีการนี้เราจะติดตั้งผ่าน 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 สำเร็จ พร้อมใช้งานครับ
วิธีการนี้จะมีหลายขั้นตอนกว่าการติดตั้งแบบแรก เหมาะกับมือใหม่ที่ยังไม่ค่อยคุ้นชินการใช้พวก CLI
เพียงเท่านี้ก็ถือว่าติดตั้ง Ngrok แบบ manual สำเร็จแล้วครับ
ต่อมาก็จะเป็นการใช้งาน 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 กันครับ สำหรับบางโปรเจคท์ที่เราอาจจะต้องการฟีเจอร์ที่ advance มากขึ้นยกตัวอย่าง เช่น อยากให้ domain name เหมือนเดิมไม่เปลี่ยนแปลงหรือสุ่มใหม่ทุกครั้ง และอื่น ๆ อีกหลากหลายฟีเจอร์ที่ตัวฟรีไม่มีให้
ชื่อแพลน | ราคา (ต่อเดือน) | คำอธิบาย |
Free | $0 | สำหรับนักพัฒนาส่วนบุคคล |
Personal | $8 | สำหรับนักพัฒนาส่วนบุคคลและไม่ใช่เชิงการค้า |
Pro | $20 | สำหรับทีมนักพัฒนาและต้องการสเกลสู่โปรดักชัน |
Enterprise | $65 | สำหรับธุรกิจและมีความปลอดภัยในระดับสูงสุด |
อ่านเพิ่มเติมได้ใน Ngrok Pricinig
จบลงไปแล้วกับบทความการติดตั้งและใช้งาน Ngrok หวังว่าคงจะเป็นประโยชน์นะครับ อย่าลืมติดตามเพจ devhub ด้วยนะครับ
เปิดโลกการเขียนโปรแกรมและ Software Development ด้วย online courses ที่จะพาคุณอัพสกิลและพัฒนาสู่การเป็นมืออาชีพ เรียนออนไลน์ เรียนจากที่ไหนก็ได้ พร้อมซัพพอร์ตหลังเรียน
เรียนเขียนโปรแกรมคอร์สอบรม เรียนทำเว็บ ด้วย Django สุดยอด web framework อันดับ 1 ที่ได้รับ…
คอร์สเรียน Full Stack Developer 2024 ด้วยเฟรมเวิร์คยอดนิยมในการพัฒนา A…