規模にもよりますが、個人開発だと軽量PaaSの機運が高まっているような気がするので最近流行りのSupabaseで何か簡単なアプリケーションを構築してみようと思います。
今回はアプリケーションを作ることが目的ではないので、supabaseのサンプルアプリを使用して構築を行なっていきます。
supabaseを触るにあたって学習コストがどの程度必要かの参考になれば幸いです。
Supabaseとは
データベース、バックエンドの機能を提供する軽量のPaaSとなります。BaaS(Backend as a Service)とも呼ばれています。
Firebaseなどと近しいものとなりますが、FirebaseはGoogleが提供しているのに対しSupabaseはFirebaseのOSSを目的としたソースから創設された組織で運営されています。
基本的にはFirebaseと似たようなサービスとなっていますが、大きな違いとして、データベースサービスはPostgreSQLを提供している点となります。
なんだかんだSQLを使用できるマネージドのBaaSは他には無いような気もします。
環境構築
Supabaseプロジェクト周り環境構築
-
githubのアカウントとSupabaseを連携します
すでに連携されている方はstart your projectで始まります。
https://supabase.com
-
プロジェクトの作成を行います。
今回はtest-projectを作成してみます
しばらく待っているとインスタンスが起動します。
この時点でDBが立ち上がった状態となります。
SupabaseCLI環境構築
- CLIのインストール
Macの場合、brewやnpmでインストールが可能です。
brew install supabase/tap/supabase\
- supabaseの初期ディレクトリ生成
supabase init
これによりsupabaseディレクトリが作成Uれ、DBは構築できる状態となります。
今回作成する予定のfunctionはfunctionsディレクトリに生成予定です。
- webコンソールで作成したsupabaseのプロジェクトとローカルのCLIを紐付ける
WEBコンソールから作成したプロジェクトのsetting> general > project settingsにあるReferenceIDをコピーし、以下のCLIを実施
supabase link --project-ref ReferenceID
一旦ここまででSupabaseの環境構築は終了です。
サンプルの実装と実行
- edge functionsでサンプルエンドポイントの作成を実施
supabase functions new test_function
supabase/functions配下にtest_functionのディレクトリとindex.tsが生成されたと思われます。
こちらの内容はpostのbodyのnameキーの値を返却するプログラムとなっています。
親切なことにサーバーの起動方法からcurlコマンドの叩き方までコメントで書いています。
// Follow this setup guide to integrate the Deno language server with your editor:
// https://deno.land/manual/getting_started/setup_your_environment
// This enables autocomplete, go to definition, etc.
// Setup type definitions for built-in Supabase Runtime APIs
import "jsr:@supabase/functions-js/edge-runtime.d.ts"
console.log("Hello from Functions!")
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" } },
)
})
/* To invoke locally:
1. Run `supabase start` (see: https://supabase.com/docs/reference/cli/supabase-start)
2. Make an HTTP request:
curl -i --location --request POST 'http://127.0.0.1:54321/functions/v1/test_functions' \
--header 'Authorization: Bearer xxxxxxxxx' \
--header 'Content-Type: application/json' \
--data '{"name":"Functions"}'
*/
- サンプルプログラムの起動と実行
コメントに書いてある通りに
supabase start
で起動します。コンテナのためdocker daemonは必要になります。
- 実行
コメントに記載されているcurlコマンドを実行します。
$ curl -i --location --request POST 'http://127.0.0.1:54321/functions/v1/test_functions' \
--header 'Authorization: Bearer xxxxxxxxx' \
--header 'Content-Type: application/json' \
--data '{"name":"Functions"}'
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 30
Connection: keep-alive
vary: Accept-Encoding
date: Mon, 19 Aug 2024 04:12:30 GMT
X-Kong-Upstream-Latency: 77
X-Kong-Proxy-Latency: 2
Via: kong/2.8.1
{"message":"Hello Functions!"}%
実行結果としてmessageにHello Functions!が設定されて返却された場合は成功しています。
5. デプロイ
supabase functions deploy test_function
上記のコマンドでデプロイが可能です。
$ supabase functions deploy test_functions
Bundling Function: test_functions
Download https://jsr.io/@supabase/functions-js/meta.json
Download https://jsr.io/@supabase/functions-js/2.4.3_meta.json
Deploying Function: test_functions (script size: 2.863kB)
Deployed Functions on project maohpvjcgawsfsjmdcep: test_functions
You can inspect your deployment in the Dashboard: https://supabase.com/dashboard/project/maohpvjcgawsfsjmdcep/functions
A new version of Supabase CLI is available: v1.190.0 (currently installed v1.187.10)
We recommend updating regularly for new features and bug fixes: https://supabase.com/docs/guides/cli/getting-started#updating-the-supabase-cli
デプロイに成功するとwebコンソールのedge functionsにfunctionが追加されています。
実行する場合はsupabase startのコマンドを実行した際のanon keyをBearerに設定してリクエストを送信してください。
まとめ
認証、ストレージ、DB、functionsがあれば大抵のサービスは要件を満たせる気がしています。
今回はedge functionsでリクエストを送信するところまでですが、学習コストとしても1時間あれば色々できるようになるのでは無いでしょうか？
とても軽量で、尚且つ現在は無料で使用できるため個人開発などでは使用する人が増えている印象です。
Discussion