ngrok คืออะไร?

ถ้าจะให้อธิบายง่ายๆ ngrok ก็คือเครื่องมือที่ช่วยให้ Localhost บนเครื่องเราสามารถเข้าถึงได้จากภายนอกโดยผ่าน ngrok นั่นเอง สามารถเข้าได้ผ่านทั้ง http หรือ https จึงเหมาะมากๆสำหรับ Freelance ที่งบน้อยไม่ต้องการจด domain เช่า server บลาๆๆ ทำให้การ Demo งานให้ลูกค้า หรือการทำ debugging ได้ง่ายขึ้น

เรามาติดตั้ง ngrok กันเถอะ

ทุกท่านสามารถโหลด และติดตั้งง่ายๆ ได้ที่นี่เลย https://dashboard.ngrok.com
ซึ่งสามารถติดตั้งง่ายๆ แค่ 4 ขั้นตอนดังที่แสดงบนหน้าเว็บเลย

วิธีการติดตั้ง Ngrok

มาลองทำ Angular Debugging ด้วย Ngrok กันเลย

อันดับแรกเปิดไฟล์ ngrok.exe ขึ้นมาและพิมพ์คำสั่งลงไป

ngrok http 4200

นี่ก็เป็นคำสั่งใช้งาน ngrok ครับ โดย ngrok จะแมพไปที่ localhost:4200 เพื่อให้สามารถเข้าถึงได้จากภายนอกครับ

* Port 4200 นี่ใช้รันใน Angular นะครับ

หลังจากนั้นจะมีหน้าตาแบบนี้ขึ้นมาครับ ซึ่งเราสามารถเข้าถึงโปรเจคผ่าน

http://bf564496.ngrok.io หรือ https://bf564496.ngrok.io ได้เลยครับ ซึ่งใน Plan Free นี้ เราจะไม่สามารถตั้ง URL ได้เองครับ ทาง ngrok จะสุ่มให้


หลังจากนั้นก็เปิดโปรเจค Angular ของเราขึ้นมาครับ หลังจากเปิดโปรเจคมาแล้วก็สั่งรันตามคำสั่งด้านล่างเลยครับ

ng serve --disable-host-check

คราวนี้เราก็ลองมาเข้าผ่านลิงค์ที่ ngrok สร้างขึ้นมาให้ครับ ในที่นี้ของผมจะเป็นลิงค์นี้ครับ >>> https://bf564496.ngrok.io

เท่านี้เราก็สามารถเข้าถึงเว็บของเราจากที่ไหนก็ได้แล้วครับ