🎄
supabase Edge Functions で LINE Bot tutorial

2023/12/14に公開
LINE
Deno
Supabase
tech
Supabase Advent Calendar 2023 14日目。4のつく日はしげるの日。しげるです。

今年の 東京 Flutter ハッカソン に参加し、supabase を初めて利用し、とても使いやすい！と感銘を受けました。

今回の記事では、Edge Functions を利用し、 送信したメッセージを同じメッセージを返すBot（おうむ返し）を作成します。

2024/02/17(土)に福岡で、supabase x LINE Botのハンズオンを行う予定です。続きが気になる方はぜひご参加ください。

 Edge Functions についてsupabase の Edge Functions のページには次のように書かれています。
Edge Functions are server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties like Stripe. Edge Functions are developed using Deno, which offers a few benefits to you as a developer:
It is open source.

It is portable. Supabase Edge Functions run locally, and on any other Deno-compatible platform (including self-hosted infrastructure).

It is TypeScript first and supports WASM.

Edge Functions are globally distributed for low-latency.
OSS で、ローカルで実行でき、 Deno の機能が使えて、 WASM が実行でき、どこでも高速に実行できるようです。公式ページ にサンプルプロジェクトが多数公開されており、手軽に試すことができます。

 LINE Messaging API についてLINE Bot とよく呼ばれているものは、 LINE Messaging API として機能を提供されています。

LINE の Messaging API ページを見ると次のように書かれています。

 Messaging APIあなたのサービスとLINEユーザーの双方向コミュニケーションを可能にします。

 Messaging APIの特徴Messaging APIは、あなたのサービスとLINEユーザーの双方向コミュニケーションを可能にする機能です。
ユーザーからのメッセージに対して、Bot が返答したり、ユーザーに対して、メッセージを送信することが可能です。
LINE Bot を使う上でのガイドラインもまとめられております。Messaging API開発ガイドライン

公式のドキュメント が充実しており、非常に使いやすい API です。

 Let's Start Tutorial実際に、手を動かしながら始めてみましょう！

まず最初に、作業用のディレクトリを作成します。
 → HANDSON_APP_NAME=adventcalendar-2023-12-14-line-bot
 → echo $HANDSON_APP_NAME
adventcalendar-2023-12-14-line-bot
 → mkdir $HANDSON_APP_NAME
 → cd $HANDSON_APP_NAME
supabase のアプリの作成と Edge Functions を作成します。

supabase コマンドが入っていない人は、ここから installしてください。
 → supabase init
Generate VS Code workspace settings? [y/N] n
Finished supabase init.

 → supabase functions new $HANDSON_APP_NAME
Created new Function at supabase/functions/adventcalendar-2023-12-14-line-bot
以下のページから、アクセストークンを発行し、ターミナルで supabase にログインできるように設定をします。

https://supabase.com/dashboard/account/tokens
 → supabase login
You can generate an access token from https://supabase.com/dashboard/account/tokens
Enter your access token:
Finished supabase login.
supabase の dashboard の「New project」からプロジェクトを作成します。

 コードの変更supabase/functions/adventcalendar-2023-12-14-line-bot/index.ts にあるコードを変更します。

次のコードを貼り付けてください
supabase/functions/adventcalendar-2023-12-14-line-bot/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import * as line from "npm:@line/bot-sdk@9.4.0";

const lineBotClient = new line.messagingApi.MessagingApiClient({
  channelAccessToken: Deno.env.get("LINE_CHANNEL_ACCESS_TOKEN")
});

serve(async (req) => {
  const data = await req.json() // WebHookデータ
  for (const event of data.events) {
    console.log({event})

    const { message, replyToken } = event
    let replyMessages: any = [
      {
        type: 'text',
        text: message.text
      }
    ]

    console.dir(replyMessages, { depth: null })
    lineBotClient.replyMessage({
      replyToken: replyToken,
      messages: replyMessages
    }).catch((err) => {
      console.error(err)
    })
  }
  return new Response(
    JSON.stringify({status: 'ok'}),
    { headers: { "Content-Type": "application/json" } },
  )
})

 Edge Functions へのデプロイブラウザとローカルで作成したプロジェクトを紐づけます。
 → supabase functions deploy $HANDSON_APP_NAME --no-verify-jwt
Version 1.30.3 is already installed
Bundling adventcalendar-2023-12-14-line-bot
Deploying adventcalendar-2023-12-14-line-bot (script size: 21.02kB)
Deployed Function adventcalendar-2023-12-14-line-bot on project _PROJECT_ID_
You can inspect your deployment in the Dashboard: https://supabase.com/dashboard/project/_PROJECT_ID_/functions/adventcalendar-2023-12-14-line-bot/details
LINE Bot を登録してから、 デプロイした URL を LINE の webhook に登録します[1]

 LINE のセットアップ
 アカウントの作成LINE Official Account Manager から今回利用する アカウント を作成します。

作成をクリックし、次のように設定します。
アカウント名：チャネル名：hello supabase
メールアドレス：
会社・事業者の所在国・地域：日本
業種：個人 / 個人（IT・コンピュータ）
運用目的（複数選択可）：その他
主な使い方：上記以外の使い方
そして、「確認」 > 「完了」 > 「LINE Official Account Managerへ」 > 「同意」 > 「同意」の順番で設定します。

「設定」 >  「Messaging API」 > 「Messaging APIを利用する」 > プロバイダーを選択します。
LINE Developers から先ほどのプロバイダーを選択し、チャンネルのページに移動します。

チャンネル設定ページの「Messaging API設定」タブから「チャネルアクセストークン」の発行をします。
「Webhookの利用」を ON にし、supabase Edge Functions の deploy URL [1] をコピーして貼りつけます。

 自動応答メッセージの OFFチャンネル設定ページの「Messaging API設定」タブから「LINE公式アカウント機能」>「応答メッセージ」>「編集」をクリックし、LINE Official Account Manager の 応答メッセージ を OFF にします。

 環境変数の設定発行した「チャネルアクセストークン（長期）」をコピーし、supabase に環境変数の設定をします。supabase dashboard から先ほど作成したプロジェクトを選択します。
「⚙️」 > 「Edge Functions」 > 「Add new seacret」 から LINE_CHANNEL_ACCESS_TOKEN に LINE で発行した 「チャネルアクセストークン」を追加します。

 お試しチャンネル設定ページの「Messaging API設定」タブにある「ボットのベーシックID」「QRコード」のどちらかから LINE Bot を友達追加します。

LINE Bot にメッセージを送信すると、同じメッセージが返ってきます。


 ログを確認呼び出されたエンドポイントのログも簡単に確認できる
「⚙️」 > 「Edge Functions」 > 「adventcalendar-2023-12-14-line-bot」 > 「Logs」 から確認したいログを選択することで、確認できます。

 最後にsupabase の SQL 連携や、 LINE Messaging API など機能がたくさんあるので、ぜひ遊んでみてください。

続きが気になる方は、2024/02/17(土)に福岡で、supabase x LINE Botのハンズオンを行う予定なので、ご都合が合う方はぜひご参加ください。
明日の記事は、Tyler Shukertさんの「Supabase Launch Week Xの軽いまとめ」です。