🎄

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

実際に、手を動かしながら始めてみましょう！
まず最初に、作業用のディレクトリを作成します。

 → mkdir adventcalendar-2023-12-14-line-bot
 → cd adventcalendar-2023-12-14-line-bot

supabase のアプリの作成と Edge Functions を作成します。
supabase コマンドが入っていない人は、ここから installしてください。

 → supabase init
Generate VS Code workspace settings? [y/N] n
Finished supabase init.

 → supabase functions new adventcalendar-2023-12-14-line-bot
Created new Function at supabase/functions/adventcalendar-2023-12-14-line-bot

以下のページから、アクセストークンを発行し、ターミナルで supabase にログインできるように設定をします。

 → 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"

serve(async (req) => {
  const { name, events } = await req.json()
  console.log(events)
  if (events && events[0].type === "message") {
    // 文字列化したメッセージデータ
    let messages = [
      {
        "type": "text",
        "text": events[0].message.text
      }
    ]
    console.log({reply: messages})
    const dataString = JSON.stringify({
      replyToken: events[0].replyToken,
      messages: messages
    })

    // リクエストヘッダー
    const headers = {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + Deno.env.get('LINE_CHANNEL_ACCESS_TOKEN')
    }

    // https://developers.line.biz/ja/docs/messaging-api/nodejs-sample/#send-reply
    fetch('https://api.line.me/v2/bot/message/reply',
      {
        method: "POST",
        body: dataString,
        headers: headers,
      }
    ).then(r => {console.log(r)})
    .catch(e => { console.log(e) })
  }
  return new Response(
    JSON.stringify({status: 'ok'}),
    { headers: { "Content-Type": "application/json" } },
  )
})

Edge Functions へのデプロイ

ブラウザとローカルで作成したプロジェクトを紐づけます。

 → supabase projects list

    LINKED │  ORG ID  │      ID      │                NAME                │         REGION         │  CREATED AT (UTC)
  ─────────┼──────────┼──────────────┼────────────────────────────────────┼────────────────────────┼──────────────────────
           │ _ORG_ID_ │ _PROJECT_ID_ │ adventcalendar-2023-12-14-line-bot │ Northeast Asia (Tokyo) │ 2023-12-12 13:32:51


 → supabase link --project-ref _PROJECT_ID_
Enter your database password (or leave blank to skip):
Finished supabase link.

 → supabase functions deploy adventcalendar-2023-12-14-line-bot --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 Developers から今回利用するプロバイダーを指定します。
まだ、プロバイダーの設定をしたことない方は、こちらから確認ください。

新規チャンネルの作成から「Messaging API」を選択し、次のように設定します。

会社・事業者の所在国・地域：日本
チャネル名：hello supabase
チャネル説明：hello supabase
大業種：個人
小業種：個人（IT・コンピュータ）

そして、「作成」 > 「OK」 > 「同意する」の順番で設定します。

チャンネル設定ページの「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の軽いまとめ」です。