筆記:在heroku建立免費line bot

主要參考資料

使用Node.js在Heroku上架設Line機器人
https://medium.com/@wanwanyang/60ec3f6cac7f
Line官方文件
https://developers.line.biz/en/docs/messaging-api/building-sample-bot-with-heroku/

前置知識

git
node.js
ubuntu

1. 建立Line開發者帳號

從這裡進入，可以用個人用的一般Line帳號登入，登入Developers console時會請我們再填入名字跟E-mail就照著填。

Line的帳號分類，簡略來說就是

Reply和Push API對開發者不收費但有限制好友數目
免費版則只能用Reply API，也只能文字訊息
付費用Push API至少要到進階版(API) 收費3,888/月

【加值服務教學】升級方案、取消付款與確認購買狀態

http://at-blog.line.me/tw/archives/63198901.html#Q6

Line API差異

Reply API僅能回覆訊息，使用者一問機器人一答的情境，無法回多個訊息。
Push API就是Line bot可以主動發送訊息給加好友的使用者，或是分多次訊息發話。

2. 建立bot用的Channel並找出secret和token

依照Line官方步驟建立channel，從developers console中選擇"Create new provider"。

隨後channel類型選擇"Messaging API"，並輸出各種channel的資訊即可完成建立。底下兩個方塊記得打勾。

可參考:

https://developers.line.biz/en/docs/messaging-api/building-bot/

https://developers.line.biz/en/docs/messaging-api/building-sample-bot-with-heroku/

2.1 找出Channel Secret

在Channel中的Basic settings分頁最下面有channel secret。是由32個字的英數字組成，看起來就類似UUID只是沒有-分隔。

2.2 找出Channel Access Token

在Channel中的Messaging API分頁最下面有channel access token(如下圖)。是由100多個字的英數字含大小寫/+=所組成，看起來就是BASE64編碼後的資訊。

2.3 將Secret和Token加入.bashrc

於~/.bashrc中加入2.1和2.2節的資訊，方便之後本機測試。

export CHANNEL_SECRET=YOUR_CHANNEL_SECRET

export CHANNEL_ACCESS_TOKEN=YOUR_CHANNEL_ACCESS_TOKEN

3. 註冊Heroku帳號並建立新的APP

https://dashboard.heroku.com/apps
區域只有兩種，在沒有更多選擇前，選美國就對了

3.1. 安裝Heroku CLI工具

請參考官方安裝方法(如果你已經安裝可以忽略這段)

sudo apt-get update

sudo apt-get install git nodejs

sudo snap install --classic heroku

Heroku CLI安裝完成會看到以下訊息

2020-02-25T14:39:07+08:00 INFO Waiting for restart...

heroku v7.38.2 from Heroku✓ installed

3.2 使用CLI登入Heroku

$ heroku login

這裡會請你按確定，然後會開啟瀏覽器請你登入Heroku。

如果你不想或是無法使用gui，可以改用下面指令登入。

$ heroku login -i

3.3 建立Line bot用的git程式碼庫

建議用你的Heroku app名稱作為資料夾名稱{your-heroku-app-name}

$ mkdir {your-heroku-app-name}

$ cd {your-heroku-app-name}

$ git init

$ heroku git:remote -a {your-heroku-app-name}

3.4 拷貝Line官方範例程式碼

Line官方Node.js的SDK範例在https://github.com/line/line-bot-sdk-nodejs/

我們下載回來後將line-bot-sdk-nodejs/examples/echo-bot資料夾下的所有檔案拷貝到3.3建立的git資料夾。

$ cd ../

$ git clone https://github.com/line/line-bot-sdk-nodejs/

$ cd {your-heroku-app-name}

請將npm安裝到

$ npm install

npm WARN echo-bot@0.0.0 No repository field.

npm WARN echo-bot@0.0.0 No license field.

added 77 packages from 73 contributors and audited 165 packages in 2.04s

found 0 vulnerabilities

把所有檔案加入git中，並存檔

$ git add .

$ git commit -m 'First commit'

3.5 將Secret和Token加入Heroku App設定

前面2.3我們把Secret和Token加入bashrc是為了本機除錯。這裡加入app設定是為了線上運行正常。而你當然也可以把兩者都寫死在程式碼裏面。

在Heroku App的Settings分頁的"Add Config Vars"部份，加入key和value

key=CHANNEL_SECRET, value=YOUR_CHANNEL_SECRET

key=CHANNEL_ACCESS_TOKEN, value=YOUR_CHANNEL_ACCESS_TOKEN

另外建議加入key=TZ, vaule=Asia/Taipei，以便日後取得在App主機上的時區和我們相同。

我們也可以透過Heroku CLI工具，設定Heroku App的變數，如下範例。

$ heroku config:add CHANNEL_ACCESS_TOKEN="YOUR_CHANNEL_ACCESS_TOKEN"

$ heroku config:add CHANNEL_SECRET="YOUR_CHANNEL_SECRET"

$ heroku config:add TZ="Asia/Taipei"

確認是否都已經設置完成

$ heroku config

=== mirochiu-line-bot Config Vars

CHANNEL_ACCESS_TOKEN: YOUR_CHANNEL_ACCESS_TOKEN

CHANNEL_SECRET: YOUR_CHANNEL_SECRET

TZ:"Asia/Taipei"

3.6 Heroku本機除錯

可參考Heroku官方說明 https://devcenter.heroku.com/articles/heroku-local

$ heroku local

[WARN] ENOENT: no such file or directory, open 'Procfile'

[OKAY] package.json file found - trying 'npm start'

[WARN] ENOENT: no such file or directory, open 'Procfile'

[OKAY] package.json file found - trying 'npm start'

3:31:56 PM web.1 | > echo-bot@0.0.0 start .../mirochiu-line-bot

3:31:56 PM web.1 | > node .

3:31:56 PM web.1 | listening on 5000

然後用瀏覽器輸入"http://localhost:5000/callback"可以看到Cannot GET /callback的訊息，基本上就可以確定上傳到Heroku後你的line bot可以跑的起來。

3.7 將程式上傳到Heroku

$ git push heroku master

上傳到Heroku之後會進行自動進行建置並發佈。

用瀏覽器連線到Heroku App

https://{your-heroku-app-name}.herokuapp.com/callback

也會得到根本機測試相同的結果

4. 設定你的Line bot

4.1 設定bot並啟用Webhook

設定Webhook這裡就是指Line如果有訊息要通知的對象，只是你不能隨便給個對象，必須是有SSL/TLS憑證認証過的網站，而Heroku吻合這個要求。

只要在你的channel的Messaging API分頁中下方Webhook settings中改成你的Heroku app網址

https://{your-heroku-app-name}.herokuapp.com/callback

然後將下面Use webhook設為on。

4.2 設定Account features

隨後是同位置下方的LINE Official Account features，如下圖

4.2.1 關閉自動回覆訊息

請在Auto-reply messages部份設定關閉。

4.2.2 關閉自動歡迎訊息

如果你有自己的自動歡迎訊息，請在Greeting message部份設定關閉。因為這篇只用官方範例，所以不調整。

按下編輯之後會跳出下圖這頁

5. Heroku除錯

察看Heroku log，這個指令會一直掛在線上看log

$ heroku logs --tail

2020-02-25T07:52:52.543496+00:00 heroku[router]: at=info method=POST path="/callback" host=mirochiu-line-bot.herokuapp.com request_id=e28f3e08-7f8f-4805-85eb-e3fdb2c88278 fwd="203.104.156.74" dyno=web.1 connect=1ms service=194ms status=500 bytes=136 protocol=https

...

2020-02-25T07:52:52.541785+00:00 app[web.1]: statusCode: 401,

2020-02-25T07:52:52.541786+00:00 app[web.1]: statusMessage: 'Unauthorized',

2020-02-25T07:52:52.541786+00:00 app[web.1]: originalError: Error: Request failed with status code 401

...

如果你有多個app，完整的指令是

$ heroku logs --tail --app {your-heroku-app-name}

5.1 Webhook的Verify按鈕一直顯示錯誤

我自己是直接加一行在handleEvent的前面，針對按下verify按鈕回覆http 200的狀況

if ('00000000000000000000000000000000' === event.replyToken) {

console.log('got a verify token, don\'t replay');

return 200;

}

這是因為verify會傳replyToken為00000000000000000000000000000000，這對於Line是不合法的token所以會有錯誤。

5.2 Error:no channel access token錯誤

2020-02-25T07:34:42.950891+00:00 app[web.1]: > echo-bot@0.0.0 start /app

2020-02-25T07:34:42.950892+00:00 app[web.1]: > node .

2020-02-25T07:34:42.950892+00:00 app[web.1]:

...

2020-02-25T07:34:43.104215+00:00 app[web.1]: Error: no channel access token

....

請到3.5節確認Heroku App的Config Vars的Access Token是否已設定。

5.3 401 Unauthorized錯誤

Valid channel access token is not specified

請到3.5節確認Access Token是否設定正確，有時候太長複製的結果不正常。

另一種狀況是你是按Line的Webhook的Verify按鈕導致，請用5.1解法。

5.4 400 Bad Request錯誤

2020-02-25T08:34:36.463839+00:00 app[web.1]: statusCode: 400,

2020-02-25T08:34:36.463839+00:00 app[web.1]: statusMessage: 'Bad Request',

請到3.5節確認是否程式碼有用錯line SDK的function，或是給的參數不夠。

搜尋此網誌

Mirochiu's coding note