Hono × Supabase × Prismaで環境構築

目次

１. はじめに
２. 開発環境
３. 開発手順
４. 動作確認

1. はじめに

現在、熱い🔥と言われているフレームワークである「Hono」と、熱々の肉まん「Bun」を使って、登録されたユーザーをJSON形式で表示するアプリを開発したいと思います。
DBに「Supabase(PostgreSQL)」、ORMに「Prisma」を使用します。
今回はフロント周りには触れないので悪しからず。

※2024/4/3現在
簡単なユーザー登録画面を開発中です。

作成したGithubリポジトリはこちら

2. 開発環境

Package	Version
bun	1.0.35
hono	^4.1.5
prisma	^5.11.0
@prisma/client	^5.11.0

3. 開発手順

Bunでプロジェクト作成

bunx create-hono hono-supabase-prisma-tutorial
cd hono-supabase-prisma-tutorial

Supabaseの設定

プロジェクトを作成するとき、パスワードを設定します。
後ほど使用するので、メモしておいて下さい。
また、以下の画像を参考に、Connection Stringを取得して下さい。

Project Settings > Database > Connection String

Prismaの導入・設定

以下のコマンドでPrismaをインストールします。

bun i prisma -D
bun i @prisma/client

Prismaの初期化をします。

bunx prisma init

プロジェクトディレクトリ直下にprisma/schema.prismaファイルと.envファイルが作成されます。

schema.prismaファイルにUserモデルを追加します。

schema.prisma

model User {
  user_id   String @id      @default(dbgenerated("uuid_generate_v4()"))
  user_name String @db.Text
}

また、.envファイルのDATABASE_URLを設定して下さい。
String中の[YOUR-PASSWORD]を [ ]も含めて Supabaseのプロジェクトを作成したときのパスワードに変更して下さい。

.env

DATABASE_URL=postgres://postgres.mgjwqsdydswnlgiteiez:[e-mail]:5432/postgres

設定が完了したら、以下のコマンドでマイグレーションします。

bunx prisma migrate dev --name init

正常に実行できたら、SupabaseにUserテーブルが追加されていると思います。

Honoでバックエンド開発

src/api/user/route.ts

import { PrismaClient } from "@prisma/client";
import { Hono } from "hono";

const app = new Hono();
const prisma = new PrismaClient();

export const users = app.get("/", async (c) => {
  const getUsers = await prisma.user.findMany();
  return c.json(getUsers);
});

src/index.ts

import { Hono } from "hono";
import { users } from "./api/user/route";

const app = new Hono();

app.route("/users", users);

export default app;

4. 動作確認

今回はSupabaseのTable Editerから手動でデータを追加しています。

bun run dev

ブラウザからでも良いですが、今回はThunder Clientで確認します。

データを取得できていることが確認できました！🎉