Category: Supabase

Cloudflare remix Stripe Supabase サイト制作覚書

10年続いているHeadless WordPressサイトのフロントをリニューアルしたので振り返り

. 今回のリニューアルでは、インフラ環境やフレームワークの変更など、大幅な刷新が行われました。WordPressをHeadless WordPressとして利用しているため、一般的なWordPressサイトと異なる点に注意が必要です。SaaSを組み合わせた複数のサービス構成に変更し、生成系AIやStripeなど新たなサービスも導入されました。技術選定ではRemixに置き換えたり、Clerkに認証系を変更するなど、サービスの導入や切り替えが行われました。今後は生成系AIの改善や広告管理、キャッシュコントロールの調整などが課題として挙げられます。.

Published at: 2024/09/29

React remix SaaS / FaaS Supabase

Remixで@supabase/ssrを使ったログイン処理を実装する

サーバー側の処理を利用して、Supabaseのログイン処理をRemixに実装する方法についてまとめました。 @supabase/ssrを使うことで、Cloudflare Pages上でクライアントを作成し、Cookieに関する処理を行います。ログイン処理後は、作成したクライアントを使用してCookieに情報を設定し、ログイン画面から移動できるようにします。さらに、参考資料に従い、ログイン処理を実装します。

Published at: 2024/09/18

SaaS / FaaS Supabase

@supabase/ssrを使うときは、ブラウザ側の操作にも利用しよう

Supabaseのサーバー側での認証状況確認に@supabase/ssrパッケージを使用し、ログアウト処理での問題点や解決方法を紹介。@supabase/subapase-jsのログアウト処理でCookieが削除されず、@supabase/ssrを使用することで解決可能。ログアウト時にcreateBrowserClientを使用することで正常にCookieを削除。SSR用のライブラリを統一することが望ましい。

Published at: 2024/09/14

JavaScript React remix SaaS / FaaS Supabase

Supabaseのログアウト処理で、Remixのloaderを再読み込みする方法

RemixアプリにSupabase Authのログアウト処理を組み合わせる際の方法を紹介。ログアウト後はuseNavigate()でページ遷移し、「Sign out」ボタンをクリックするとログアウトと同時にリダイレクトされる。再読み込みや状態更新後のリダイレクトも実装可能。ログアウト時に取得した情報を破棄するために使われる。Loader処理を再実行したい時はuseRevalidatorを利用。 Reminx APIを使うことを推奨。

Published at: 2024/09/13

SaaS / FaaS Supabase

@supabase/ssrでサーバー側にてユーザー情報を取得するときは、getUserを使おう

この記事では、Supabaseを使用してNode.jsアプリケーションでユーザー情報を取得する方法が紹介されています。具体的には、サーバー側でStripeの契約情報を取得し、ログイン中のユーザー情報を利用してリダイレクトする機能を実装しています。初期実装ではauth.getSession()を使用していましたが、より安全な方法としてauth.getUser()を使用することが推奨されています。ユーザー情報の取得は明示的に行う必要があります。

Published at: 2024/09/12

SaaS / FaaS Supabase

Supabaseでrandomにレコードを取得できるようにする

最近はRAGやAIエージェントの開発を試行錯誤しており、Supabaseを使用してランダムにデータを取得するAPIを実装中。また、Supabaseを使用してランダムにデータを取得する方法を模索し、SQLのViewを利用した構築方法を採用。SupabaseではViewを使って簡単にデータを取得することが可能で、初心者でも扱いやすい。これからもSupabaseやPostgreSQLを使いながら実験を続ける予定。

Published at: 2024/07/27

Supabase

SupabaseのDatabase Webhookを試してみた

SupabaseのWebhook機能について試してみた結果を報告しています。WebhookはAPIリクエストをDB操作と連動して外部に送ることができます。デフォルトではINSERTに対してイベントが発火し、指定したURLにJSON形式のデータが送信されます。開発時はngrokなどを使用してローカル環境にProxyを設定する必要があります。Webhookを活用することで、サービス開発とデータ連携を効率化することができますが、双方向の連携には注意が必要です。

Published at: 2023/12/30

0276339ae1d0e63de7863616a2c9cad0-20231229130934

SaaS / FaaS Supabase

Supabase AIを使って、SQLの構文エラーを修正する

SupabaseのダッシュボードのSQL Editorでは、構文エラーのSQLを実行するとSupabase AIボタンが表示されます。クリックすると、AIがサジェストと説明を提供してくれます。追加したい場合は「Accept addition」を押し、元のSQLを置換したくない場合は「Discard」を押します。AIのサポートは非常に強力で、SQLの試行錯誤をサポートしてくれます。Supabase AIは、SQLの学習に役立つでしょう。

Published at: 2023/12/30

SQL Supabase

SupabaseでDB Functionを試してみる

最近、SQLにも関数があることを知りました。Supabaseでも関数を作成できるので、SQL Editorを使って入門しました。関数はCREATE FUNCTIONで定義し、処理の本体は$$で囲んで書きます。関数の定義には関数名・戻り値の型・実行言語を指定します。戻り値がテキストの関数を作成する例を紹介しました。また、テーブルの情報を取得する関数や複数件取得する方法も説明しました。関数は後片付けにDROP FUNCTIONで削除できます。参考記事: https://supabase.com/docs/guides/database/functions

Published at: 2023/12/30

Next.js Supabase

Supabase AuthをNext.jsで触ってみた-1

公式のチュートリアルに従って、Supabaseを使用した認証画面をNext.jsで作成しました。手順を紹介します。まず、create-next-appを使用してNext.jsアプリをセットアップしました。次に、Supabase CLIを使用してSupabaseプロジェクトをセットアップしました。.env.localにプロジェクトIDとAPIキーを設定し、SDKをインストールしました。ログインページを作成し、ユーザーの作成とログインを試しました。セットアップに時間がかかりましたが、便利でカスタマイズ可能なAPIも使用できるため、CLIがあることは素晴らしいと感じました。チュートリアルの続きは後日紹介します。

Published at: 2023/12/30