単一アプリで複数のデータベースを使用する方法

15分

はじめに

このガイドでは、単一のNext.jsアプリでPrisma ORMを使用して複数のデータベースを使用する方法について説明します。ここでは、2つの異なるPrisma Postgresデータベースに接続し、マイグレーションを管理し、アプリケーションをVercelにデプロイする方法を学びます。このアプローチは、マルチテナントアプリケーションや、複数のデータベースへの接続を管理する際に懸念事項を分離する必要がある場合に役立ちます。

前提条件

始める前に、以下を用意してください。

• Node.js 18+ がインストールされていること。
• Prisma Data Platformアカウント。
• Vercelアカウント（アプリケーションをデプロイする場合）。

1. Next.jsプロジェクトのセットアップ

希望するディレクトリからcreate-next-appを使用して新しいNext.jsアプリを作成します。

npx create-next-app@latest my-multi-client-app

プロジェクトに関するいくつかの質問に答えるように求められます。すべてデフォルトを選択してください。

情報

完全を期すために、以下にそれらを挙げます。

• TypeScript
• ESLint
• Tailwind CSS
• srcディレクトリなし
• App Router
• Turbopack
• デフォルトのカスタムインポートエイリアス: @/*

次に、プロジェクトディレクトリに移動します。

cd my-multi-client-app

2. データベースとPrisma Clientのセットアップ

このセクションでは、ユーザーデータ用と投稿データ用の2つの別々のPrisma Postgresインスタンスを作成します。また、それぞれのPrismaスキーマと環境変数を構成します。

まず、Prismaを開発依存関係としてインストールします。

npm install -D prisma

Prisma Client拡張機能をインストールします。これはPrisma Postgresを使用するために必要です。

npm install @prisma/extension-accelerate

情報

Prisma Postgresデータベースを使用していない場合は、@prisma/extension-accelerateパッケージは必要ありません。

これで、プロジェクトに必要な依存関係がインストールされました。

2.1. ユーザーデータを含むPrisma Postgresインスタンスを作成する

Prisma PostgresインスタンスでPrismaを初期化するには、次を実行します。

npx prisma@latest init --db

情報

Prisma Postgresデータベースを使用していない場合は、--dbフラグを使用しないでください。代わりに、2つのPostgreSQLデータベースインスタンスを作成し、それらの接続URLを.envファイルにPPG_USER_DATABASE_URLおよびPPG_POST_DATABASE_URLとして追加します。

プロンプトに従って、プロジェクトに名前を付け、データベースリージョンを選択します。

prisma@latest init --dbコマンドは、

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

prismaフォルダーの名前をprisma-user-databaseに変更します。

mv prisma prisma-user-database

.envファイルを編集して、DATABASE_URLの名前をPPG_USER_DATABASE_URLに変更します。

.env

DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI...
PPG_USER_DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI...

prisma-user-database/schema.prismaファイルを開き、Userモデルを定義するように更新します。また、環境変数を設定し、生成されたPrisma Clientのカスタムoutputディレクトリを指定します。

prisma-user-database/schema.prisma

generator client {
  provider = "prisma-client-js"
  output = "../prisma-user-database/user-database-client-types"
}

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

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

これで、ユーザーデータベーススキーマの準備ができました。

2.2. 投稿データ用のPrisma Postgresインスタンスを作成する

投稿データベースの初期化を繰り返します。

npx prisma init --db

プロンプトに従った後、新しいprismaフォルダーの名前をprisma-post-databaseに変更します。

mv prisma prisma-post-database

.envファイルのDATABASE_URL変数の名前をPPG_POST_DATABASE_URLに変更します。

.env

DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI...
PPG_POST_DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI...

prisma-post-database/schema.prismaファイルを編集して、Postモデルを定義します。また、データソースURLを更新し、カスタムoutputディレクトリを設定します。

prisma-post-database/schema.prisma

generator client {
  provider = "prisma-client-js"
  output = "../prisma-post-database/post-database-client-types"
}

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

model Post {
  id    Int     @id @default(autoincrement())
  title String  
  content  String?
}

これで、投稿データベーススキーマが設定されました。

2.3. ヘルパースクリプトを追加し、スキーマをマイグレーションする

ワークフローを簡素化するために、両方のデータベースのPrismaコマンドを実行するヘルパースクリプトをpackage.jsonファイルに追加します。

package.json

"script":{
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "npx prisma generate --schema ./prisma-user-database/schema.prisma --no-engine && npx prisma generate --schema ./prisma-post-database/schema.prisma --no-engine",
    "generate": "npx prisma generate --schema ./prisma-user-database/schema.prisma --no-engine && npx prisma generate --schema ./prisma-post-database/schema.prisma --no-engine",
    "migrate": "npx prisma migrate dev --schema ./prisma-user-database/schema.prisma && npx prisma migrate dev --schema ./prisma-post-database/schema.prisma",
    "deploy": "npx prisma migrate deploy --schema ./prisma-user-database/schema.prisma && npx prisma migrate deploy --schema ./prisma-post-database/schema.prisma",
    "studio": "npx prisma studio --schema ./prisma-user-database/schema.prisma --port 5555 & npx prisma studio --schema ./prisma-post-database/schema.prisma --port 5556"
}

情報

Prisma Postgresデータベースを使用していない場合は、上記のカスタムスクリプトから--no-engineフラグを削除してください。

カスタムスクリプトの説明は次のとおりです。

• postinstall: 依存関係のインストール直後に実行され、それぞれのスキーマファイルを使用してユーザーデータベースと投稿データベースの両方のPrisma Clientを生成します。
• generate: Prisma Clientの生成を手動でトリガーし、クライアントコードが最新のモデルを反映するようにします。
• migrate: Prisma Migrateを使用して、開発モードで両方のデータベースの保留中のマイグレーションを適用し、Prismaファイルの変更に基づいてスキーマを更新します。
• deploy: 本番環境でマイグレーションを実行し、ライブデータベースをPrismaスキーマと同期させます。
• studio: ユーザーデータベース用のポート（5555）と投稿データベース用のポート（5556）で、Prisma Studioを同時に開き、視覚的なデータ管理を行います。

マイグレーションを実行します。

npm run migrate

プロンプトが表示されたら、それぞれのデータベースのマイグレーションに適切な名前を付けます。

3. 複数のPrisma Clientを使用するようにアプリケーションを準備する

次に、Prisma Clientをインスタンス化してエクスポートするためのヘルパーファイルを格納するlibフォルダーを作成します。

mkdir -p lib && touch lib/user-prisma-client.ts lib/post-prisma-client.ts

3.1. ユーザーデータベース用のPrisma Clientをインスタンス化してエクスポートする

lib/user-prisma-client.tsに、次のコードを追加します。

lib/user-prisma-client.ts

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

const getPrisma = () => new PrismaClient().$extends(withAccelerate());

const globalForUserDBPrismaClient = global as unknown as {
  userDBPrismaClient: ReturnType<typeof getPrisma>;
};

export const userDBPrismaClient =
  globalForUserDBPrismaClient.userDBPrismaClient || getPrisma();

if (process.env.NODE_ENV !== "production")
  globalForUserDBPrismaClient.userDBPrismaClient = userDBPrismaClient;

情報

Prisma Postgresデータベースを使用していない場合は、withAccelerateクライアント拡張機能でPrismaClientを拡張しないでください。

3.2. 投稿データベース用のPrisma Clientをインスタンス化してエクスポートする

lib/post-prisma-client.tsに、このコードを追加します。

lib/post-prisma-client.ts

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

const getPrisma = () => new PrismaClient().$extends(withAccelerate());

const globalForPostDBPrismaClient = global as unknown as {
  postDBPrismaClient: ReturnType<typeof getPrisma>;
};

export const postDBPrismaClient =
  globalForPostDBPrismaClient.postDBPrismaClient || getPrisma();

if (process.env.NODE_ENV !== "production")
  globalForPostDBPrismaClient.postDBPrismaClient = postDBPrismaClient;

情報

Prisma Postgresデータベースを使用していない場合は、withAccelerateクライアント拡張機能でPrismaClientを拡張しないでください。

4. 複数のPrisma ClientをNext.jsアプリに統合する

両方のデータベースからデータを取得するようにアプリケーションコードを変更します。app/page.tsxファイルを次のように更新します。

app/page.tsx

import { postDBPrismaClient } from "@/lib/post-prisma-client";
import { userDBPrismaClient } from "@/lib/user-prisma-client";

export default async function Home() {
  const user = await userDBPrismaClient.user.findFirst();
  const post = await postDBPrismaClient.post.findFirst();

  return (
    <main className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-4xl mx-auto px-4">
        <header className="mb-12 text-center">
          <h1 className="text-5xl font-extrabold text-gray-900">Multi-DB Showcase</h1>
          <p className="mt-4 text-xl text-gray-600">
            Data fetched from two distinct databases.
          </p>
        </header>

        <section className="mb-8 bg-white shadow-md rounded-lg p-6">
          <h2 className="text-2xl font-semibold text-gray-800 border-b pb-2 mb-4">
            User Data
          </h2>
          <pre className="whitespace-pre-wrap text-sm text-gray-700">
            {user ? JSON.stringify(user, null, 2) : "No user data available."}
          </pre>
        </section>

        <section className="bg-white shadow-md rounded-lg p-6">
          <h2 className="text-2xl font-semibold text-gray-800 border-b pb-2 mb-4">
            Post Data
          </h2>
          <pre className="whitespace-pre-wrap text-sm text-gray-700">
            {post ? JSON.stringify(post, null, 2) : "No post data available."}
          </pre>
        </section>
      </div>
    </main>
  );
}

4.1. データベースにデータを投入する

別のターミナルウィンドウで、Prisma Studioの2つのインスタンスを開き、次のスクリプトを実行してデータベースにデータを追加します。

npm run studio

これにより、http://localhost:5555とhttp://localhost:5556に2つのブラウザウィンドウが開きます。これらのウィンドウに移動し、両方のデータベースにサンプルデータを追加します。

4.2. 開発サーバーを実行する

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

package.json

"script":{
    "dev": "next dev --turbopack",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "npx prisma generate --schema ./prisma-user-database/schema.prisma --no-engine && npx prisma generate --schema ./prisma-post-database/schema.prisma --no-engine",
    "generate": "npx prisma generate --schema ./prisma-user-database/schema.prisma --no-engine && npx prisma generate --schema ./prisma-post-database/schema.prisma --no-engine",
    "migrate": "npx prisma migrate dev --schema ./prisma-user-database/schema.prisma && npx prisma migrate dev --schema ./prisma-post-database/schema.prisma",
    "deploy": "npx prisma migrate deploy --schema ./prisma-user-database/schema.prisma && npx prisma migrate deploy --schema ./prisma-post-database/schema.prisma",
    "studio": "npx prisma studio --schema ./prisma-user-database/schema.prisma --port 5555 & npx prisma studio --schema ./prisma-post-database/schema.prisma --port 5556"
}

別のターミナルウィンドウで、次のコマンドを実行して開発サーバーを起動します。

npm run dev

http://localhost:3000に移動して、Next.jsアプリが両方のデータベースからデータを表示することを確認します。

おめでとうございます。2つの異なるデータベースにクエリを実行する2つのPrisma ClientインスタンスでNext.jsアプリが実行されました。

5. 複数のデータベースを使用するNext.jsアプリをVercelにデプロイする

次の手順に従ってアプリをデプロイします。

1. プロジェクトがバージョン管理されており、GitHubリポジトリにプッシュされていることを確認します。まだリポジトリがない場合は、GitHubでリポジトリを作成します。リポジトリの準備ができたら、次のコマンドを実行します。

   git add .
   git commit -m "Initial commit with Prisma Postgres integration"
   git branch -M main
   git remote add origin https://github.com/<your-username>/<repository-name>.git
   git push -u origin main
   注記

   <your-username>と<repository-name>をGitHubのユーザー名とリポジトリの名前に置き換えてください。

2. Vercelにログインし、ダッシュボードに移動します。
3. 新しいプロジェクトを作成します。Vercelの既存のプロジェクトをインポートするガイドに従いますが、デプロイをクリックする前に環境変数を構成するステップ3で停止します。
4. DATABASE_URL環境変数を構成します。
   1. 環境変数セクションを展開します。
   2. PPG_USER_DATABASE_URL環境変数を追加します。
      • キー: PPG_USER_DATABASE_URL
      • 値: ユーザーデータベース接続URLを貼り付けます。たとえば、プロジェクトの.envファイルからコピーします。
   3. PPG_POST_DATABASE_URL環境変数を追加します。
      • キー: PPG_POST_DATABASE_URL
      • 値: 投稿データベース接続URLを貼り付けます。たとえば、プロジェクトの.envファイルからコピーします。
   警告

   環境変数を設定せずにデプロイしないでください。アプリケーションがデータベースに接続できない場合、デプロイは失敗します。

5. デプロイボタンをクリックします。Vercelがプロジェクトをビルドし、ライブURLにデプロイします。

Vercelから提供されたライブURLを開き、アプリケーションが動作していることを確認します。

おめでとうございます！複数のPrisma Clientを使用して2つの異なるデータベースにクエリを実行するアプリケーションをデプロイしました。これで、Vercelでライブかつ完全に運用可能になりました。

次のステップ

このガイドでは、単一のNext.jsアプリでPrisma ORMを使用して複数のデータベースを使用する方法を学びました。

• ユーザーデータベースと投稿データベース用に別々のPrismaスキーマをセットアップする。
• カスタム出力ディレクトリと環境変数を構成する。
• 各スキーマを生成およびマイグレーションするためのヘルパースクリプトを作成する。
• 複数のPrisma Clientをインスタンス化してアプリケーションに統合する。
• マルチデータベースアプリケーションをVercelにデプロイする。

このアプローチにより、データモデルの明確な分離を維持し、マルチテナントシナリオまたはマルチデータベースシナリオを簡素化できます。

プロジェクトの管理をさらに改善するには、モノレポのセットアップを検討してください。関連ガイドをご覧ください。

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

Prismaとのつながりを保つ

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

• Xでフォローしてください お知らせ、ライブイベント、役立つヒントをお届けします。
• Discordに参加してください 質問をしたり、コミュニティと話したり、会話を通じてアクティブなサポートを受けたりできます。
• YouTubeでチャンネル登録してください チュートリアル、デモ、ストリームをご覧ください。
• GitHubでエンゲージしてください リポジトリにスターを付けたり、問題を報告したり、問題に貢献したりできます。

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