เปิดเว็บ Node.js ในเครื่องให้คนนอกเข้าได้ ง่ายๆ ด้วย ngrok

สวัสดีเพื่อนๆ ชาวโค้ดเดอร์ทุกคนนะ!

วันนี้จะมาแชร์ทิปเล็กๆ น้อยๆ ที่โคตรมีประโยชน์ เวลาเราอยากโชว์โปรเจคเว็บที่เรากำลังทำบนเครื่องตัวเองเนี่ยแหละ แต่ดันไม่มี Public IP หรือขี้เกียจเซ็ต Port Forwarding ยุ่งยากใช่ป่ะ? งั้นมานี่เลย! ผมมีตัวช่วยเจ๋งๆ มาแนะนำ นั่นก็คือ ngrok (เอ็น-กร็อค) นั่นเอง!

งงใช่มั้ยว่า ngrok คือไร?

เอาแบบง่ายๆ เลยนะ ngrok มันคือตัวที่ทำให้เว็บ หรือบริการที่เรา รันอยู่บน Localhost ของเราเนี่ย สามารถเปิดออกไปให้คนข้างนอก (ที่อยู่นอกเครือข่ายเราเลยนะ) เข้าถึงได้ผ่าน URL สาธารณะที่มันสร้างให้เราชั่วคราวอ่ะ คิดภาพง่ายๆ เหมือนเรามีอุโมงค์ลับๆ จากเครื่องเราไปที่อินเทอร์เน็ตโดยตรงเลยแหละ เจ๋งเป้งป่ะล่ะ!

เหมาะมากนะสำหรับใครที่กำลังพัฒนา Node.js app อยู่ แล้วอยากให้เพื่อนหรือลูกค้าดูแบบเรียลไทม์ หรือเอาไว้เทส Webhook ที่ต้องเรียกกลับมาที่เครื่องเราอะไรงี้.

มาเริ่มลงมือทำกันเลยดีกว่า!

ไม่ต้องพูดเยอะ เจ็บคอ มาดูวิธีใช้กันเลยดีกว่า ง่ายกว่าที่คิดเยอะ!

ขั้นตอนที่ 1: ติดตั้ง ngrok

ก่อนอื่นเลยนะ ต้องไปดาวน์โหลด ngrok มาก่อน ไปที่เว็บเขาเลย: https://ngrok.com/download เลือกให้ตรงกับ OS ที่ใช้อยู่นะ โหลดมาแล้วก็แตกไฟล์ .zip ออกมา จะได้ไฟล์ชื่อ ngrok (หรือ ngrok.exe บนวินโดวส์) ลากไปไว้ในที่ที่เราหาเจอง่ายๆ หน่อย เช่น ในโฟลเดอร์ C:\ grok หรือ /usr/local/bin ก็ได้

ขั้นตอนที่ 2: สมัคร Account (ถ้าอยากได้ฟีเจอร์เพิ่ม)

จริงๆ ไม่ต้องสมัครก็ได้นะ ถ้าใช้แค่ชั่วคราว แต่ถ้าอยากได้ URL แบบที่จำง่ายๆ หรืออยากใช้ฟีเจอร์เยอะขึ้นก็ไปสมัครเถอะ ฟรีก็มีนะ! สมัครเสร็จแล้วจะได้ Auth Token มา เอาไว้เชื่อมต่อ Account เรากับตัว ngrok ที่โหลดมาใช้ไง.

พอดาวน์โหลดมาแล้ว เปิด Terminal หรือ Command Prompt ขึ้นมา แล้วเข้าไปที่โฟลเดอร์ที่เก็บ ngrok ไว้ แล้วพิมพ์คำสั่งนี้เลย:

ngrok authtoken YOUR_AUTH_TOKEN_ที่ได้มาจากเว็บ

ใส่ Token ของเราไปนะ ตัวอย่าง: ngrok authtoken 1a2b3c4d5e6f7g8h9i0j

ขั้นตอนที่ 3: รันเว็บ Node.js ของเรา

อันนี้สำคัญ! แน่นอนว่าเราต้องมีเว็บ Node.js ที่รันอยู่บนเครื่องเราก่อนใช่ป่ะ สมมติว่าเว็บเรามันรันอยู่ที่ Port 3000นะ (เป็นพอร์ตยอดฮิตไง)

node app.js

เช็คดีๆ นะว่าเว็บเราเข้าได้จาก http://localhost:3000 จริงๆ

ขั้นตอนที่ 4: เปิดอุโมงค์ด้วย ngrok!

มาถึงขั้นตอนไฮไลท์แล้ว! เปิด Terminal หรือ Command Prompt อีกหน้าต่างนึง (ย้ำว่าอีกหน้าต่างนะ เพราะหน้าเดิมรัน Node.js อยู่) แล้วพิมพ์คำสั่งนี้:

ngrok http 3000

เปลี่ยนเลข 3000 เป็น Port ที่เว็บเราใช้อยู่จริงๆ นะ! พอ Enter ปุ๊บ ngrok มันจะทำงานแล้วโชว์หน้าจอประมาณนี้:

session status                online
version                       3.x.x
region                        us
web interface                 http://127.0.0.1:4040
forwarding                    https://xxxxxxxxxxxx.ngrok-free.app -> http://localhost:3000
forwarding                    http://xxxxxxxxxxxx.ngrok-free.app -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

เห็นตรงบรรทัด forwarding ปะ? นั่นแหละคือ URL สาธารณะของเรา! ลองคัดลอก URL นั้นไปเปิดในเบราว์เซอร์ดู หรือส่งให้เพื่อนดูได้เลย! พวกเขาก็จะสามารถเข้าถึงเว็บ Node.js ที่รันอยู่บนเครื่องเราได้แล้ว! สุดยอดไปเลยใช่มั้ยล่ะ!

ข้อควรระวังเล็กน้อย:

• เรื่องความปลอดภัย: แน่นอนว่าการเปิดเครื่องออกสู่ภายนอกมันก็มีความเสี่ยงนะ อย่าเปิดทิ้งไว้นานๆ หรือถ้าเป็นงานจริงจังก็ต้องระวังเพิ่มขึ้นหน่อย.
• URL เปลี่ยน: ถ้าใช้แบบฟรี URL ที่ได้มามันจะเปลี่ยนทุกครั้งที่เราปิด ngrok แล้วรันใหม่นะ ถ้าอยากได้ URL เดิมตลอดต้องเสียตังค์เพิ่ม (แต่ก็ไม่แพงมากหรอก).
• แบนด์วิดท์จำกัด: แบบฟรีก็จะมีลิมิตในการใช้งานอยู่บ้างนะ ถ้าคนเข้าเยอะๆ อาจจะช้าหน่อย.

สรุปแล้ว…

ngrok นี่มันช่วยชีวิตคนทำเว็บได้เยอะมากจริงๆ นะ! โดยเฉพาะนักพัฒนา Node.js แบบเราๆ ที่ต้องการทดสอบ หรือโชว์ผลงานแบบด่วนๆ ไม่ต้องวุ่นวายเรื่องเซ็ตติ้งเน็ตเวิร์คเลย. ลองเอาไปใช้กันดูนะ แล้วจะรู้ว่ามันง่ายโคตรๆ!

หวังว่าบทความนี้จะเป็นประโยชน์กับเพื่อนๆ ทุกคนนะ! มีอะไรสงสัย หรืออยากให้เขียนเรื่องอะไรอีก ก็คอมเมนต์มาได้เลย! ไปละ!