การใช้ ngrok เพื่อทดสอบ LINE Bot

Sitthi Thiammekha
Sep 8, 2018 · 2 min read

ปกติแล้ว เวลาที่เราเขียน Bot ในขั้นตอนการพัฒนา เราก็มักจะรัน Bot ใน localhost ก่อน ซึ่งมีปัญหาคือไม่สามารถรับ webhook ที่มาจาก LINE ได้ เนื่องจาก localhost url ไม่ได้เป็น public url ที่ LINE จะส่ง webhook เข้ามาได้

จำเป็นต้อง deploy ขึ้น server หรือ cloud ก่อน จึงจะสามารถทดสอบการทำงานกับ webhook ได้

วันนี้ผมขอเสนอเทคนิคที่ช่วยให้เราประหยัดเวลา ไม่ต้องคอย deploy งานทุกครั้งที่ต้องการทดสอบ function หรือ feature ใดๆ โดยการทำให้ LINE สามารถส่ง webhook ทะลุเข้ามาถึง localhost ของเราได้นั่นเอง

โดยเราจะใช้ tool ที่ชื่อว่า ngrok ซึ่งเป็นเครื่องมือที่ช่วย expose port ในเครื่องของเรา ให้สามารถออกสู่ public ได้

1. เริ่มจากการ start bot ตามปกติก่อน

ใครที่ยังไม่มี bot ผมมี starter project สำหรับเริ่มต้นทำ LINE Bot ง่ายๆ ไป clone มาดูกันได้เลยครับ

git clone https://github.com/kamnan43/line-bot-nodejs-starter
cd line-bot-nodejs-starter
npm install

ทำการแก้ไข config.json โดยระบุ

  • CHANNEL_ACCESS_TOKEN และ
  • CHANNEL_SECRET

ที่ได้มาจาก developer console

{
"port" : "3000",
"channelAccessToken": "YOUR_CHANNEL_ACCESS_TOKEN",
"channelSecret": "YOUR_CHANNEL_SECRET"
}

ทำการ start bot ด้วยคำสั่ง

npm start

ตอนนี้ bot ของคุณ ก็พร้อมทำงานแล้วที่ http://localhost:3000

2. เปิดใช้งาน ngrok

แต่อย่างที่บอกว่า บอทจะยังไม่สามารถเชื่อมต่อกับ LINE ได้ในตอนนี้
เนื่องจาก LINE ต้องการ public url และต้องเป็น https ด้วย

เราจะใช้ ngrok เพื่อ expose localhost ของเรา ออก public เพื่อให้สามารถเชื่อมต่อกับ LINE ได้

ใครยังไม่มี ไปดาวน์โหลด ngrok ได้ที่ https://ngrok.com/download แล้วทำตามขั้นตอน 1–2–3 ในหน้า download นั้นเลย

จากนั้น เริ่มรัน ngrok เพื่อ expose port ที่ต้องการ เช่น ถ้าเราต้องการรัน Bot ของเราที่ port 3000 ใช้คำสั่ง ดังนี้

path/to/ngrok http 3000

จะได้หน้าตาแบบนี้

3. ระบุ Webhook Url

ให้ย้อนกลับไปที่ LINE developer console ในหน้า Channel Settings ของเรา
ในหัวข้อ Messaging settings ให้ปรับดังนี้

Use webhooks : ให้เลือก enabled
Webhook URL : ให้ระบุเป็น https url ที่ได้จาก ngrok ตามด้วย /webhook
ดังตัวอย่างในรูป

เมื่อกำหนด webhook url เรียบร้อยแล้ว ก็ลองกด Verify ดู ถ้าขึ้นว่า Success แบบในรูป ก็แปลว่า บอทของเราพร้อมใช้งานแล้วครับ

อ้อ ngrok นี่เหมาะกับการใช้งานแค่ตอนทดสอบเท่านั้นนะครับ เพราะมันต้องรัน ngrok ไว้ตลอด ถ้าปิด ngrok ไป webhook ที่ส่งมาก็เข้าไม่ถึงเหมือนเดิมครับ

เชื่อว่าใครเอาเทคนิคไปใช้ ชีวิตจะดีขึ้นแน่นอนครับ หวังว่าคงช่วยให้เพื่อนๆสนุกกับการทำบอทมากขึ้นนะครับ :)

LINE Developers Thailand

Sitthi Thiammekha

Written by

LINE API Expert

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade