Supabase入門
動作環境・使用するツールや言語
- Windows 11 Home 25H2
- Node.js
- Visual Studio Code
- Supabase
はじめに
SupabaseはPostgresqlベースのバックエンドサービスです。
今回はテーブルにデータを登録してブラウザで表示できるところまで確認します。
手順
Supabaseのサイトでアカウントおよびプロジェクトを作成します。（この手順は省略）
テーブルおよびデータを下記の通り登録します。
| 列 | 型 |
|---|---|
| id | bigint |
| employee_no | text |
| name | text |
| department | text |
| text | |
| hire_date | date |
| created_at | timestamptz |
| employee_no | name | department | hire_date | |
|---|---|---|---|---|
| 0001 | 山田太郎 | 営業 | yamada@example.com | 2023-04-01 |
| 0002 | 佐藤花子 | 開発 | sato@example.com | 2022-10-01 |
Authenticationからユーザを適当に登録します。
次にDatabase＞Access Control＞Polociesで
ポリシーを設定してテーブルをselectできるようにします。
RLSを有効にし（Table Editorで作成した場合はデフォルトで有効）、Create policyでselectに対してusingの中身をtrueにします。
supabaseでは現在テーブルを作成しただけではデフォルトではAPI公開されないので、
Integrations>APIでemployeesテーブルを公開します。
次にVS CodeのターミナルでNext.jsのプロジェクトを作成します。
Next.jsはNode.js上で動作するWebアプリのフレームワークです。
Node.jsは通常ブラウザでしか動かないJavaScriptをサーバサイドでも動かせるようにする実行環境です。
プロジェクト作成時は色々聞かれますが全部Yesにします。
npx create-next-app@latest employee-system
ローカルで開発サーバを起動します。カレントディレクトリはプロジェクトルート（employee-system）にしておかないとエラーになります。
npm run dev
http://localhost:3000
にアクセスしてNext.jsの初期画面が表示されればOKです。
ctrl+cで終了し、supabaseライブラリをインストールします。
npm install @supabase/supabase-js
なお＠はNext.jsがプロジェクト作成時にtsconfig.jsonにエイリアスとして登録しており、
@supabase/supabase-jsはsrc/supabase/supabase-jsになります。
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
プロジェクトルートの下に
.env.local
を作成し、中身にsupabaseのプロジェクトURLとPublishable Key（APIの公開キー）を記入します。
UIが変わるかもしれませんが、現在はダッシュボードのProject Overviewからそれぞれコピーできます。
なお.env.localはアプリケーションで使用する個人用の環境変数用のファイルです。process.env.変数名で呼び出せます。
Next.jsではブラウザから読める変数にはNEXT_PUBLIC_を付けます。
Next.jsでプロジェクトを作成すると最初から.gitignoreに.env*の行が入っているので.env.local自体はgithubには公開されませんが、ブラウザから読めるということは利用者側が見る手段があるということなので、公開したくない変数にはNEXT_PUBLIC_をつけるべきではありません。
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxx
次に、srcフォルダの下にlibフォルダを作成し、その中にsupabase.tsファイルを作成します。
中身は以下の通りです。
.env.localに記入したURLとAPI公開キーを使用して、さっきインストールしたsupabaseライブラリのcreateClient関数でsupabaseに接続するクライアント"supabase"を生成しています。なお「！」はtypescriptでnullやundefinedにならないことを保証するという意味です。DBのnot null制約のようなイメージでしょうか。
import { createClient } from '@supabase/supabase-js'
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
ページを作成します。
src/app/page.tsxが初期表示のページですが、中身を書き換えます。
dataにselect * from employees;の結果が入るので、これを1行ずつmapで取り出してemployee_noとnameを表示しています。
data?の？はオプショナルチェーンというもので、dataがあれば取得し、nullなら何もしないというものです。
import { supabase } from "@/lib/supabase";
export default async function Home() {
const { data, error } = await supabase
.from("employees")
.select("*");
if (error) {
return (
<div>
<h1>エラー</h1>
<pre>{JSON.stringify(error, null, 2)}</pre>
</div>
)
}
return (
<main>
<h1>社員一覧</h1>
<ul>
{data?.map(employee => (
<li key={employee.id}>
{employee.employee_no}
{employee.name}
</li>
))}
</ul>
</main>
)
}
再度開発サーバを起動し
http://localhost:3000/
にアクセスして、下記の通り表示されればOKです。
社員一覧
0001山田太郎
0002佐藤花子