LINE Bot を Replit でEverything It's you してみた！

Replit がとても便利そうだったので試してみたくなり、ちょうどアドベントカレンダーの5日目が埋まっていなかったので試してみました。
ということで以下のアドベントカレンダー5日目の記事でもあります。

Replitって？

• オンライン統合開発環境
  • 開発環境を構築しなくともブラウザでプログラミングを行うことが可能
• 50以上の言語に対応
• サーバー起動可能

ということで、 LINE Bot のバックエンドを Replit を使って実装・デプロイしてみました。

Developers Console

LINE Bot (Messaging API) の準備は以下をご覧ください。

Replitの準備

https://replit.com/ よりアカウントを作成しログイン

Create押下

今回は Node.js を選択

Title を入力し、 Create Repl 押下

以下のような画面が開きます。
デフォルトで index.js, package.json, package-lock.json の3つのファイルが出来上がってます。

index.js

空っぽ

package.json

{
  "name": "nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^18.0.6",
    "node-fetch": "^3.2.6"
  }
}

package-lock.json

（略）

チュートリアルをベースにBotを実装

今回、 Replit でサーバーを起動するのでHeroku や Git は特に使いません。
チュートリアルをもとにやることはやることは2つだけです。

js の実装

index.js

const https = require("https");
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3000;
const TOKEN = process.env.LINE_ACCESS_TOKEN;

app.use(express.json());
app.use(
  express.urlencoded({
    extended: true,
  })
);

app.get("/", (req, res) => {
  res.sendStatus(200);
});

app.post("/webhook", function (req, res) {
  res.send("HTTP POST request sent to the webhook URL!");

  if (req.body && req.body.events[0].type === "message") {
    const dataString = JSON.stringify({
      replyToken: req.body.events[0].replyToken,
      messages: [
        {
          type: "text",
          // おうむ返し
          text: req.body.events[0].message.text,
        },
      ],
    });

    const headers = {
      "Content-Type": "application/json",
      Authorization: "Bearer " + TOKEN,
    };

    const webhookOptions = {
      hostname: "api.line.me",
      path: "/v2/bot/message/reply",
      method: "POST",
      headers: headers,
    };

    const request = https.request(webhookOptions);

    request.on("error", (err) => {
      console.error(err);
    });

    request.write(dataString);
    request.end();
  }
});

app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});

package.json に "start": "node index.js" を追加

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },

Replit にて実行！

Replit にある Shell にて express をインストールします。

package.json に express が追加されます。

package.json

  "dependencies": {
    "@types/node": "^18.0.6",
    "express": "^4.18.2",
    "node-fetch": "^3.2.6"
  }

環境変数は以下の Secrets にて設定できます。

LINE_ACCESS_TOKEN を設定します。

上部の Run ボタンを押すと ホストされた URL が生成されます。

発行されたURLを Developers Console の Webhook に設定すれば完了！

ボットをお友達登録して、メッセージ送信！無事に応答メッセージが返ってきました。

ということで

とても簡単に実装・デプロイできてしまいました。ちょっと試す分には十分ではないでしょうか！