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

pnpm ワークスペースモノレポで Prisma ORM を使用する方法

10 分

Prisma はデータベースを管理するための強力な ORM であり、pnpm Workspaces と組み合わせることで、無駄がなくモジュール化されたモノレポアーキテクチャを維持できます。このガイドでは、pnpm Workspaces モノレポ内の独自のパッケージに Prisma をセットアップする方法について説明し、アプリ全体で保守可能な型共有と効率的なデータベース管理を可能にします。

学習内容:​

  • pnpm Workspaces を使用してモノレポを初期化する方法。
  • Prisma をスタンドアロンパッケージとして統合する手順。
  • パッケージ間で Prisma Client を生成および共有する方法。
  • Prisma パッケージをワークスペース内のアプリケーションに統合する。

1. プロジェクトを準備し、pnpm ワークスペースを設定する​

Prisma を統合する前に、プロジェクト構造を設定する必要があります。まず、プロジェクトの新しいディレクトリ (例: my-monorepo) を作成し、Node.js プロジェクトを初期化します。

mkdir my-monorepo
cd my-monorepo
pnpm init

次に、ワークスペース構造を定義し、Prisma のバージョンを固定するために `pnpm-workspace.yaml` ファイルを作成します。

touch pnpm-workspace.yaml

次の構成を `pnpm-workspace.yaml` に追加します。

pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"
catalogs:
  prisma:
    prisma: latest
注

catalogs は、リポジトリ全体で特定のバージョンの prisma を固定するのに役立ちます。詳細については、こちらを参照してください。pnpm-workspace.yaml ファイルで prisma の最新バージョンを明示的にピン留めしてください。執筆時点では、バージョン 6.3.1 です。

最後に、アプリケーションと共有パッケージのディレクトリを作成します。

mkdir apps
mkdir -p packages/database

2. 共有データベースパッケージのセットアップ​

このセクションでは、Prisma を使用するスタンドアロンのデータベースパッケージの作成について説明します。このパッケージには、すべてのデータベースモデルと生成された Prisma Client が含まれており、モノレポ全体で再利用できます。

2.1. パッケージの初期化と依存関係のインストール​

packages/database ディレクトリに移動し、新しいパッケージを初期化します。

cd packages/database
pnpm init

ピン留めされた catalog を使用して、Prisma を開発依存関係として `package.json` に追加します。

database/package.json
"devDependencies": {
  "prisma": "catalog:prisma"
}

次に、Prisma をインストールします。

pnpm install

次に、追加の依存関係を追加します。

pnpm add typescript tsx @types/node -D

次に、Prisma Postgres を使用するために必要な Prisma Client 拡張機能をインストールします。

pnpm add @prisma/extension-accelerate
情報

このガイドでは、Prisma Postgres を使用します。別のデータベースを使用する場合は、@prisma/extension-accelerate package を省略できます。

`database` パッケージの `tsconfig.json` ファイルを初期化します。

pnpm tsc --init

2.2. データベースパッケージに Prisma ORM をセットアップする​

次のコマンドを実行して、database パッケージで Prisma Postgres のインスタンスを使用して Prisma ORM を初期化します。

pnpm prisma init --db

プロジェクトの名前を入力し、データベースリージョンを選択します。

情報

このガイドでは、Prisma Postgres を使用します。Prisma Postgres データベースを使用していない場合は、--db フラグを追加する必要はありません。

このコマンドは

  • CLI をアカウントに接続します。ログインしていない場合、またはアカウントをお持ちでない場合は、ブラウザが開いて、新しいアカウントの作成または既存のアカウントへのサインインをガイドします。
  • データベースモデル用の `schema.prisma` ファイルを含む `prisma` ディレクトリを作成します。
  • `DATABASE_URL` を含む `.env` ファイルを作成します (例: Prisma Postgres の場合、DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI..." のようなものが必要です)。

`schema.prisma` ファイルを編集して、データベースに `User` モデルを定義し、Prisma Client を生成するための カスタム output ディレクトリを指定します。これにより、生成された型が正しく解決されるようになります。

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

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

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

次に、Prisma コマンドを簡素化するために、ヘルパースクリプトを `package.json` に追加します。

database/package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "db:generate": "prisma generate --no-engine",
    "db:migrate": "prisma migrate dev",
    "db:deploy": "prisma migrate deploy",
    "db:studio": "prisma studio"
  }
}
情報

データベースに Prisma Postgres を使用していない場合は、db:generate スクリプトから --no-engine フラグを除外してください。

Prisma Migrate を使用してデータベースの変更を移行します。

pnpm run db:migrate

CLI からプロンプトが表示されたら、移行のわかりやすい名前を入力します。

移行が成功したら、Accelerate 拡張機能で Prisma Client を初期化するための `client.ts` ファイルを作成します。

database/client.ts
import { PrismaClient } from "./generated/client";
import { withAccelerate } from '@prisma/extension-accelerate'

const prisma = new PrismaClient().$extends(withAccelerate())

const globalForPrisma = global as unknown as { prisma: typeof prisma }

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

export { prisma };
情報

データベースに Prisma Postgres を使用していない場合は、import { withAccelerate } 行とそれに続く行の .$extends(withAccelerate()) を除外してください。

次に、Prisma Client のインスタンスとすべての生成された型を再エクスポートするための `index.ts` ファイルを作成します。

database/index.ts
export { prisma } from "./client";
export * from "./generated/client";

この時点で、共有データベースパッケージは完全に構成され、モノレポ全体で使用できるようになります。

3. フロントエンドアプリケーションのセットアップと統合​

データベースパッケージがセットアップされたので、共有 Prisma Client を使用してデータベースと対話するフロントエンドアプリケーション (Next.js を使用) を作成します。

3.1. Next.js アプリケーションのブートストラップ​

`apps` ディレクトリに移動します。

cd ../../apps

`web` という名前の新しい Next.js アプリを作成します。

pnpm create next-app@latest web --yes
重要

--yes フラグは、Next.js アプリをブートストラップするためのデフォルト構成を使用します (このガイドでは、src/ ディレクトリとインストーラーとして pnpm を使用しない app router を使用します)。

さらに、このフラグは、web フォルダーに Git リポジトリを自動的に初期化する場合があります。その場合は、rm -r .git を実行して .git ディレクトリを削除してください。

次に、web ディレクトリに移動します。

cd web/

同じ環境変数が利用可能であることを確認するために、データベースパッケージから `.env` ファイルをコピーします。

cp ../../packages/database/.env .

Next.js アプリの `package.json` ファイルを開き、共有 database パッケージを依存関係として追加します。

web/package.json
"dependencies": {
  "database": "workspace:*",
  // additional dependencies
  // ...
}

次のコマンドを実行して、database パッケージをインストールします。

pnpm install

3.2. 共有 database パッケージをアプリコードに統合する​

データベースパッケージから Prisma Client を使用するように Next.js アプリケーションコードを変更します。`app/page.tsx` を次のように更新します。

app/page.tsx
import { prisma } from "database";

export default async function Home() {
  const user = await prisma.user.findFirst({
    select: {
      name: true
    }
  })

  return (
    <div>
      {user?.name && <p>Hello from {user.name}</p>}
      {!user?.name && <p>No user has been added to the database yet. </p>}
    </div>
  );
}

このコードは、共有 Prisma Client をインポートして使用し、User モデルをクエリする方法を示しています。

3.3. ヘルパースクリプトを追加してアプリケーションを実行する​

モノレポのルート `package.json` に次のスクリプトを追加します。これらは、データベースの移行、型生成、およびアプリのビルドが適切な順序で実行されるようにします。

"scripts": {
  "build": "pnpm --filter database db:deploy && pnpm --filter database db:generate  && pnpm --filter web build",
  "start": "pnpm --filter web start",
  "dev": "pnpm --filter database db:generate && pnpm --filter web dev",
  "studio": "pnpm --filter database db:studio"
}

3.4. アプリケーションを実行する​

次に、モノレポのルートに戻ります。

cd ../../

次を実行して開発サーバーを起動します。

pnpm run dev

ブラウザで http://localhost:3000 を開き、アプリが動作していることを確認します。

3.5. (オプション) Prisma Studio を使用してデータベースにデータを追加する​

まだデータベースにデータがないはずです。CLI で pnpm run studio を実行して、Prisma Studio を http://localhost:5555 で起動し、データベースを操作してデータを追加できます。

次のステップ​

これで、Prisma ORM を効果的に使用するモノレポを作成し、共有データベースパッケージを Next.js アプリケーションに統合しました。

さらに深く掘り下げてセットアップを強化するには、Prisma ORM を Turborepo で使用する方法ガイドを読むことを検討してください。


Prisma とのつながりを保つ

とつながって、Prisma の旅を続けましょう アクティブなコミュニティ。常に情報を入手し、参加し、他の開発者と協力しましょう。

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