วิธี Access localhost จากภายนอกมาที่เครื่องตัวเองมีอะไรบ้างนะ

ก่อนอื่นเลย บทความนี้อาจจะพูดแค่ในมุมมองเดียวคือมุมมองของการเดฟบนเครื่องคอมพิวเตอร์ ดังนั้นจึงไม่ได้พูดให้สามารถครอบคลุมหรือครบถ้วนสมบูรณ์ได้ หากใครรู้สึกว่าเอ๊ะๆๆ ไม่ถูกเหมือนที่เราเข้าใจเลยนี่นา ต้องขออภัยด้วยค่ะ

localhost คือเครื่องคอมพิวเตอร์ของเรา

IP Address ที่ Router แจกให้ โดยปกติ IP ของ Router จะถูกตั้งค่าเป็น 192.168.1.1

ปกติ Localhost หรือ IP Address 127.0.0.1 เกิดจากการ run server บนเครื่องของตัวเอง คนที่สามารถเข้าถึงก็จะมีแค่เจ้าของเครื่องเท่านั้น หรือถ้าอยู่วง LAN เดียวกันก็อาจจะเข้าด้วย IP Address ที่ Router แจกให้ก็ได้

แต่ถ้าอยู่นอกวง LAN มันก็จะทำไม่ได้ถ้าเครื่องที่ถูกเข้าถึงนั้นไม่ได้มีการทำ Public IP เนี่ยสิ

เข้าผ่าน Browser บนเครื่องคอมพิวเตอร์ของตัวเอง

เข้าผ่านโทรศัพท์ที่อยู่ในวง LAN เดียวกัน

แล้วเราจะให้คนจากภายนอกเข้ามาที่ localhost เราทำไม?

ส่วนใหญ่ที่เราจะทำแบบนี้ก็ตอนที่ต้องการทดสอบการทำ Webhook อะไรสักอย่าง เผื่อใครนึกภาพไม่ออกก็อย่างเช่นการทำงานที่เกี่ยวกับ ​Line Developer หรือ Facebook Developer เป็นต้น

หรือการทำให้คนจากภายนอกเข้ามาติดต่อกับเครื่องคอมพิวเตอร์ของเรา แต่เขาช่างอยู่ห่างไกล(ใกล้)เหลือเกิน

แล้วเราจะให้คนจากภายนอกเข้ามาที่ localhost เราได้อย่างไร?

จริงๆก็มีด้วยกันหลายวิธี อาจจะทำ Public IP ก็ได้ หรือจะใช้เครื่องมือช่วยก็ได้ ซึ่งจะแนะนำเครื่องมือเฉพาะที่เคยใช้และเวิร์คสำหรับเรานะคะ

เครื่องมือที่ช่วยในการ Access Localhost

ngrok

ทำ Gif เมื่อวันที่ 13/11/2020

หลายๆคนน่าจะเคยรู้จัก ngrok (อ่านว่าเอ็น-จี-ร็อก / เอ็น-กร็อก เรียกไม่เหมือนกันสักคน 😅) ใช้งานง่ายมาก แนะนำให้เข้าเว็บ https://ngrok.com/ แล้วกด Get started for free เลย

หลังจาก Download ngrok แล้วพิมพ์คำสั่งบน terminal

./ngrok https {port}
ถ้าในที่นี้ port คือ 80 ก็ใส่ไป
./ngrok https 80

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

เข้าได้แฮะ!

ง่ายมากๆ

localtunnel

localtunnel/localtunnel

ติดตั้งง่ายๆสำหรับบนเครื่องที่มี Node.js แล้ว

npm install -g localtunnel

สำหรับใครที่ไม่มีสามารถติดตั้ง Node.js ได้จากเว็บนี้เลย

Download | Node.js

คำสั่งสำหรับ Run ต่อจากนี้เราจะไม่ใช้ lt --port 8000 ที่ได้จาก Doc ของมันเพราะมันไม่เวิร์กล่ะ

หลังจากไปสืบเสาะมาจาก issue ใน repo นั้น เราก็ได้เพิ่ม url เข้าไป 👀

lt -h "https://serverless.social" -p {port}
ถ้าในที่นี้ port คือ 80 ก็ใส่ไป
lt -h "https://serverless.social" -p 80

ไหนลองทดสอบซิ

It works!

It works!

สรุป

หลักๆที่เราจะทำแบบนี้ก็เพื่อการเดฟซะส่วนใหญ่ สมมติว่าเราต้องการทำ Chatbot บน Facebook ในขณะที่เราเทสก็จำเป็นที่จะต้องทำ Webhook เพื่อให้ Facebook ส่ง Response มาที่เราได้ แต่การจะทำแบบนั้นได้จะต้องทำให้เครื่องคอมของเราเป็น server ที่มี https ซึ่งจะเป็นได้ก็ต้องอาศัยเครื่องมือเหล่านี้อีกที หวังว่าจะเห็นภาพกันมากขึ้นนะคะ

ถ้าไม่จำเป็นหลังจากเลิกเทสแล้วก็อย่าลืมปิดเครื่องมือเหล่านี้ด้วยล่ะ!