LINE botをVS Codeで開発してAzure Functionsへデプロイするメモ (Node.js版)(※動作確認でcloudflaredを使用する手順を追加)

はじめに

LINE botをmacOS上のVS Codeで開発してAzure Functionsへデプロイする手順です。
Azure FunctionsでNode.js版LINE botを動かします。

手順(準備)

1. VS Codeをインストールする

執筆時点のバージョンは1.53でした。
https://code.visualstudio.com/

2. VS CodeにAzure Functions拡張機能を追加する

3. Node.jsをインストールする

執筆時点のバージョンは14.15.4 LTSでした。
https://nodejs.org/

4. ローカル環境でLINE Botを動作確認するための準備

ngrokを使用する方法とcloudflaredを使用する方法があります。

4-1. ngrokをインストールする

ダウンロードしてzipを解凍する。
https://ngrok.com/download

サインアップ(または、ログイン)して、authtokenの値を確認する。

コマンドを実行してauthtokenを登録する。

$ ./ngrok authtoken <authtokenの値>

4-2. cloudflaredをインストールする

サインアップの必要はありません。

$ brew install cloudflare/cloudflare/cloudflared

5. LINE Developers Consoleでアカウントを作成する

新規チャンネル(Messaging API)を作成します。
https://developers.line.biz/console/

手順(LINE botの作成)

1. VS CodeのAzure Functionsで新規プロジェクトを作成する

フォルダを選択する

言語(JavaScript)を選択する

テンプレート(HTTP trigger)を選択する

functionに名前(HTTP trigger1)をつける (そのまま改行でOK)

Authorization level(Function)を選択する

プロジェクトを開く (Open in current windowを選択する)

2. サンプルコードを実行する

サンプルコードをStart Debugging[F5]で実行する。

TERMINAL画面に表示されるURLをクリックしてブラウザで表示確認する。

ブラウザのURLの最後にパラメータ(?name=test)を追加して、表示が変わることを確認する。

3. チャンネルアクセストークンを設定する

LINE Developers ConsoleのMessaging API設定からチャンネルアクセストークンの値をコピーする。

ローカル実行用の環境変数を設定する。(local.settings.jsonに環境変数を追加)
"ACCESS_TOKEN": "<チャンネルアクセストークンの値>",

4. index.jsの内容をLINE botに変更する。

ソースコードはこちらです。
https://raw.githubusercontent.com/kitazaki/azure_functions_nodejs_line_bot/main/index.js

index.js

const line = require('@line/bot-sdk');

const client = new line.Client({
    channelAccessToken: process.env.ACCESS_TOKEN

});

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');
    console.log(req);

    if (req.query.message || (req.body && req.body.events)) {
        if (req.body && req.body.events[0]) {
            message = {
                type: "text",
                text: req.body.events[0].message.text
            }
            console.log(message);
            if (req.body.events[0].replyToken) {
                client.replyMessage(req.body.events[0].replyToken, message);
            }
        }
        else {
            context.res = {
                status: 200,
                body: req.query.message
            };
        }
    }
    else {
        context.res = {
            status: 200,
            body: "Please check the query string in the request body"
        };
    };
};

5. LINE botを実行する

TERMINALからline bot sdkをインストールする。

$ npm i @line/bot-sdk

Start Debugging[F5]で実行する。

(参考)脆弱性の対応

執筆時点でline bot sdkに脆弱性が1件含まれていました。
脆弱性を解消するためにはLINE botを停止して、手動で対応する必要があります。

$ npm audit

bot-sdkに含まれるaxiosのバージョンが低いため、手動で更新します。

$ cd node_modules/\@line/bot-sdk
$ vi package.json

package.json

(変更前)
"axios": "^0.20.0",
(変更後)
"axios": "^0.21.1",

$ npm i
$ npm audit fix
$ cd ../../..
$ npm i

脆弱性が0件になったことを確認します。

$ npm audit
found 0 vulnerabilities

6. ngrokまたはcloudflaredを実行する

6-1. ngrokを実行する

ターミナルを開いてngrokを実行します。

$ ./ngrok http 7071

6-2. cloudflaredを実行する

ターミナルを開いてcloudflaredを実行します。

$ cloudflared tunnel --url localhost:7071

7. LINE developers consoleでWebhookの設定をする

LINE developers consoleのMessaging API設定からWebhookの設定をします。
URLはngrokまたはcloudflaredを実行する毎に変わります。

ngrokの例.

https://c174833025ae.ngrok.io/api/HttpTrigger1

cloudflaredの例.

https://dh-lost-prefer-por.trycloudflare.com/api/HttpTrigger1

「検証」ボタンを押して成功(OK)が表示されれば問題ありません。
ngrokを実行したターミナルとVS CodeのTERMINAL画面にログが表示されます。

cloudflaredの場合、VS CodeのTERMINAL画面にのみログが表示されます。

手順(Azure Functionsへデプロイ)

1. Azureへログインする

2. Azure Functionsへデプロイする

デプロイアイコン(上向きの矢印)を押して、「＋Create new Function App in Azure...」を選択します。

アプリ名を入力します。(以降はline-bot02を例に説明します。)

Node.jsのバージョンを選択します。(ここではNode.js 14 LTSを選択します。)

デプロイ先を選択します。(ここではJapan Eastを選択します。)

デプロイが完了するまで少し時間がかかります。

3. チャンネルアクセストークンを設定する

Application Settingsで「Add New Settings...」を選択してチャンネルアクセストークンを設定します。

キーの名前(ACCESS_TOKEN)を入力します。

キーの値(LINE developers consoleのチャンネルアクセストークンの値)を入力します。

4. Webhook URLを確認する

FunctionsのHttpTrigger1から「Copy Function Url」を選択します。

LINE developers consoleのMessaging API設定からWebhookの設定をします。

5. ログを確認する

Logsの「Connect to Log Stream...」を選択します。