こんにちは！株式会社GIGのサービス開発事業部でアプリケーションエンジニアとして働くちいかた（片田）です！

ついに先日、Supabaseがβ版から正式版になりましたね！めでたい！

公式リリースはこちら

Supabase大好きエンジニアの私はβ版だったことをほぼ忘れて使い込んでいたのですが、ともあれ嬉しいニュースです！（余談ですが、最近ついにFreeプランからProプランに切り替えました！円安辛い……！）

これからもっと使われていくサービスになる、と期待が膨らむ今日この頃。このSupabaseのビッグウェーブに乗って、今回はSupabase Edge Functionsを使ってサーバーレスなアプリケーションを構築する方法を解説します。

Supabaseとは

Supabaseは、オープンソースのデータベースである PostgreSQL をベースにした、Backend as a Service （BaaS） プラットフォームです。データベース、認証、ストレージ、Functionsなど、ほぼすべてのバックエンド機能を提供しています。

β版リリース後、Supabase Authに匿名ユーザー機能が追加されたり、データベースをブランチ管理することで本番環境とテスト環境を切り替える機能ができたりと、常に進化し続けてきました。

そして上述した通り、先日正式版の提供が開始されました。これからの進化にも期待が集まっています。

私はβ版リリース直後からSupabaseを活用してきました。以下の記事では、Supabase Authを使って簡単に認証機能を実装する方法も解説しているので、興味があれば読んでみてください。

関連記事：Supabase Authを使って爆速で安全なアプリケーションを開発する方法

Supabase以外のBaaSだと、Firebaseが有名でしょう。過去記事では、SupabaseとFirebaseの比較を行っているので、こちらもぜひお読みください。

関連記事：Supabase + Next.jsで認証機能付きWebアプリケーションを作る方法

Supabase Edge Functionsとは

Supabase Edge Functionsは、TypeScriptで書かれたサーバーサイド関数です。

Supabase Edge Functionsの公式ドキュメント

Edge Functionsは世界中のエッジに分散配備され、リクエスト元からもっとも近いロケーションで実行されます。

低遅延で実行できるため、WebHookのリスニングやStripeなどのサードパーティサービスとのインテグレーションに利用できます。

Supabase Edge FunctionsはNode.jsではなく、Denoを使用して開発されます。

（余談）Denoを使った開発について

恥ずかしながら、私はDenoの存在を知らず、Supabase Edge Functionsを使うときに初めて知りました……。

Denoは新しい世代のJavaScriptランタイムと言われており、TypeScriptのネイティブサポート、強固なセキュリティ設定、ビルトインのツールチェーンを特徴としています。

Denoはブラウザとサーバーの両方でコードを再利用できるWeb標準APIに基づいており、Node.js互換レイヤーによりNode.jsエコシステムを利用できます。 

大規模なオープンソースプロジェクトとなっており、250万人以上の開発者コミュニティが形成されています。

Denoの公式ドキュメント

Denoを使い慣れていないことが大きな原因ではありますが、Next.jsで構築しているアプリケーションはNode.jsで開発し、Supabase Edge Functionsを実装するときだけLanguage ServerをDenoに切り替える、みたいなことが必要でした……結構辛かったというのが本音です。

Supabase Edge Functionsを使ってみよう

今回は簡単なサーバーレス関数を作りながら、Supabase Edge Functionsをまず使ってみましょう。

Supabaseのプロジェクト作成が完了していることを前提として解説していきます！

Supabase Edge Functionsを作成する

Functionsの作成は、Supabase CLIからコマンド一発で完了します！下記のコマンドから作成してください。

supabase functions new hello-world

するとsupabaseディレクトリに下記のような構成でSupabase Edge Functions用のディレクトリとtsファイルが作成されます。

└── supabase
    ├── functions
    │   └── hello-world
    │   │   └── index.ts // このファイルがEdge Functionです！
    └── config.toml

上記で作成されたindex.tsを修正してFunctionを実装していきましょう！

リクエストデータにnameを渡すと、Hello! ${name}と返却してくれるだけの単純な関数を定義していきます。

Deno.serve(async (req) => {
  const { name } = await req.json()
  const data = {
    message: `Hello ${name}!`,
  }
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } })
})

これだけで実装自体は完了です！

Supabase Edge Functionsをローカルで起動する

作成したFunctionは下記のコマンドで起動できます。

 supabase functions serve

無事に起動したら、ローカルのエンドポイントに対してリクエストを送信することで実装したFunctionが動作します。

curl --request POST 'http://localhost:54321/functions/v1/hello-world' \
  --header 'Authorization: Bearer SUPABASE_ANON_KEY' \
  --header 'Content-Type: application/json' \
  --data '{ "name":"Chiikata" }'

Supabase Edge Functionsをデプロイする

ローカルで動作確認ができたら、リモートの環境にもデプロイしちゃいましょう！

下記のコマンドでリモートにもデプロイが簡単にできます。

 supabase functions serve hello-world --no-verify-jwt

Supabase Edge FunctionsはデフォルトでJWT認証が必須となるため、必要に応じて--no-verify-jwtフラグは付けたりつけなかったりしてください。

今回はStripeなどの外部サービスからWebhook関数として動作させることを想定しているので、フラグをつけた状態でデプロイしました。

ローカルで動作確認したのと同じ要領でリモートにもリクエストを送信すると、無事に動作しているかと思います！

おわりに

Supabase Edge Functionを使えば、コストを最小に抑えてサーバーレスな関数を実装できることを実感いただけたかと思います！

Supabase、めちゃくちゃ熱いですね……！

どんどん追加される機能にワクワクしつつ、DenoじゃなくてNode.jsでもEdge Functions書けるようになったらいいな、とか、AWS Lambdaみたいにスケジュール実行ができたら最高なのにな、とか、色々と考えるだけでも楽しくなっちゃいます。

皆さんも一緒にSupabaseを使ってアプリケーション開発していきましょう！

◇

私が所属する株式会社GIGは、Web制作やシステム開発に強みをもつデジタルコンサルティング企業です。さまざまな技術を活用し、ご要望を叶えるWebサイト・システムを実現します。

Webやシステム、DX支援のご相談はいつでもご連絡ください。

ご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！モダンな技術を使った開発も挑戦する機会があるかもしれませんし、最近はアジャイル開発を取り入れたりしています！少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。