Serveoを使ってLINE botサンプルをローカル環境で試す

LINE botではWebhookでメッセージを処理する必要があるので、インターネット上にボットアプリを置く必要がありますが、Serveoを使ってローカル環境(localhost)を外部に公開して、お気軽にbotサンプルを動かせてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/1eb2a3ab-115d-1dcb-0333-153b743737c1.png)


大まかな流れはこんな感じです。
1. LINEボットチャネルの作成
2. ボットアプリをlocalhostに立てる
3. Serveoで外部に公開
4. LINEアプリでボットと会話する

#LINE Developersコンソールでボットチャネルを作成する

LINE Developersページであらかじめアカウントを作成しておく。（無料枠）
https://developers.line.biz/console/

最初にプロバイダーを作成する。
![スクリーンショット 2019-08-13 7.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/2a2ecbb2-e4ce-6cd5-6144-e1e2abc9157f.png)

次にMessaging API用のチャネルを作成する。
![スクリーンショット 2019-08-13 7.21.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/69c34350-4431-bbb6-f3d2-65d78f19f4d8.png)

必須項目を入力する。
![developers_line_biz_console_register_messaging-api_channel__provider_1608363987.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/7fefefa4-614c-14c5-4a10-60e3c543e3cc.png)

自動応答メッセージと友達追加時のあいさつをオフにする。
![スクリーンショット 2019-08-13 8.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/613dadff-5c74-d475-fc8c-2b6b7e6e30f9.png)

![スクリーンショット 2019-08-13 8.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/6d4970e9-6ea7-6e40-bda2-dd43ffea7175.png)

オフに設定後、画面上はすぐに反映されないときがあるが、表示上だけで実際にはすぐに反映されている。


#LINEボットアプリの準備

LINE Messaging API SDK for Node.jsをダウンロード

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


echo-botサンプルのディレクトリに移動

```bash
$ cd line-bot-sdk-nodejs/examples/echo-bot/
```

依存パッケージのインストール

```bash
$ npm install
```

環境変数に「Channel Secret」と「アクセストークン」を設定する。値はLINE Developersページで調べることができる。アクセストークンの初期値は空なので、LINE Developersページで作成する。

```bash
$ export CHANNEL_SECRET=YOUR_CHANNEL_SECRET
$ export CHANNEL_ACCESS_TOKEN=YOUR_CHANNEL_ACCESS_TOKEN
```

アプリを起動する。デフォルトはポート3000でリッスン待ちになる。ポート番号を変更する場合は、環境変数「PORT」で指定する。

```bash
$ node .
listening on 3000
```

###Serveoを使ってローカル環境をインターネットに公開する
Serveoはインストールや事前設定なしで、いきなり使えるので便利。

```bash
$ ssh -R 80:localhost:3000 serveo.net
Forwarding HTTP traffic from https://xxxxxxx.serveo.net
Press g to start a GUI session and ctrl-c to quit.
```

Serveoで表示されたURLをLINE Developersページ「Webhook URL」を設定する。設定するURLは、公開URL + /callbackになるので、末尾に /callback をつけるのを忘れずに。
![スクリーンショット_2019-08-13_8_14_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/9463ce52-4157-57ef-da48-b66b38f491b4.png)

###接続確認
接続確認ボタンでテスト用のリクエストを送信してみる。なぜかエラーになる。

![スクリーンショット_2019-08-13_7_38_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/9d48e0a0-8175-c8bd-1489-e012468d79c4.png)


Serveoにはリクエストが届いているが、ステータスコードが期待しているのと違うみたい。

```bash
$ ssh -R 80:localhost:3000 serveo.net
Forwarding HTTP traffic from https://xxxxxxx.serveo.net
Press g to start a GUI session and ctrl-c to quit.
HTTP request from xxx.xxx.xxx.xxx to https://xxxxxxx.serveo.net/callback
```

###コードを修正する
接続確認のリクエストではreplyTokenがオール0になっているため、これでレスポンスを返そうとすると、LINE SDKがはじいているようだ。暫定対処として、replyTokenがオール0の場合は無視するようにコードを修正する。

```JavaScript:index.js
// event handler
function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    // ignore non-text-message event
    return Promise.resolve(null);
  }

  // 追加：Webhookの接続確認リクエスト対策
  if (event.replyToken === '00000000000000000000000000000000') {
    return Promise.resolve(null);
  }

  // create a echoing text message
  const echo = { type: 'text', text: event.message.text };

  // use reply API
  return client.replyMessage(event.replyToken, echo);
}
```

もう一度、接続確認してみる。今度はうまくいった。
![スクリーンショット_2019-08-13_8_15_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/0299f498-cdd9-cd70-8d00-bb7b007ff1c5.png)

#LINEアプリでBotをお友達に登録
LINEアプリでLINE DevelopersページのBot情報にあるQRコードを読み取る。

##動作確認
LINEアプリでBotにメッセージを送ってみる。おうむ返しされればOK。
![IMG_3316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77444/9ab7231f-8f0a-8553-fa0e-e302c56bd306.png)

#さいごに
気楽にローカル環境でデバッグできるのはやはり便利ですね。
次回は、LINE botのWebhookイベントをAWS Lambdaを使って試してみます。

- [LINE Botの通知イベントをAWS Lambdaで受け取る](https://qiita.com/yuppejp/items/fac63d043ee59e278427)

#参考
- [Serveo](https://serveo.net/)
- [LINE Developers](https://developers.line.biz/ja/services/messaging-api/)
- [LINE Messaging API SDK](https://developers.line.biz/ja/docs/messaging-api/line-bot-sdk/)