LoginSignup
9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@watanabe-tsubasa(本名 恥ずかしい)inプロトアウトスタジオ

このスピードについてこれるか！？　echo-botをcloudflareにデプロイする #TS #bun #hono

Last updated at Posted at 2024-08-21

ハンズオンっぽい記事になります。
本記事ではおうむ返しをするLINE BotをCloudflareにcliでさささっとデプロイするところをやってみます。
テーマはスピード

  • Bunだからインストールが速い
  • cloudflareはDeployが速い
  • そして動作もメチャクチャ速い

というのがメリットです

Eicrns8UcAAOAfq.jpeg

一方でデメリットもあり

画像を送受信するLINE Botには向いていません

これはcloudflareの処理時間制限に引っかかる可能性があるためです。
気になる方は次の記事を参照ください。

0. 準備

0.1. cloudflareのアカウント登録

アクセスして適当に登録するだけです

0.2 Bunのインストール

トップページにあるLinux & macOSまたはWindoswのところに書いてあるコマンドを、ターミナルまたはPowerShellにコピペして実行しましょう

わかる方は、パッケージマネージャー使っていただいても大丈夫です

0.2.1. おすすめのパッケージマネージャー

OSに合わせて選んでください。私はPCに合わせて（個人用がMac、仕事用がWindowなので）両方利用していますが良い感じです。

Mac: proto

Windows: Scoop

0.3. VS Codeのインストール

オンラインエディタだとcloudflareのログインのところでCORSに引っかかって進まないのでローカルのエディタを利用することをお勧めします。

0.4. LINE Developersのアカウント登録と、プロバイダーの作成と設定

この記事の1.LINE公式アカウント作成を実施してください
途中で作成されるChannel Secret, Channel Access Tokenもメモしておいてください

1. ハンズオン

1.0. デスクトップに空のフォルダーを作成し、VS Codeで開いてターミナルを起動

初めてVS Codeを使う方向けの項です
普段VS Codeでの開発を実施されている方は、その手順で開始していただいて構いません

折りたたみを開いて参照する

1.0.1. 空のフォルダーを作成する

  • デスクトップにlinebotなどご自身がわかる名前でフォルダを作成してください

1.0.2. VS Codeを開いてフォルダーを開く

  • VS Codeを開いてください
  • 画像の通り、VS Codeでフォルダーを開いてください

Open Folderを選ぶ
img

作ったフォルダーを選ぶ
img

このようにVS Codeに作成したフォルダーの名前が表示されていれば成功です
img

1.0.3. VS Codeからターミナルを開く

  • この後cliで操作するのでターミナルを開きます
  • 下の画像のように進めてください

ターミナルのボタンからターミナルを開く
img

VS Codeの下部にターミナルが開いていれば成功です
img

1.1. CLIからBunでHonoのプロジェクトを開始してCloudflareにデプロイ

まずはcloudflareにベースとなるサーバーを立てていきます

1.1.1. Bunを使ってHonoのプロジェクトを準備

  • ターミナルに次のコマンドをコピペしてEnterを押してください
bun create hono
  • 色々と質問されるので、画像のように答えてください

img

  • 画像の通り
cd line-server

をターミナルにコピペしてEnter

  • package.jsonを確認

img

scriptsにdeployのコマンドがあることを確認

1.1.2. cloudflareへのDeploy

  • ターミナルに次のコマンドをコピペしてEnter
bun run deploy

初回はログインするためにアクセスするURLが表示されると思いますので、そのURLにアクセスして認証を行ってください。私は使ったことがあったので画像が撮れず、申し訳ありません🙇

  • 次の画像のようになっていれば成功です
  • 画像の位置にあるアドレスへアクセスしてみましょう

下線部のURLにアクセス
img

hello honoと出てくれば成功です
img

cloudflare workersのダッシュボードにもデプロイされていることが確認できます
img

1.2. Bot serverの起動

次にLINE Botのサーバーとして動かすための準備をしていきます

1.2.1. コードのコピペ

  • index.tsに次のコードをコピペしてください
import { 
  messagingApi,
  webhook,
} from '@line/bot-sdk'
import { Hono } from 'hono'
import HmacSHA256 from "crypto-js/hmac-sha256";
import Base64 from "crypto-js/enc-base64";

type Bindings = {
  CHANNEL_ACCESS_TOKEN: string,
  CHANNEL_SECRET: string,
}

const app = new Hono<{ Bindings: Bindings }>()

app.get('/', (c) => {
  return c.text('Hello hono & line!')
})

app.post('/webhook', async (c) => {
  const body = await c.req.text() // JSONではなくテキストで取得
  const channelAccessToken = c.env.CHANNEL_ACCESS_TOKEN || process.env.CHANNEL_ACCESS_TOKEN || ''
  const channelSecret = c.env.CHANNEL_SECRET || process.env.CHANNEL_SECRET || ''

  // シグネチャの取得
  const signature = c.req.header('x-line-signature')
  if (!signature) {
    return c.text('Missing signature', 400)
  }

  // HMACを使ってシグネチャを生成
  const hash = await generateHmac(channelSecret, body);

  // シグネチャの検証
  if (signature !== hash) {
    return c.text('Invalid signature', 403)
  }

  const events = JSON.parse(body).events
  const promises = events.map((event: webhook.Event) => handleEvent(event, channelAccessToken))
  await Promise.all(promises)

  return c.text('OK')
})

const handleEvent = async (
  event: webhook.Event,
  accessToken: string,
) => {
  if (event.type !== 'message' || event.message.type !== 'text') return;
  if (!event.replyToken) return;
  const { text } = event.message;
  fetch('https://api.line.me/v2/bot/chat/loading/start', {
    method: 'POST',
    headers: {
      "Authorization": `Bearer ${accessToken}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({"chatId": event.source?.userId})
  })

  const responseBody: messagingApi.ReplyMessageRequest = {
    replyToken: event.replyToken,
    messages: [
      {'type': 'text', 'text': text}
    ] 
  }
  
  return fetch('https://api.line.me/v2/bot/message/reply', {
    method: 'POST',
    headers: {
      "Authorization": `Bearer ${accessToken}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify(responseBody)
  })
}

export default app

const generateHmac = async (secret: string, message: string) => {
  const hmac = HmacSHA256(message, secret);
  return Base64.stringify(hmac);
}

現在のindex.ts。全て削除してコピペしてください
img

ライブラリをインストールするように促されます
img

1.2.2. ライブラリのインストール

  • ターミナルに次のコマンドを入力してください
bun add @line/bot-sdk crypto-js @types/crypto-js
  • 画像のような感じでインストールが進みます

img

赤線が消えれば成功です
img

1.2.3. 新しいコードでDeploy

  • もう一度次のコマンドをターミナルにコピペしてdeployします
bun run deploy

デプロイ成功したら先ほどと同じURLにアクセスしてみます

Hello hono & line!になっていればひとまず大丈夫です
img

1.3. 環境変数とwebhook URLの設定

最後に認証周りの設定を行います

1.3.1. cloudflareへの環境変数の設定

LINE Developersにあるチャネルシークレットとチャネルアクセストークンをcloudflareに設定していきます

  • まずはチャネルシークレットを設定します
  • 次のコマンドをターミナルに入力してEnterを押してください
bunx wrangler secret put CHANNEL_SECRET

セットする値を聞かれるのでチャネルシークレットをコピペしてください
img

成功するとセットされます
img

  • 同様の手順をチャネルアクセストークンに対して実施します
  • 次のコマンドをターミナルに入力してEnterを押してください
bunx wrangler secret put CHANNEL_ACCESS_TOKEN

セットする値を聞かれるのでチャネルアクセストークンをコピペしてください
img

成功するとセットされます。長いので注意してコピペしましょう
img

これでcloudflare側のセットは完了です

1.3.2. LINE Developersへのwebhook URLの設定

次はLINE Developers側の設定となります

  • これまで使ってきたURL（Hello hono & line!が表示されるURLです）をコピペして、末尾に/webhookを入力します
  • 更新ボタンを押したのち、検証を押して成功のダイアログが表示されれば成功です

Webhook設定の項目にあるwebhook URLに入力します
img

末尾に /webhook をつけることを忘れずに。入力したら更新ボタンを押します
img

検証を押して成功が出ればOKです
img

ここまでできればおうむ返しLINE Botが動作します。試しに実施してみましょう

2. 動かしてみる

は、速すぎる・・・
１日1万リクエスト、感謝のおうむ返しは、ローディングアニメーションを置き去りにしてしまった

3. 実行環境

基本的にBot SDKは型のチェックにしか利用していないので、そこまでバージョン差異に困ることはないかと思いますが、念の為Bunのバージョンとpackage.jsonをおいておきます

❯ bun --version                                
1.1.24
package.json
{
  "name": "line-server",
  "scripts": {
    "dev": "wrangler dev src/index.ts",
    "deploy": "wrangler deploy --minify src/index.ts"
  },
  "dependencies": {
    "@line/bot-sdk": "^9.2.2",
    "@types/crypto-js": "^4.2.2",
    "crypto-js": "^4.2.0",
    "hono": "^4.5.7"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240529.0",
    "wrangler": "^3.57.2"
  }
}

4. 最後に

あとは煮るなり焼くなりお好きにどうぞ。
特に、ノーコードツールのmakeを利用している場合など、直接LINEモジュールを使うとレスポンスが遅いですが、LINEの部分はcloudflareに任せて、makeにwebhookで繋いで処理を実行するようにすると、かなり軽快なLINE Botを作ることが可能です

9
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?