Zenn
🤖

NodeJS と LINE Bot のローカル開発環境 | NodeJS + LINE Messaging API

2024/09/17に公開
Node.js
VS Code
LINE Bot
LINE Messaging API
tech

概要

ローカル PC の NodeJS で LINE Bot の開発ができるようにする環境構築をしたメモ

前提

  • Node -v: v20.12.2
  • Windows 11
  • VSCode をサーバ起動に使う
  • LINE Cannel は作成済み
  • LINE Messaging API 公式 SDK は使わず、linebot を使う

構築

依存関係のインストール

開発ディレクトリにて npm 初期化

npm init -y

linebot モジュールのインストール

npm i linebot # ^1.6.1

localtunnel モジュールのインストール
ローカルでも開発用に Webhook などが受信できる

npm i localtunnel -D # ^2.0.2

起動コマンドなどの設定

npm scripts 設定

以下のように expose を package.json の scripts に登録
any-domain は任意のドメインに変更. 誰にも使われていなければ利用できる
これで、localhost:3000 が https://any-domain.loca.lt として公開できる

package.json
"scripts": {
    "expose": "lt --port 3000 --subdomain any-domain --print-requests",
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},

VSCode Tasks 設定

プロジェクトのルートディレクトリに .vscode というディレクトリを作成し、その中に tasks.json を作成. 内容は以下
これにより、npm: start and expose という Task を起動すれば、サーバ起動とその公開がまとめて実行できる

tasks.json の内容
tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "npm: start",
            "type": "shell",
            "command": "npm start",
            "group": "none",
            "presentation": {
                "reveal": "always",
                "panel": "new"
            }
        },
        {
            "label": "npm: expose",
            "type": "shell",
            "command": "npm run expose",
            "group": "none",
            "presentation": {
                "reveal": "always",
                "panel": "new"
            }
        },
        {
            "label": "npm: start and expose",
            "type": "shell",
            "dependsOn": [
                "npm: expose",
                "npm: start"
            ],
            "runOptions": {
                "runOn": "folderOpen"
            }
        }
    ]
}

VSCode キーボードショートカットの設定

  1. VSCode 上で Ctrl + Shift + P を入力し、出現した入力画面に Open Keyboard Shortcuts と入力. Preferences: Open Keyboard Shortcuts (JSON) を選択する
  2. 表示された keybindings.json に以下の内容を書き込む
    keybindings.json
     [
     {
       "key": "Ctrl+Q",
       "command": "workbench.action.tasks.runTask",
       "args": "npm: start and expose",
     }
 ]
  3. keybindings.json を保存する

テンプレート作成と起動

  1. プロジェクトルートに index.js を作成し、以下の内容を入力
    CHANNEL_ID, CHANNEL_SECRET, CHANNEL_ACCESS_TOKEN は環境変数などを使って適宜変更する

    index.js
    // https://github.com/boybundit/linebot のテンプレート
const linebot = require('linebot');

const bot = linebot({
    channelId: CHANNEL_ID,
    channelSecret: CHANNEL_SECRET,
    channelAccessToken: CHANNEL_ACCESS_TOKEN
});

bot.on('message', function (event) {
    event.reply(event.message.text).then(function (data) {
        // success
    }).catch(function (error) {
        // error
    });
});

bot.listen('/linewebhook', 3000);

  2. VSCode 上で Ctrl + Q を押す
    npm start と npm expose が起動する
    your url is: https://any-domain.loca.lt のように URL が払い出される.

  3. LINE Developpers で Webhook URL に先の URL とパスを登録する
    例えば、https://any-domain.loca.lt が払い出されたとき、https://any-domain.loca.lt/linewebhook を Webhook URL に登録

  4. 完了

参考

https://github.com/boybundit/linebot
https://github.com/localtunnel/localtunnel
https://developers.line.biz/ja/reference/messaging-api/

Discussion