เปลี่ยน localhost ให้โลกเข้าถึง โดยใช้ Localtunnel

 สำหรับนักพัฒนา web หรือ mobile ที่ต้องเชื่อมต่อกับ back-end services คงคุ้นเคยกับการทดสอบผลลัพธ์ผ่าน localhost กันอยู่แล้ว แต่ localhost มันใช้ได้เฉพาะเครื่องเราน่ะสิ ถ้าเราต้องการทดสอบในคอมเครื่องอื่น หรือบนมือถือ ก็อาจจะต้องกำหนดให้อุปกรณ์เหล่านั้นอยู่ในเครือข่ายเดียวกับเครื่อง localhost ด้วย (ถ้าใน windows อาจจะต้องปิด firewall ของเครื่อง localhost ชั่วคราวด้วย) ซึ่งถ้าเราไม่ต้องการทำอะไรให้ยุ่งยาก ก็มีคนพัฒนา solution สำหรับงานนี้มาให้หลายตัวเลย เช่น nrgok, localtunnel เป็นต้น

ในที่นี้ถ้าเราใช้ nodejs เป็น back end อยู่แล้ว การใช้งาน localtunnel (https://localtunnel.me/ หรือ https://github.com/localtunnel/localtunnel) ก็ง่ายและสะดวกมาก โดยมีขั้นตอนดังนี้

• ติดตั้งโดยใช้ npm install -g localtunnel ถ้าต้องการติดตั้งแบบ global (ใช้ได้กับทุก project) หรือ npm install localtunnel สำหรับเฉพาะโปรเจคนั้นๆ 

• รัน local server ที่พอร์ตตามต้องการ เช่นสมมติว่าไฟล์โค้ด server คือ app.js และเราใช้พอร์ต 3000 ก็ใช้คำสั่ง node app.js หรือ nodemon app.js หรือถ้าใช้ nodemon แบบ local ก็ใช้ npx nodemon app.js

 

• เปิด terminal ใหม่ แล้วใช้คำสั่ง lt --port 3000 (ถ้าติดตั้ง localtunnel แบบ global) หรือ npx localtunnel --port 3000 (ถ้าติดตั้ง localtunnel แบบ local) ต้องระวังว่าพอร์ตต้องตรงกันกับที่เราใช้รัน server นะครับ

• เราจะได้ url สำหรับการทดสอบแบบชั่วคราว เช่น https://lazy-badger-40.loca.lt จากนั้นเราก็สามารถใช้งานจากที่ไหนก็ได้เลย เช่นเปิดเว็บบราวเซอร์จากเครื่องอื่น

ข้อสังเกต

• ถ้าใช้เว็บทดสอบ url ที่ได้ในครั้งแรก จะมีข้อความเตือนว่าเว็บนี้เป็นบริการของ localtunnel ไม่ใช่เว็บจริง ระวังโดนผู้ประสงค์ร้ายหลอก ให้กดปุ่มเพื่อดำเนินการต่อไป

 

• ปกติข้อความเตือนนี้จะเกิดขึ้นในทุกๆ 7 วันสำหรับ ip นึง แต่สามารถ bypass โดยกำหนด header ที่เหมาะสม ตามขั้นตอนแนะนำในหน้านี้
  

• ถ้ามีการแก้โค้ดฝั่ง server และมีการรีสตาร์ท server นั้น localtunnel จะหยุดทำงาน รวมถึงเมื่อเรา stop nodemon ด้วย ทำให้เราต้องใช้คำสั่งเรียก localtunnel ขึ้นมาใหม่ และจะได้ url ใหม่ด้วยครับ