Zenn
Open4

Supabase を試す

Svelte
Supabase
m0am0a

supabaseをちょっと触った印象はpostgressにweb-apiが生えた感じ

仕事でfirebase触っているけどfirestoreのスキーマレスな感じは結構大変

やっぱRDBいいわってなるのでsupabaseは望んだものって感じ
あとfirestoreの場合は専用のSDK経由じゃないとさわれないのも辛い、、
web-apiくらいのほうがありがたい

m0am0a

svelteのプロジェクトをローカルに作成

npx degit sveltejs/template supabase-svelte
cd supabase-svelte

degitって便利ね

supabase-js追加

npm install @supabase/supabase-js

.envファイルを作成する

SupabaseはKeyが２つある

anon keyとservice key
anon keyはクライアント側で仕込む
service keyは公開しないように注意する。

漏れたときのために再生成する仕組みほしいな、、、見当たらない

.env
SVELTE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
SVELTE_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

追加パッケージ

 npm install --save-dev @rollup/plugin-json
 npm install --save-dev dotenv @rollup/plugin-replace

仕事だとyarn使ってるんだけどもうnpmでいいのかな

rollup.config.jsを書き換える

rollup.config.js
diff --git a/rollup.config.js b/rollup.config.js
index e8965ec..adca4ff 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -4,6 +4,9 @@ import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
+import { config } from 'dotenv';
+import replace from '@rollup/plugin-replace';
+import json from '@rollup/plugin-json'

 const production = !process.env.ROLLUP_WATCH;

@@ -37,6 +40,16 @@ export default {
                file: 'public/build/bundle.js'
        },
        plugins: [
+               replace({
+            __api: JSON.stringify({
+                env: {
+                    isProd: production,
+                    ...config().parsed // attached the .env config
+                }
+            }),
+            delimiters: ['', '']
+        }),
+        json(),
                svelte({
                        compilerOptions: {
                                // enable run-time checks when not in production
m0am0a

postgressにはRow Level Securityという機能があるらしい。
今回はスキーマの流し込みをスニペットから行ったんだけどその時点でもう有効になってるのかな？

なっているっぽい。抜粋する

-- ここでRLSを有効にする
alter table profiles enable row level security;

-- selectについては全公開ね、、
create policy "Public profiles are viewable by everyone."
  on profiles for select
  using ( true );

// insertのときはidがauth.uid()と一致しなければ弾くと
create policy "Users can insert their own profile."
  on profiles for insert
  with check ( auth.uid() = id );

// updateのときはauth.uid() = id のルールを適用すると
create policy "Users can update own profile."
  on profiles for update
  using ( auth.uid() = id );

結構わかりやすいかも