メインコンテンツにスキップ

Turborepo で Prisma ORM を使用する方法

15 分

Prisma はデータベースを管理するための強力な ORM であり、Turborepo はモノレポのワークフローを簡素化します。これらのツールを組み合わせることで、プロジェクトのスケーラブルでモジュール式のアーキテクチャを作成できます。

このガイドでは、Turborepo モノレポで Prisma をスタンドアロンパッケージとしてセットアップする方法について説明します。これにより、複数のアプリにわたる効率的な構成、型共有、およびデータベース管理が可能になります。

学習内容:​

  • Turborepo モノレポで Prisma をセットアップする方法。
  • パッケージ間で PrismaClient を生成および再利用する手順。
  • モノレポ内の他のアプリケーションへの Prisma パッケージの統合。
注記

このガイドは、Turborepo バージョン 2.3.3 および Prisma ORM バージョン 6.1.0 を使用してテストされました。

1. turborepo を使用してモノレポを作成する​

hello-world という名前の Turborepo モノレポをセットアップするには、次のコマンドを実行します

npx create-turbo@latest hello-world

セットアップ後、プロジェクトのパッケージマネージャーを選択します。プロジェクトのルートディレクトリに移動し、Turborepo を開発依存関係としてインストールします

cd ./hello-world
npm install turbo --save-dev

Turborepo のインストールに関する詳細については、公式 Turborepo ガイドを参照してください。

2. 新しい database パッケージを hello-world モノレポに追加する​

packages ディレクトリ内に database パッケージを作成します。次に、パッケージの package.json ファイルを次のコマンドを実行して作成します

cd packages/
mkdir database
cd database
touch package.json

package.json ファイルを次のように定義します

{
  "name": "@repo/db",
  "version": "0.0.0"
}

次に、Prisma ORM を使用するために必要な依存関係をインストールします。お好みのパッケージマネージャーを使用してください

npm install prisma --save-dev
npm install @prisma/client

3. prisma init を実行して prisma を初期化する​

database ディレクトリ内で、prisma を初期化するには、次を実行します

npx prisma init

これにより、packages/database 内にいくつかのファイルが作成されます

  • schema.prisma は、Prisma スキーマが置かれる場所です。ここでは、データベースの形状を変更できます。prisma init コマンドは、デフォルトで PostgreSQL を使用するように構成を作成します。スキーマを変更して、Prisma ORM でサポートされているデータベースを使用できます。
  • .gitignore は、いくつかの無視されるファイルを git に追加します
  • .env を使用すると、prisma の DATABASE_URL を手動で指定できます。
警告

packages/database/.env 内の DATABASE_URL を有効なデータベース URL に置き換えてください。

database/prisma/schema.prisma の Prisma スキーマにモデルを追加します

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
  output = "../generated/client"
}

model User {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  email     String   @unique
  name      String?
}

カスタムディレクトリで Prisma 型を生成することの重要性​

schema.prisma ファイルでは、Prisma が型を生成するカスタム output パスを指定します。これにより、Prisma の型がさまざまなパッケージマネージャー間で正しく解決されるようになります。

このガイドでは、型は database/generated/client ディレクトリに生成されます。

4. Prisma CLI コマンドを実行するスクリプトを作成する​

packages/database 内の package.json にいくつかのスクリプトを追加しましょう

{
  "scripts": {
    "db:generate": "prisma generate",
    "db:migrate": "prisma migrate dev --skip-generate",
    "db:deploy": "prisma migrate deploy"
  }
}

ルートの turbo.json にもこれらのスクリプトを追加しましょう

{
  "tasks": {
    "db:generate": {
      "cache": false
    },
    "db:migrate": {
      "cache": false,
      "persistent": true // This is necessary to interact with the CLI and assign names to your database migrations.
    },
    "db:deploy": {
      "cache": false
    }
  }
}

1. prisma.schema を移行して型を生成する​

プロジェクトのルートに移動し、次のコマンドを実行してデータベースを自動的に移行します

npx turbo db:migrate

2. prisma.schema を生成する​

Prisma スキーマから型を生成するには、プロジェクトのルートから次を実行します

npx turbo db:generate

5. モノレポ全体で使用される Prisma 型と PrismaClient のインスタンスをエクスポートする​

次に、生成された型と PrismaClient のインスタンスをエクスポートして、アプリケーションで使用できるようにします。

packages/database ディレクトリで、src フォルダーを作成し、client.ts ファイルを追加します。このファイルは、PrismaClient のインスタンスを定義します

packages/database/src/client.ts
import { PrismaClient } from "../generated/client";

const globalForPrisma = global as unknown as { prisma: PrismaClient };

export const prisma =
  globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

次に、src フォルダーに index.ts ファイルを作成して、生成された prisma 型と PrismaClient インスタンスを再エクスポートします

packages/database/src/index.ts
export { prisma } from './client' // exports instance of prisma 
export * from "../generated/client" // exports generated types from prisma

ジャストインタイムパッケージングパターンに従い、packages/database/package.json 内にパッケージへのエントリポイントを作成します

{
  "exports": {
    ".": "./src/index.ts"
  } 
}

これらの手順を完了すると、Prisma 型と PrismaClient インスタンスがモノレポ全体でアクセス可能になります。

6. database パッケージをモノレポの web アプリにインポートする​

hello-world プロジェクトには、apps/web に web というアプリが必要です。database 依存関係を apps/web/package.json に追加します

{
  "dependencies": {
    "@repo/db": "*"
  }
}

apps/web ディレクトリ内でパッケージマネージャーのインストールコマンドを実行します

cd apps/web
npm install

web アプリの page.tsx ファイルで、database パッケージからインスタンス化された prisma クライアントをインポートしましょう

import styles from "./page.module.css";
import { prisma } from "@repo/db";

export default async function Home() {
  const user = await prisma.user.findFirst() 
  return (
    <div className={styles.page}>
      {user?.name ?? "No user added yet"}
    </div>
  );
}

次に、web ディレクトリに .env ファイルを作成し、DATABASE_URL を含む database ディレクトリの .env ファイルの内容のコピーを作成します。

DATABASE_URL="Same database url as used in the database directory"
注記

Turborepo セットアップのアプリとパッケージ全体でルートディレクトリに単一の .env ファイルを使用する場合は、dotenvxのようなパッケージの使用を検討してください。

これを実装するには、各パッケージまたはアプリの package.json ファイルを更新して、共有 .env ファイルから必要な環境変数をロードするようにします。詳細な手順については、Turborepo 用の dotenvx ガイドを参照してください。

Turborepo は、モジュール性を高め、潜在的な競合を回避するために、パッケージごとに個別の .env ファイルを使用することを推奨していることに注意してください。

7. 依存タスクをセットアップする​

db:generate および db:deploy スクリプトは、モノレポセットアップ用にまだ最適化されていませんが、dev および build タスクには不可欠です。

新しい開発者が最初に db:generate を実行せずにアプリケーションで turbo dev を実行すると、エラーが発生します。

これを防ぐには、dev または build を実行する前に、db:generate が常に実行されるようにしてください。さらに、db:deploy と db:generate の両方が db:build の前に実行されるようにしてください。turbo.json ファイルでこれを構成する方法を次に示します

{
  "tasks": {
    "dev": {
      "dependsOn": ["^db:generate"],
      "cache": false
      // Additional configuration for dev tasks
    },
    "build": {
      "dependsOn": ["^db:generate"],
      // Additional configuration for build tasks
    }
  }
}

8. プロジェクトを開発で実行する​

警告

開発サーバーを起動する前に、Next.js v15.2.0 を使用している場合は、既知の問題があるため、Turbopack を使用しないでください。apps/web/package.json を更新して、dev スクリプトから Turbopack を削除します

apps/web/package.json
"script":{
    "dev": "next dev --turbopack --port 3000",
    "dev": "next dev --port 3000",
}

次に、プロジェクトのルートからプロジェクトを実行します

npx turbo run dev --filter=web

http://localhost:3000 に移動すると、次のメッセージが表示されます

No user added yet
注記

シードスクリプトを作成するか、Prisma Studio を手動で使用して、データベースにユーザーを追加できます。

Prisma Studio を使用して GUI 経由で手動でデータを追加するには、packages/database ディレクトリに移動し、パッケージマネージャーを使用して prisma studio を実行します

npx prisma studio

このコマンドは、http://localhost:5555 で GUI を備えたサーバーを起動し、データを表示および変更できるようにします。

おめでとうございます。Turborepo 用の Prisma のセットアップが完了しました!


Prisma とのつながりを維持する

以下とつながることで Prisma の旅を続けましょう アクティブなコミュニティ。最新情報を入手し、参加し、他の開発者と協力してください

皆様のご参加を心から歓迎し、コミュニティの一員として皆様をお迎えできることを楽しみにしています!