supabase Edge Functions で LINE Bot tutorial

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の軽いまとめ」です。