Open5
T3stack × supabase cliでローカル環境構築
![pandanose](https://res.cloudinary.com/zenn/image/fetch/s--mY3Wp7NS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0c6b94fbb8.jpeg)
技術スタック
アプリ周り
- next.js
- auth.js
- prisma
- tRPC
- Tailwind CSS
- shadcn/ui
- lucide:アイコン用
外部サービス
- supabase:DBとして利用(supabase Authは使用せず)
- GCP:Oauth認証のプロバイダとして利用
![pandanose](https://res.cloudinary.com/zenn/image/fetch/s--mY3Wp7NS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0c6b94fbb8.jpeg)
next.jsをインストール
bunx create-next-app@latest
optionはこんな感じ
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes
Creating a new Next.js app in /Users/yonetsukenshin/projects/tutorial/auth-tutorial.
![pandanose](https://res.cloudinary.com/zenn/image/fetch/s--mY3Wp7NS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0c6b94fbb8.jpeg)
lucide,shadcn/uiをインストール
スタイリング系をこのままインストールしちゃう
bun add lucide-react
bunx shadcn-ui@latest init
optionはこんな感じ
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Zinc
✔ Would you like to use CSS variables for colors? … yes
また、今回使用するコンポーネントをインストールしておく
bunx shadcn-ui@latest add button dropdown-menu form input toast textarea
ちなみに shadcn/ui の VSCode の拡張機能を使用すると『⌘+⇧+P』→ 『shadcn/ui Add New Component』でインストールできる
![pandanose](https://res.cloudinary.com/zenn/image/fetch/s--mY3Wp7NS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0c6b94fbb8.jpeg)
supabaseでローカル環境にDBを構築
今回はsupabase を使用するため、supabase cliからローカル用のDBを用意
supabase cliをインストール
macなのでHomebrew使用
brew install supabase/tap/supabase
※すでにsupabase cliをインストールしているなら不要
初期化
supabase init
optionはNでenter
Generate VS Code settings for Deno? [y/N]
Generate IntelliJ Settings for Deno? [y/N]
匿名でのログインを TRUE にする
手早くログイン認証機能を試すために匿名でのログインもTRUE にしておく。
config.toml
- enable_anonymous_sign_ins = false
+ enable_anonymous_sign_ins = true
ローカルサービス開始
supabase start
※dockerをインストールしておく必要があります。
このようになればOK
API URL: http://127.0.0.1:54321
GraphQL URL: http://127.0.0.1:54321/graphql/v1
S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
Studio URL: http://127.0.0.1:54323
Inbucket URL: http://127.0.0.1:54324
JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
anon key: xxxx
service_role key: xxxx
S3 Access Key:xxxx
S3 Secret Key: xxxx
S3 Region: local
試しにstudio URLを叩くとsupabaseのDBクライアントが見れる。
.env に DB への接続情報を記述
DB URLをDATABASE_URLに記述する
.env
DATABASE_URL=postgresql://postgres:postgres@127.0.0.1:54322/postgres
DBを停止する場合
停止する場合は下記コマンドで停止できる。ちなみに直接 docker で停止すると何故か止まらない。
supabase stop
![pandanose](https://res.cloudinary.com/zenn/image/fetch/s--mY3Wp7NS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0c6b94fbb8.jpeg)
prismaをインストール
bun add prisma
セットアップ初期化
bunx prisma init
initすると次にやることも明示してくれるようになったっぽい。素敵。一旦フル無視するけど。
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.
@prisma/clientインストール
bun add @prisma/client
@prisma/clientはprisma generate
するとschemaから自動的に型情報を読み取ってくれて型安全にしてくれるやつ。
schema.prismaを設定
以下の通りに記述する
schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Account {
id String @id @default(cuid())
userId String
type String
provider String
providerAccountId String
refresh_token String? @db.Text
access_token String? @db.Text
expires_at Int?
token_type String?
scope String?
id_token String? @db.Text
session_state String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
}
model Session {
id String @id @default(cuid())
sessionToken String @unique
userId String
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
model User {
id String @id @default(cuid())
email String? @unique
emailVerified DateTime?
name String?
introduction String?
image String?
hashedPassword String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
accounts Account[]
sessions Session[]
PasswordResetToken PasswordResetToken[]
}
model PasswordResetToken {
id String @id @default(cuid())
token String @unique
createdAt DateTime @default(now())
expiry DateTime
userId String
User User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
model VerificationToken {
identifier String
token String @unique
expires DateTime
@@unique([identifier, token])
}
マイグレーションしてデータベース構築
--name
で名前も設定。最初なのでinitにした。
bunx prisma migrate dev --name init
Prisma Studioで見てみるとテーブルもちゃんと出来てた。
Supabase Studio
マグレーションせずにschemaを反映させたい場合
bunx prisma db push
マイグレーションファイルは生成されないが、スキーマは直接データベースに反映される
Generate
TypeScript用の型定義を生成
bunx prisma generate
gitにプッシュ
ここで一度gitにプッシュしておく。