Open5

T3stack × supabase cliでローカル環境構築

pandanosepandanose

技術スタック

アプリ周り

  • next.js
  • auth.js
  • prisma
  • tRPC
  • Tailwind CSS
  • shadcn/ui
  • lucide:アイコン用

外部サービス

  • supabase:DBとして利用(supabase Authは使用せず)
  • GCP:Oauth認証のプロバイダとして利用
pandanosepandanose

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.
pandanosepandanose

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』でインストールできる

pandanosepandanose

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
pandanosepandanose

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にプッシュしておく。