ใช้ ngrok กับการ develop LINE Bot อย่างง่าย

ถ้าเราทำตาม getting start ของ LINE developer ก็จะแนะนำให้เรา deploy ผ่านทาง Heroku ซึ่งก็ถูกแล้วที่เราจะให้ user คุยกับ bot ได้ผ่านทาง server ที่อยู่บน internet

แต่ถ้าในระหว่าง development ล่ะ เราตัองเสียเวลามา deploy สิ่งที่เรากำลังทดลองตลอดมันก็ไม่สะดวกเท่าไหร่ ดังนั้นผมเลยถามในกลุ่ม LINE Developer Thailand ก็ได้ความว่าใช้ ngrok ดิ แต่ก็กลับมาคิดว่าใช้งานอย่างไงหว่า เลยลองใช้ดู ถึงกับอุทานว่า เห้ย!!! ง่ายมากกก (กอไก่ล้านตัว) เลยจะลองมาแชร์ดูครับ สำหรับใครมีปัญหาเดียวกันกับผม Let go….

ngrok คืออะไร?

เป็นเครื่องมือหรือโปรแกรมที่ทำให้ network ภายนอกสามารถมองเห็นเครื่องเราได้ผ่านท่อของโปรแกรมที่เป็นระบบปลอดภัย (Secure Tunnel) โดยทะลุผ่าน NATs และ firewalls นั้นก็คือเราจะทำให้คนภายนอกเข้าถึง localhost server เราได้เพียงบอก ngrok ว่าจะให้เข้าถึงผ่าน port อะไร หลังจากนั้น ngrok ก็จะ generate URL มาให้ เราก็สามารถใช้สำหรับเข้าถึง localhost ได้เลย

สมัครสมาชิก ngrok

ก่อนอื่นที่จะใช้งาน ngrok ได้ก็ต้องสมัครสมาชิกก่อน เพราะว่า ngrok จำเป็นต้องให้คุณ config ด้วย authtoken ก่อนที่จะดำเนินการอย่างอื่นได้

ก็มีตัวเลือกให้หลาย option เหมือนกัน เช่น

• สมัครสมาชิกใหม่เลย
• Github account ***
• Google account

แต่เนื่องจากผมมี Github account เลยใช้ Github สำหรับสมัครสมาชิกเลย เพราะว่าสะดวกที่จัดการ account (เลือกได้ตามสะดวก)

ดาวด์โหลด ngrok

ก่อนที่จะใช้ได้ก็ต้อง download ngrok client มาก่อน ก็แล้วแต่ OS ทีใช้ ซึ่งก็รองรับหลาย OS เช่น Mac OS X, Linux, Windows หรือ FreeBSD ก็เลือก download ได้ตามสบาย

Unzip เพื่อติดตั้ง

ถ้าใช้ Linux หรือ OSX เราสามารถแตกไฟล์ ngrok ด้วย terminal ด้วยคำสั่งนี้ แต่ถ้าเป็น Windows ก็ double click เพื่อแตกไฟล์

$ unzip /path/to/ngrok.zip

เช่นบน OSX แตกไว้ที่ /opt/ngrok หรือ Windows แตกไว้ที่ c:/ngrok/ngrok.exe

Connect ไปที่ Account

Login ด้วย account ที่สร้างขึ้นในเว็บ ngrok.com เราจะเห็น authtoken ในเมนู Auth เพื่อเอามาใช้สำหรับ config authentication เข้าระบบด้วย terminal/cmd ในเครื่องของเรา

เปิด terminal/command prompt และ change directory ไปที่ที่เราแตกไฟล์ ngrok ไปไว้ และใช้คำสั่งเพื่อ config authtoken ดังนี้ จะได้ authtoken เก็บไว้ในไฟล์ ngrok.yml

$ ./ngrok authtoken c34bf3ba5da5baa88c9f5dbcd78f3dc43ccc2fadxa

รัน LINE Bot ในเครื่อง

หลังกจากที่สร้าง authtoken ไฟล์ในเครื่องเราแล้วก็รัน LINE Bot Application ในเครื่องของเรา ตัวอย่างเช่นถ้าเป็น Spring Boot ก็รันดัวยคำสั่ง (ใน terminal/cmd อื่น ไม่ใช่อันเดียวกับที่อยู่ใน directory ของ ngrok)

$ mvn spring-boot:run
.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.0.4.RELEASE)
....
[main] : Tomcat started on port(s): 8080 (http) with context path ''
[main] : Started Application in 3.423 seconds

จะสั่งเกตเห็น port ของ LINE Bot ที่รันอยู่ โดยปรกติจะเป็น port 8080

เปิดท่อ HTTP tunnel

หลังจากที่รัน LINE Bot แล้วก็จะเปิดท่อ HTTP ให้ข้างนอกสามารถเข้าถึง localhost ในเครื่องเราได้ หรือ start HTTP tunnel ด้วยคำสั่ง ใน terminal/cmd ใน directory ของ ngrok

$ ./ngrok http 8080

จะสั่งเห็นได้ว่ามี Forwarding URL ทั้ง http และ https ดังนี้ เราจะใช้ URL https ไปใช้ใน LINE Developer console

ngrok by @inconshreveable                                                                                                   
Session Status           online
Account                  Phayao Boonon (Plan: Free)
Version                  2.2.8
Region                   United States (us)
Web Interface            http://127.0.0.1:4040
Forwarding               http://8e6cb5da.ngrok.io -> localhost:8080
Forwarding               https://8e6cb5da.ngrok.io -> localhost:8080

ตั้งค่า Webhook URL ใน LINE

เราก็ใช้ URL https ที่ได้จากการ start ngrok มาตั้งค่า Webhook URL แล้วก็ทดสอบว่า URL นั้นทำงานได้ไหม ใน LINE Developer console

Webhook URL Requires SSL
https://3ce6169f.ngrok.io/callback

ถ้าทดสอบแล้ว Success ก็แสดงว่า ngrok กับ LINE Bot ของเราทำงานได้ดี เราก็สามารถใช้วิธีนี้ในการ Develop LINE Bot ได้ ก็จะง่ายกว่าที่เราจะ Deploy ไปที่ Server โดยตรง

โดยที่ URL นี้จะเปลี่ยนไปทุกครั้งที่เรามีการ start ngrok ใหม่ ดังนั้นเราจะต้องมาเปลี่ยน Webhook URL เสมอ แต่ก็ไม่บ่อยเท่าที่เรา deploy ทุกครั้งที่เราเปลี่ยนแปลงโค้ด ผมคิดว่ามันก็จะสะดวกกว่าทำให้เรา develope LINE Bot ได้เร็วกว่า

สรุป

จะเห็นได้ว่าใช้งาน ngrok นั้นง่ายมาก เหมาะสำหรับใช้ develop LINE Bot มากจริงๆ 🤪 และ ngrok ทำงานได้เยอะกว่าที่เขียนไว้นี้มาก สามารถอ่านเพิ่มเติมได้ใน docs ของ ngrok ครับ 👨🏻‍💻

ngrok - documentation