ngrok
./ngrok http 3000
1nKkZmOLzwnParDFLitxWfyUw1f_6Uc6dfews3A7Vy3Wf5Zzmkri
https://medium.com/linedevth/linebot-ngrok-b319841a49d7
ปกติแล้ว เวลาที่เราเขียน 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
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 ได้
3. ระบุ Webhook Url
ให้ย้อนกลับไปที่ LINE developer console ในหน้า Channel Settings ของเรา
ในหัวข้อ Messaging settings ให้ปรับดังนี้
Use webhooks : ให้เลือก enabled
Webhook URL : ให้ระบุเป็น https url ที่ได้จาก ngrok ตามด้วย /webhook
ดังตัวอย่างในรูป
ใครยังไม่มี ไปดาวน์โหลด ngrok ได้ที่ https://ngrok.com/download แล้วทำตามขั้นตอน 1–2–3 ในหน้า download นั้นเลย
จากนั้น เริ่มรัน ngrok เพื่อ expose port ที่ต้องการ เช่น ถ้าเราต้องการรัน Bot ของเราที่ port 3000 ใช้คำสั่ง ดังนี้
path/to/ngrok http 3000
จะได้หน้าตาแบบนี้
รูปภาพที่ 5.1 ดาวน์โหลดไฟล์ Ngrok บน Linux
รูปภาพที่ 4 การสมัครสมาชิก Ngrok
2. เมื่อสมัครสมาชิกเสร็จเรียบร้อยทำการ Login เข้ามาเพื่อดาวน์โหลด Ngrok โดยการเข้าไปที่ https://ngrok.com/download และทำการเลือก Linux (รูปภาพที่ 5.1 ดาวน์โหลดไฟล์ Ngrok บน Linux)
หรือใช้คำสั่ง (รูปภาพที่ 5.2 ดาวน์โหลดด้วยคำสั่ง Ngrok บน Linux)
wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
ขั้นตอนการติดตั้ง Ngrok บน Linux
1. ทำการสมัครสมาชิก Ngrok ที่ https://dashboard.ngrok.com/signup (รูปภาพที่ 4 การสมัครสมาชิก Ngrok)
เมื่อกำหนด webhook url เรียบร้อยแล้ว ก็ลองกด Verify ดู ถ้าขึ้นว่า Success แบบในรูป ก็แปลว่า บอทของเราพร้อมใช้งานแล้วครับ
อ้อ ngrok นี่เหมาะกับการใช้งานแค่ตอนทดสอบเท่านั้นนะครับ เพราะมันต้องรัน ngrok ไว้ตลอด ถ้าปิด ngrok ไป webhook ที่ส่งมาก็เข้าไม่ถึงเหมือนเดิมครับ
รูปภาพที่ 5.2 ดาวน์โหลดด้วยคำสั่ง Ngrok บน Linux
3. เมื่อทำการดาวน์โหลด Ngrok เรียบร้อยแล้วให้เข้าไปที่ Path ที่เรา Save ไฟล์ Ngork ไว้
ใช้คำสั่ง (รูปภาพที่ 6 ทำการ Unzipไฟล์ Ngrok)
unzip /path/ngrok.zip
รูปภาพที่ 6 ทำการ Unzipไฟล์ Ngrok
4. ทำการ Copy หรือ บันทึก Authtoken ไว้สำหรับยืนยันตัวตนโดยการเข้าไปที่ https://dashboard.ngrok.com/get-started (รูปภาพที่ 7.1 Authtoken Ngrok) จากนั้นนำ Authtoken มากรอกลง Terminal ของ Linux (รูปภาพที่ 7.2 การใช้ Authtoken Ngrok)
รูปภาพที่ 7.1 Authtoken Ngrok
รูปภาพที่ 7.2 การใช้ Authtoken Ngrok
5. เมื่อทำการใส่ค่า Authtoken Ngrok เรียบร้อยแล้วใช้คำสั่งเพื่อทำการสั่งเริ่มต้นรันโปรแกรม โดยที่เลขที่ต่อท้ายคำสั่งคือเลขของค่า Port นั่นเอง
ใช้คำสั่ง (รูปภาพที่ 8 เริ่มต้นโปรแกรม Ngrok บน Linux)
./ngrok http 80
ใช้คำสั่ง (รูปภาพที่ 8 เริ่มต้นโปรแกรม Ngrok บน Linux)
./ngrok http 8080
รูปภาพที่ 8 เริ่มต้นโปรแกรม Ngrok บน Linux
6. ทดสอบเข้าใช้งานโดยเข้าจาก URL ที่ปรากฏบน Terminal หรือเข้าดูได้จาก https://dashboard.ngrok.com/status (รูปภาพที่ 9 การเข้าใช้งาน Ngrok)
รูปภาพที่ 9 การเข้าใช้งาน Ngrok
ขั้นตอนการติดตั้ง Ngrok บน Windows
1. ทำการดาวน์โหลด Ngrok โดยการเข้าไปที่ https://ngrok.com/download และทำการเลือก Windows (รูปภาพที่ 10 ดาวน์โหลด Ngrok บน Windows)
รูปภาพที่ 10 ดาวน์โหลด Ngrok บน Windows
2. ทำการ Unzip ไฟล์และทำการเปิดโปรแกรมโดยการ คลิกขวา เลือก Run as administrator จะปรากฏหน้าต่าง Ngrok (รูปภาพที่ 11 การเปิดโปรแกรม Ngrok)
รูปภาพที่ 11 ดาวน์โหลด Ngrok บน Windows
3. ใช้คำสั่งเพื่อทำการสั่งเริ่มต้นรันโปรแกรม โดยที่เลขที่ต่อท้ายคำสั่งคือเลขของค่า Port นั่นเอง
ใช้คำสั่ง (รูปภาพที่ 12 เริ่มต้นโปรแกรม Ngrok บน Windows)
ngrok http 80
ใช้คำสั่ง (รูปภาพที่ 12 เริ่มต้นโปรแกรม Ngrok บน Windows)
ngrok http 8080
รูปภาพที่ 12 เริ่มต้นโปรแกรม Ngrok บน Windows
4. ทดสอบเข้าใช้งานโดยเข้าจาก URL ที่ปรากฏบน Terminal หรือเข้าดูได้จากhttps://dashboard.ngrok.com/status (รูปภาพที่ 13 การเข้าใช้งาน Ngrok)
รูปภาพที่ 13 การเข้าใช้งาน Ngrok
ขั้นตอนการ Monitor
1. ทำการเข้า http://127.0.0.1:4040 จะปรากฏหน้าต่างสำหรับ Monitor สามารถสตรวจสอบการเข้าใช้งานจากผู้ใช้คนอื่นๆได้ (รูปภาพที่ 14.1 All Request ของ Ngrok และรูปภาพที่ 14.2 Status ของ Ngrok)
รูปภาพที่ 14.1 All Request ของ Ngrok
รูปภาพที่ 14.2 Status ของ Ngrok