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

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

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クライアントをセットアップする​

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

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

npm install -D prisma

Prisma Postgresを使用するために必要なPrismaクライアント拡張をインストールします。

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クライアントのカスタム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クライアントを生成します。
  • generate: 両方のスキーマのPrismaクライアントの生成を手動でトリガーし、クライアントコードが最新のモデルを反映していることを保証します。
  • migrate: Prisma Migrateを使用して、開発モードで両方のデータベースに保留中のマイグレーションを適用し、Prismaファイルの変更に基づいてスキーマを更新します。
  • deploy: 本番環境でマイグレーションを実行し、ライブデータベースをPrismaスキーマと同期させます。
  • studio: 両方のデータベースのPrisma Studioを異なるポート（ユーザーデータベースは5555、投稿データベースは5556）で同時に開き、視覚的なデータ管理を可能にします。

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

npm run migrate

プロンプトが表示されたら、各データベースのマイグレーションに適切に名前を付けてください。

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

次に、Prismaクライアントのインスタンス化とエクスポートのためのヘルパーファイルを保存するlibフォルダを作成します。

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

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

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クライアントをインスタンス化してエクスポートする​

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. Next.jsアプリで複数のPrismaクライアントを統合する​

両方のデータベースからデータを取得するようにアプリケーションコードを変更します。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

これにより、https://:5555とhttps://: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

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

App displaying data by querying two separate database instances

おめでとうございます！2つのPrismaクライアントインスタンスが異なるデータベースにクエリを実行する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
      • 値: プロジェクトの.envファイルからコピーするなどして、ユーザーデータベースの接続URLを貼り付けます。
    3. PPG_POST_DATABASE_URL環境変数を追加します。
      • キー: PPG_POST_DATABASE_URL
      • 値: プロジェクトの.envファイルからコピーするなどして、投稿データベースの接続URLを貼り付けます。
    警告

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

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

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

おめでとうございます！2つの異なるデータベースにクエリを実行するために複数のPrismaクライアントを使用するアプリケーションをデプロイし、Vercelでライブ稼働中になりました。

次のステップ​

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

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

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

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


Prismaとつながる

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

  • Xでフォローする お知らせ、ライブイベント、役立つヒントについては、。
  • Discordに参加する 質問したり、コミュニティと話したり、会話を通じて活発なサポートを受けたりできます。
  • YouTubeで購読する チュートリアル、デモ、ストリームについては、。
  • GitHubで関わる リポジトリにスターを付けたり、問題を報告したり、問題に貢献したりして。
私たちは皆様の参加を心から歓迎し、コミュニティの一員となっていただくことを楽しみにしています！

© . All rights reserved.