Hono × Supabase × Prismaで爆速Server環境構築
こんにちは、Webエンジニアのまさぴょんです！
今回は、Hono × Supabase × Prismaで爆速Server環境構築について解説していきます🐱
ちなみに、今回作成したプロジェクトは、こちらで確認することができます👀✨
Honoの環境構築
まずは、Honoの環境構築から始めていきます💪🥺🔥
create honoコマンド
次のコマンドで、Honoのプロジェクトを作成していきます🔥
npm create hono@latest
# yarnの場合
yarn create hono
ちなみに、HonoのQuick Start欄に pnpm, bun, denoなどの場合のcreateコマンドも掲載されています🙆♂️
Honoプロジェクト作成中に、次のように質問が入るので、回答していきます🤔
[##] 2/2create-hono version 0.14.2
? Target directory hono-prisma-supabase-template # プロジェクト名を決める
? Which template do you want to use? cloudflare-workers # テンプレート選択
? Do you want to install project dependencies? yes # 依存パッケージ install
? Which package manager do you want to use? yarn # パッケージ・マネージャー選択
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd hono-api-template
✨ Done in 35.31s.
実際に、回答した画面は次のとおりです👀
初期プロジェクトの構成
Honoの初期プロジェクト構成は、次のとおりです👀✨
hono-prisma-supabase-template % tree -L 1
.
├── README.md
├── node_modules
├── package.json
├── src
├── tsconfig.json
├── wrangler.toml
└── yarn.lock
3 directories, 5 files
srcディレクトリ内のindex.tsファイルも次のように最低限の設定だけ記述されている状態です👀✨
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.text('Hello Hono!')
})
export default app
Supabaseの環境構築
Honoの環境構築が完了したら、次はSupabaseの用意をします💪🥺🔥
SupabaseにログインしてDBを作成する
今回は、次のようなDBを私は作成しました👀✨
Prismaの環境構築
続いて、ORMであるPrismaのセットアップをしていきます💪🥺🔥
npm install prisma @prisma/client
# yarnの場合
yarn add prisma @prisma/client
npx prisma init で Prismaを初期化する
次のコマンドえ、Prisma環境の初期化をします。
npx prisma init
上記のコマンドを実行すると、次の2つのファイルが作成されます👀✨
-
prisma/schema.prismaファイルが作成される -
.envファイルが作成される
また、npx prisma initコマンドを実行した後には、親切に Next stepの案内が表示されます🙌
hono-prisma-supabase-template % npx prisma init
✔ Your Prisma schema was created at prisma/schema.prisma
You can now open it in your favorite editor.
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.
5. Tip: Explore how you can extend the ORM with scalable connection pooling, global caching, and real-time database events. Read: https://pris.ly/cli/beyond-orm
More information in our documentation:
https://pris.ly/d/getting-started
prisma/schema.prismaファイルの配置を移動したい場合は、次の記事を参考にしてください🙏
Prisma と Supabase(DB)の接続とMigration
続いて、Prisma と Supabase(DB)の接続と、Migrationを実行していきます💪🥺🔥
1. 環境変数を設定する
まずは.envファイルにSupabaseのデータベース接続情報を設定します👀
作成したDB名の右側に「Connect」という緑色のボタンがあるので押します。
すると、ポップアップが表示されるのでタブの中から『ORMs』を選択します！
『ORMs』タブでは、.envファイル用と、/prisma/schema.prismaファイル用のコピー内容が確認できるので、それをCopyしてそれぞれ対象ファイルに貼り付けます💪
ちなみに、次のように確認できます👀✨
.envファイルと、/prisma/schema.prismaファイルは、それぞれ次のようになると思います👀✨
.envファイル
# Connect to Supabase via connection pooling with Supavisor.
DATABASE_URL="postgresql://postgres.xxxxx:[YOUR-PASSWORD]@aws-0-ap-northeast-1.pooler.supabase.com:6543/postgres?pgbouncer=true"
# Direct connection to the database. Used for migrations.
DIRECT_URL="postgresql://postgres.xxxxx:[YOUR-PASSWORD]@aws-0-ap-northeast-1.pooler.supabase.com:5432/postgres"
/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")
directUrl = env("DIRECT_URL")
}
2. Prismaスキーマを設定する
続いて、Prismaスキーマ(Entity)を定義していきます！
試しに、User Entityと、Post Entityの2つを定義します👀
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
directUrl = env("DIRECT_URL")
}
// 追加1: User Entity 定義
model User {
user_id Int @id @default(autoincrement())
email String @unique
name String?
createdAt DateTime @default(now())
posts Post[]
}
// 追加2: Post Entity 定義
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [user_id])
authorId Int
createdAt DateTime @default(now())
}
3. マイグレーションを実行する
次のコマンドで、マイグレーションを実行します。
npx prisma migrate dev --name init
Migrationを実行して成功すれば、次のように Supabaseに、定義したEntityのテーブルができているはずです🙌
まとめ
いったん、ここまでで、Hono × Supabase × Prismaで爆速Server環境構築を完了したいと思います🙏
API実装などについては、また記事を書くかもしれません💪
Xやってます、フォローよろしくお願いします🙏
参考・引用
Discussion