Edge Functionsに入門してみた
🪛Edge Functionsとは？
グローバルに分散された TypeScript 関数。
エッジ関数はサーバー側の TypeScript 関数であり、ユーザーに近いエッジでグローバルに分散されます。 これらは、Webhook をリッスンしたり、Supabase プロジェクトを Stripe などのサードパーティと統合したりするために使用できます。 Edge Functions は Deno を使用して開発されており、開発者には次のような利点があります。
オープンソースです。
持ち運び可能です。 Supabase Edge Functions は、ローカルで、および他の Deno 互換プラットフォーム (セルフホスト型インフラストラクチャを含む) 上で実行されます。
TypeScript が最初であり、WASM をサポートしています。
エッジ機能は低遅延のためにグローバルに分散されています。
⚠️この記事の対象者
- Supabaseを使ったことがある人
- RLSの設定を知ってる人
- エラーでても解決できる人
- Supabase CLI使うには、Docker必要なのでインストールしておく
Supabase CLIなるものを使うのですが、動画と同じように私は、設定されなくて、自動でやってくれたりする場面がありました。コマンド打つと、プロジェクトを選択する選択肢が出てきて自分の作ったプロジェクトを選ぶと、接続して設定してくれるみたいです。
自動でやってくれるのはありがたいですね。
公式チュートリアルの動画を参考にやってみる。
Supabase CLIが必要なのでインストールしましょう。
動画だとこのコマンドか
brew upgrade supabase
ここからは、動画を参考にコンソールを設定していきます。
my_tableを作成して、RLSの設定をOFFにしておきましょう。セキュリティゆるゆるですね笑
練習だからいいか。
Supabase CLIを今回使うんですけど、起動したりデプロイするのに、Dockerが必要ぽい？
なので、Docker Desktopをインストールしましよう。僕は、OrbStackという動作が軽いツールを使ってますね。
🔧エッジ機能をローカルで開発する
ローカル マシンで Edge Functions を開始してください。
ローカル マシン上に基本的な Edge 関数を作成し、Supabase CLI を使用して呼び出してみましょう。
ローカル マシン上のフォルダーに新しい Supabase プロジェクトを作成します。
mkdir hello-world
プロジェクトを初期化する#
supabase init
エッジ関数の作成#
プロジェクト内に hello-world という新しい Edge 関数を作成しましょう。
supabase functions new hello-world
DBのデータを取得する関数を作成
my_tableからデータを取得する関数を作成。一度だけデータを取得します。慣れないうちはこんな簡単な機能も失敗しましたね。認証ができないよってエラーで何度も怒られました💦
import { createClient } from "npm:@supabase/supabase-js@2.39.3"
console.log("Hello from Functions!")
const supabase = createClient(
Deno.env.get('SUPABASE_URL') ?? '',
Deno.env.get('SUPABASE_ANON_KEY') ?? '',
);
Deno.serve(async (req) => {
const {data: name, error} = await supabase.from("my_table").select("name")
.limit(1).single()
if(error) console.log(error)
const data = {
message: `Hello ${name?.name}!`,
}
return new Response(
JSON.stringify(data),
{ headers: { "Content-Type": "application/json" } },
)
})
API KEYを設定する
supabase secrets set STRIPE_SECRET_KEY=apikey
API KEYが設定されているか確認するコマンド
supabase secrets list
エッジ機能をローカルで実行する#
supabase 関数を使用して、Edge 関数をローカルで実行できます。
supabase start # start the supabase stack
supabase functions serve # start the Functions watcher
関数をデプロイするときには、このコマンドを使います。関数が作成されると、情報が見れるのですが、JWTのtoggle buttonをOFFにしておかないと、my_tableにアクセスすることができませんので注意してください。私は、４０１のエラーで苦しみました笑
deployコマンド
supabase functions deploy hello-world --project-ref jbuiuoftvrjmtkhdxtbf
401 errorが出ていると、URLにアクセスしてもDBから取得したデータが表示されない！
動画と同じように、JWT OFFにすればできる。
最後に
今回は、以前から気になっていたEdge Functionsというサービスを使ってみました。これを使うと、通知機能をつけたり、メール飛ばしたり、決済機能をつけることができるようです。ご興味ある方は、やってみてください。公式のチュートリアル動画とGithubのサンプルコードがあるようです。
もし複数のデータを取得したいときは、クエリを変更すればできた💡
データをテーブルに追加
index.tsを修正
import { createClient } from "npm:@supabase/supabase-js@2.39.3"
console.log("Hello from Functions!")
const supabase = createClient(
Deno.env.get('SUPABASE_URL') ?? '',
Deno.env.get('SUPABASE_ANON_KEY') ?? '',
);
Deno.serve(async (req) => {
const {data, error} = await supabase.from("my_table").select("name")
.limit(3)
if(error) console.log(error)
const response = {
data,
}
console.log(response)
return new Response(
JSON.stringify(data),
{ headers: { "Content-Type": "application/json" } },
)
})
Discussion