Zenn
Open2

Supabaseとかbiomeとかの雑多メモ(備忘録)

Supabase
Biome
Mt.SouthernMt.Southern

biomeためす

インストールとか設定とか

biomeのgetting startedの記事に基づいて進めてみる。

ターミナル
$ bun add --dev --exact @biomejs/biome
bun add v1.1.26 (0a37423b)

installed @biomejs/biome@1.8.3 with binaries:
 - biome

3 packages installed [1.65s]

Blocked 1 postinstall. Run `bun pm untrusted` for details.

って、いきなりなんか出てるし。言われるがまま、コマンド叩く

ターミナル
$ bun pm untrusted
bun pm untrusted v1.1.26 (0a37423b)

./node_modules/@biomejs/biome @1.8.3
 » [postinstall]: node scripts/postinstall.js

These dependencies had their lifecycle scripts blocked during install.

If you trust them and wish to run their scripts, use `bun pm trust`.

ふむぅ。。
これやらんと結局きちんと動かへんやろうから、四の五の言わんと言われるがまま進めることにする。

ターミナル
$ bun pm trust --all
bun pm trust v1.1.26 (0a37423b)

./node_modules/@biomejs/biome @1.8.3
 ✓ [postinstall]: node scripts/postinstall.js

 1 script ran across 1 package [128.00ms]

ちなみにあとからこのjsを見てみたらやってることは、archの設定とライブラリの設定してるみたい。あとはバイナリの場所のパス設定とかかな。

多分これやっとかんとまともにbiome動かん気ぃする。

これでインストールはできたんで、基本の設定に移る。

ターミナル
$ bunx biome init

すると

bunx biome init実行結果
Welcome to Biome! Let's get you started...

Files created 

  - biome.json
    Your project configuration. See https://biomejs.dev/reference/configuration

Next Steps 

  1. Setup an editor extension
     Get live errors as you type and format when you save.
     Learn more at https://biomejs.dev/guides/integrate-in-editor/

  2. Try a command
     biome check  checks formatting, import sorting, and lint rules.
     biome --help displays the available commands.

  3. Migrate from ESLint and Prettier
     biome migrate eslint   migrates your ESLint configuration to Biome.
     biome migrate prettier migrates your Prettier configuration to Biome.

  4. Read the documentation
     Find guides and documentation at https://biomejs.dev/guides/getting-started/

  5. Get involved with the community
     Ask questions and contribute on GitHub: https://github.com/biomejs/biome
     Seek for help on Discord: https://discord.gg/BypW39g6Yc

biome.jsonっていう設定ファイルが作られる。
あとは、次何したらええか案内される。

デフォルトで作られるファイルの中身は

biome.json
{
	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

で、import分の自動編成とlinterの有効化して推奨設定で動くようにしてる。
あと、formatterについては未記載やけどデフォルトで有効になってるらしい。

まぁ、とりあえずは推奨設定になってるから細かいことは後回しにして表示された手順通りに次はエディタの拡張機能設定に移る。

拡張機能設定についてはリンク先があるのでそちらを参照する。
公式で日本語版ページになる様なのでそちらを選ぶ。
日本語版ページ

これによれば、vscodeでは、専用の拡張機能があるのでインストール後に設定するようになってる。
設定手順は

  1. コマンドパレットを開く（Ctrl/⌘+⇧+P または表示 → コマンドパレット）
  2. ドキュメントのformat… を選択
  3. デフォルトのformatterの設定… を選択
  4. Biomeを選択
    となる。

これでデフォルトのフォーマッタがvscode上でbiomeに向けられる。
vscodeでサポートしているファイルは全てbiomeで処理される。

個別でフォーマッタを設定したい場合はsettings.jsonに言語毎の設定を入れる。
たとえば、javascriptのデフォルトフォーマッタをbiomeにするには以下の様に書く。

settings.json
{
  "editor.defaultFormatter": "<other formatter>",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

つまりは、どの言語でどのフォーマッタをデフォルトとするのかを選べるようになる。

なのでデフォルトフォーマッタをprettierのままで特定言語のフォーマッタだけbiomeにするとかも可能。

使い方

基本的なコマンドは

  • format
  • lint
  • check
    のみっつ。

それから、checkはformat/lint/import編成をいっぺんにやるコマンドになる。

bunでつかうのでまとめるとこんな感じ。

formatコマンド
bunx biome format --write <files>
lint コマンド
bunx biome lint --write <files>
check コマンド
bunx biome check --write <files>

になる。
ちなみに --write 付けたら、処理内容を対象ファイルに反映する。

package.jsonの scriptsとかに設定するのもええかも。

Mt.SouthernMt.Southern

SupabaseをLocal Self Hostedで試す

基本的には 公式どおり。

環境回りは ここにあるので確認。

うちの環境は

  • windows11 home (cpu: 13th Gen Intel(R) Core(TM) i7-13700H 2.40 GHz / 16GB RAM)
  • WSL2 (Ubuntu 24.04LTS) 環境構築済み
  • WLS2内にdocker実行環境インストール済み
    になってる。

多分大丈夫そう。

あとは、この通り進めていけばいい。

以下抜粋。
git cloneして、各dockerコマンドを実行でOK。

terminal
# Get the code
git clone --depth 1 https://github.com/supabase/supabase

# Go to the docker folder
cd supabase/docker

# Copy the fake env vars
cp .env.example .env

# Pull the latest images
docker compose pull

# Start the services (in detached mode)
docker compose up -d

なんか但し書きがあって、dockerをrootlessで動かしてるんやったら、 .env 内の DOCKER_SOCKET_LOCATION を変更したらええっぽい。

該当箇所はデフォルトは

.env
# Docker socket location - this value will differ depending on your OS
DOCKER_SOCKET_LOCATION=/var/run/docker.sock

ってなってるから、この値を /var/run/docker.sock から /var/ run/user/1000/docker.sockとかにするんやって。1000のとこは

id -u

とかで拾った値にしとくみたい。

ウチはRootlessやないから関係ないんやけどな。

あとは

docker compose ps

でちゃんとコンテナ群が動いてることを確認せんとね。

ちなみに最初の起動はpullしてくるから結構かかるし、実際起動するまではなんやかんやで時間かかった印象。

そのあと、セキュリティの設定をちゃっちゃとやらんとあかんでぇ！ここ見てちゃんと設定しぃやぁって書いてあるんやけど、ちょっと動きを確かめたいんで一旦後回しにしてこのまま進めることにする。

ダッシュボードへアクセスしてみる

ブラウザとかから、 http://localhost:8000 でアクセスすると、ユーザ名とパスワードが必要になる。 .envは弄ってないのでデフォルトのまま。

.env
DASHBOARD_USERNAME=supabase
DASHBOARD_PASSWORD=this_password_is_insecure_and_should_be_updated

この辺に書いてあるのでこのまま使うことにする。
うん、実際使う時はここ変えんとあかんわな。まぁとりあえずなんで～～。
（ここでもやっぱり、ここ見てはよ変えたらんと知らんで、的なこと書かれてるｗ）

おお、ちゃんと出てきたやん。
とりあえず動いてる～。

API一覧

サービス エンドポイントURL
REST http://<your-ip>:8000/rest/v1/
Auth http://<your-domain>:8000/auth/v1/
Strage http://<your-domain>:8000/strage/v1/
Realtime http://<your-domain>:8000/realtime/v1/
Function http://<your-domain>:8000/function/v1/<FUNCTION_NAME>

エッジファンクションは volumes/functions/ディレクトリ下に関数名ディレクトリを作成し、index.tsを配置したらええらしい。

サンプルとしてhelloディレクトリ内にindex.tsがあるみたいなので確認してみる。

index.ts
// 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.

import { serve } from "https://deno.land/std@0.177.1/http/server.ts"

serve(async () => {
  return new Response(
    `"Hello from Edge Functions!"`,
    { headers: { "Content-Type": "application/json" } },
  )
})

// To invoke:
// curl 'http://localhost:<KONG_HTTP_PORT>/functions/v1/hello' \
//   --header 'Authorization: Bearer <anon/service_role API key>'

おおぅ、denoやんか
あとでFunction周りのDocsみとかんと。。。
うーん。。。
APIとかこっちで集約しようかと思ってたけど、ちょっとどうしようかなぁ。。。
いろいろ手ぇ広げすぎるとしんどいから一旦、保留！

ってことで、さっきまで見んかったことにしたセキュリティ周りに突入。

セキュリティ設定

やっと、この辺読み始める。

ふむふむ、デフォルトの設定はしてあるけど、本運用するんやったら絶対そのままデプロイすんなよ、このどアホ！
このあとの内容に従ってきっちりセキュリティ設定したらんかいゴルァ！
設定したら全サービスのリスタートも忘れん様にな！

位の勢いで書いてあるとか書いてないとかw

API keyの再生成

詳しくは、ここにある手順を進めればええけど、再生成用のフォームが用意してあるのでこれをちょちょいと弄って作るみたい。
ちょっと説明しとくと、このページに既に用意されている JWT Secret:はページ読み込む毎にランダム生成される模様。
Preconfigured Payload:はANON_KEYとSERVICE_KEYが選べる。変更毎に下のPayload:の属性と属性値がよしなに切り替わる。なので基本Payload:の内容は触わらんほうがええ。

最後にGenerate JWTボタン押下でAPIキーのできあがり。

注意点まとめると

  • JWT Seretは忘れずメモっとけ！（ページのリロードしたら二度と戻らん）
  • Generate JWTボタンは2回、 Preconfigured Payload: を ANON_KEYとSERVICE_KEYそれぞれ実行する
  • できあがった2つ(ANON_KEY / SERVICE_KEY)のAPIキー(JWT token)も忘れずメモっとけ！
    かな。

最終的には、 supabase/docker/.envを弄くる。

.env(抜粋)
############
# Secrets
# YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
############

POSTGRES_PASSWORD=your-super-secret-and-long-postgres-password
JWT_SECRET=your-super-secret-jwt-token-with-at-least-32-characters-long
ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE
SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q
DASHBOARD_USERNAME=supabase
DASHBOARD_PASSWORD=this_password_is_insecure_and_should_be_updated

で、今回の修正対象は、.envの

  • JWT_SECRET
  • ANON_KEY
  • SERVICE_ROLE_KEY
    なんやけど、他にもPostgreSQLのパスワードだの、ダッシュボードのパスワードだのあるので考えるのがめんどいし、このへん使って楽してみてもええかも。

その他 .envで更新対象まとめ

  • POSTGRES_PASSWORD
  • SITE_URL
  • SMTP_*
  • DASHBOARD_USERNAME
  • DASHBOARD_PASSWORD

あと、補足で docker/volumes/api/kong.yml に

kong.yaml
basicauth_credentials:
- consumer: DASHBOARD
  username: user_one
  password: password_one
- consumer: DASHBOARD
  username: user_two
  password: password_two

てな感じで書いたらログインできるユーザとパスワードを設定できる。
複数ユーザもいける模様。

その他

各サービスの詳細は
https://supabase.com/docs/guides/self-hosting/docker#configuring-services
にまとまってるのでリンク辿るとええ。

以下の項目もあったけど、とりあえず後でまとめることにして、項目だけ挙げとく。

シークレットキーとかの扱い

メールの設定

S3ストレージの設定

PostgreSQLの公開設定

Macでのファイルストレージの注意点

うーん、ローカル環境である程度慣れたら、後はどっかデプロイせなあかんなぁ。
Kubenetesとか設定してどっかのクラウドに上げんと。
設定手順等のまとめはいずれまた。。。