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

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

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を使用して、package.jsonにPrismaを開発依存関係として追加します

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パッケージを省略できます。

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にプロンプトが表示されたら、マイグレーションの記述的な名前を入力します。

マイグレーションが成功したら、client.tsファイルを作成して、Accelerate拡張機能でPrisma Clientを初期化します

database/client.ts

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

// Instantiate the extended Prisma client to infer its type
const extendedPrisma = new PrismaClient().$extends(withAccelerate());
type ExtendedPrismaClient = typeof extendedPrisma;

// Use globalThis for broader environment compatibility
const globalForPrisma = globalThis as typeof globalThis & {
  prisma?: ExtendedPrismaClient;
};

// Named export with global memoization
export const prisma: ExtendedPrismaClient =
  globalForPrisma.prisma ?? extendedPrisma;

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = 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/ディレクトリなしのApp Routerと、インストーラーとしてpnpmを使用します）。

さらに、このフラグは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パッケージをアプリコードに統合する

Next.jsアプリケーションコードを修正し、データベースパッケージからPrisma Clientを使用するようにします。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

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

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

まだデータベースにデータがないはずです。CLIでpnpm run studioを実行すると、Prisma Studioがhttps://:5555で起動し、データベースとやり取りしてデータを追加できます。

次のステップ

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

さらに深く掘り下げて設定を強化するには、「TurborepoでPrisma ORMを使用する方法」ガイドを参照してください。

Prismaとつながる

以下の方法でPrismaの旅を続けましょう： 活発なコミュニティに参加しましょう。情報を入手し、関与し、他の開発者と協力してください。

• Xでフォローする アナウンス、ライブイベント、役立つヒントを入手してください。
• Discordに参加する 質問したり、コミュニティと話したり、会話を通じて活発なサポートを受けたりできます。
• YouTubeで購読する チュートリアル、デモ、ストリームを視聴できます。
• GitHubで関与する リポジトリにスターを付けたり、問題を報告したり、問題に貢献したりしてください。

皆様のご参加を心より歓迎し、コミュニティの一員となっていただけることを楽しみにしております！