Azure Web AppsとNode.jsで作る電車運行状況通知──LINE Bot(4) / LINE Botをデプロイする

WSやAzureを始めたとしたクラウドサービス全般を触っていく連載「クラウドサービス研究スタジオ」。この連載では、IaaS,PaaS,BaaS,SaaSなど幅広い形態のサービスを実際に使ってレポートしていきます!

今回作るもの

こんにちは、dotstudio株式会社のびすけです。

今回はAzure Web Appsを使って電車運行状況を知らせてくれるLINE Botを作ってみます。

先に完成イメージのLINE Botを紹介します。

このような感じで登録した電車の遅延情報があればLINE Botが教えてくれます。

BotプログラムはNode.jsで作成し、Azure Web Appsにホスティングして運用します。

の四部構成で紹介します。

最終回の今回は、前回LINE上で試したプログラムをAzure Web Appsにデプロイしていよいよ実稼働できるところまでやってみます。

8,568通り、あなたはどのタイプ?

Azure Web Appsへのデプロイの流れ

「Web Apps」はAzureが提供するPaaSです。詳細や基本的な手順は第一回の「Azure Web Appsの設定」を参照してください。

今回はLinux版(App Service on Linux)に、GitHubリポジトリを使ってデプロイしてみます。

8,568通り、あなたはどのタイプ?

GitHubにリポジトリを作成する

まずはGitHubにリポジトリを作成しておきましょう。

「New Repository」を選択します。

任意のリポジトリ名を記入し、「Create Repository」で作成します。

表示されるSSHのアドレスをコピーしておきます。

続いてAzure Web Apps側の作業に移ります。

デプロイするリポジトリを変更する

第一回の「Azure Web Appsの設定」で作ったアプリケーションの設定を変更していきましょう。

デプロイするリポジトリを「node.js_hello_world」から変更します。

「デプロイオプション」で「切断」を選択し、ソース管理を切断します。

切断したら、再度先ほど作成した「linebot-sample」を設定しましょう。

Azure Web Appsに環境変数を作成

「設定>アプリケーション設定>アプリ設定」を選択し環境変数を作成します。キーには任意の変数名、値にはそれぞれのTokenやSecret Keyを貼り付けましょう。

プログラムを追加・修正する

デプロイする前に、プログラムをいくつか追加・修正します。

まずは先ほどスタートアップファイルに指定したprocess.jsonファイルを作成しましょう。

process.json
{
   "name"        : "worker",
   "script"      : "./server.js",
   "instances"   : 1,
   "merge_logs"  : true,
   "log_date_format" : "YYYY-MM-DD HH:mm Z",
   "watch": ["./server.js"],
   "watch_options": {
     "followSymlinks": true,
     "usePolling"   : true,
     "interval"    : 5
   }
}

package.jsonファイルは必要なモジュールとNode.jsのバージョンが正しく指定されているか確認しましょう。

package.json
{
  "name": "linebot-sample",
  "version": "1.0.0",
  "description": "",
  "main": "./server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "twitter": "^1.7.0"
  },
  "engines":{
    "node": "6.6.0"
  }
}

Node.jsのバージョンはAzure Web Apps上で選択したv6.6.0を指定しました。

現時点のNode.jsの最新バージョンはv8.1.2ですが、Azure App Service on LinuxがNode.jsの最新版にまだ対応していないため、v6.6.0を指定しています。

.gitignoreは以下のように指定します。

node_modules/
.DS_Store

server.jsファイルは環境変数から各パラメータを呼ぶよう変更しましょう。ポート指定部分も必要に応じて値を変えるよう修正します。

server.js
'use strict';

const http = require('http');
const https = require('https');
const crypto = require('crypto');
const Twitter = require('twitter');
const tw = new Twitter({
// 4つのキーの指定
  consumer_key: process.env.CONSUMER_KEY, // Consumer Key
  consumer_secret: process.env.CONSUMER_SECRET, // Consumer Secret
  access_token_key: process.env.ACCESS_TOKEN_KEY, // Access Token
  access_token_secret: process.env.ACCESS_TOKEN_SECRET // Access Token Secret
});
const TARGET_HASHTAG = '#TrainDelay';

const HOST = 'api.line.me';
const CH_SECRET = process.env.LINE_CH_SECRET; // Channel Secret
const CH_ACCESS_TOKEN = process.env.LINE_CH_ACCESS_TOKEN; // Channel Access Token
const USER_ID = process.env.LINE_USER_ID;// Your userId
const PUSH_PATH = '/v2/bot/message/multicast';
const SIGNATURE = crypto.createHmac('sha256', CH_SECRET);
const PORT = process.env.PORT || 3000; // ||で条件分岐

const pushClient = (userId, SendMessageObject) => {
    let postDataStr = JSON.stringify({ to: userId, messages: SendMessageObject });
    let options = {
        host: HOST,
        port: 443,
        path: PUSH_PATH,
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=UTF-8',
            'X-Line-Signature': SIGNATURE,
            'Authorization': `Bearer ${CH_ACCESS_TOKEN}`,
            'Content-Length': Buffer.byteLength(postDataStr)
        }
    };

    return new Promise((resolve, reject) => {
        let req = https.request(options, (res) => {
                    let body = '';
                    res.setEncoding('utf8');
                    res.on('data', (chunk) => {
                        body += chunk;
                    });
                    res.on('end', () => {
                        resolve(body);
                    });
        });

        req.on('error', (e) => {
            reject(e);
        });
        req.write(postDataStr);
        req.end();
    });
};

tw.stream('statuses/filter', {'track': TARGET_HASHTAG}, (stream) => {
  stream.on('data', (data) => {
    if (data.text.indexOf('上野東京ライン') !== -1) {
        let PushSendMessageObject = [{
          type: 'text',
          text: data.text
        }];

        pushClient([USER_ID], PushSendMessageObject)
          .then((body) => {
            console.log(body);
          }, (e) => {console.log(e)});

        console.log(data.text);
    }
  });
});

process.env.変数名で環境変数を取得します。

以上を、先ほど作成したGitHubのリポジトリにプッシュしておきます。

コールバックURLを変更

LINE developersの画面下部の 「EDIT」を選択します。

Webhook URLにAzureにhttps://アプリ名.azurewebsites.net/を記入しましょう。VERIFYを押して、Successと表示されれば問題なく動作しています。

これでpush通知を受け取る準備は完了です。

確認してみる

指定した遅延情報のつぶやきがあると、こんな感じでLINE通知が来るようになります。

ちなみに、今回利用したPushAPIはプランがDeveloper Trialの場合は無料で利用できますが、Developer TrialではBotの友達数が50人までと制限されています。

個人や少人数グループでの利用で試す際には十分ですが、実運用をする際には注意しましょう。

現時点では実運用で試す際にはプロプランの利用が必須になるようです。プランなどは時期によって変動する可能性もありますので、Messaging APIのページを確認して下さい。

まとめ

いかがだったでしょうか。

「リアルタイムでツイートを取得してpush通知するLINE Botを作る」というと難しそうに思えますが、Twitter連携やBot設定、ホスティングがブラウザから操作できるので意外と簡単に試せたのではないかと思います。

Azure Web AppsのようなPaaSを使うと自前でサーバを用意して細かなセキュリティ対策やSSL(https)対応をする手間が省けるので「公開する」という敷居がぐっと下がりますね。

引き続き様々な形態に適した便利なクラウドサービスを紹介していきたいと思います。

それでは!

のびすけ

dotstudio株式会社 代表取締役CEO。1989年生まれ。岩手県立大学在籍時にITベンチャー企業の役員を務める。同大学院を卒業後、株式会社LIGにWebエンジニアとして入社し、Web制作に携わる。 2016年7月よりdotstudio株式会社を立ち上げ、IoT領域を中心に活動している。日本最大規模のIoTコミュニティであるIoTLTや、JavaScript RoboticsコミュニティNodeBotsの主催、IoTバックエンドサービスであるMilkcocoaのエバンジェリストとしても活動中。
Twitter: @n0bisuke
dotstudio, inc.: https://dotstud.io/

※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。

PC_goodpoint_banner2

Pagetop