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

Netlify

Prisma Postgres用Netlify拡張機能は、NetlifyサイトをPrisma Postgresインスタンスに接続します。接続されると、拡張機能はデプロイされたNetlifyサイト上でDATABASE_URL環境変数を自動的に設定します。

機能​

  • 本番環境およびプレビュー環境用のPrisma Postgres APIキーを自動生成。
  • Netlifyサイトの環境設定を簡素化。

使い方​

拡張機能をインストール​

拡張機能をインストールするには、Prisma Postgres拡張機能ページの上部にあるInstallをクリックします。

Prisma Platformインテグレーション・トークンをNetlifyチームに追加する​

NetlifyチームをPrisma Platformワークスペースに接続するには、以下の手順を一度だけ実行します

  1. あなたの.
  2. Netlifyに接続したいワークスペースを選択します。
  3. 左側のサイドバーでIntegrationsメニューに移動します。
  4. プロンプトに従って新しいNetlifyインテグレーション・トークンを作成し、トークンの値をコピーします。
  5. 上記のIntegration Tokenフィールドにトークンを貼り付けます。ワークスペースIDは自動的に入力されます。
  6. Saveをクリックしてセットアップを完了します。

このセットアップが完了すると、NetlifyチームがPrismaワークスペースに接続されます。これで、個々のNetlifyサイトをPrisma Postgresを使用するように設定できます。

NetlifyサイトにPrisma Postgresを追加する​

Prisma Postgresを使用したいすべてのNetlifyサイトに対して以下の手順を実行します

  1. Netlifyでサイトビューに移動し、Extensionsセクションの下にあるPrisma Postgresをクリックします。
  2. Projectセレクターから、Netlifyサイトに接続したいPrismaプロジェクトを選択します。
  3. 本番環境の環境を設定します。
  4. プレビュー環境の環境を設定します。
  5. Saveをクリックしてサイトのセットアップを完了します。
  6. 拡張機能は、Prisma Postgresインスタンスを自動的に作成し、その接続URLをDATABASE_URL環境変数に保存します。

追加の考慮事項​

プロジェクトでDATABASE_URL環境変数を使用していることを確認する​

schema.prismaファイルのデータソースがDATABASE_URL環境変数を使用するように設定されていることを確認してください

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

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

package.jsonのpostinstallスクリプトでPrisma Clientを生成する​

生成されたPrisma ClientライブラリがデプロイされたNetlifyサイトで利用できるようにするには、package.jsonファイルのscriptsセクションにpostinstallスクリプトを追加する必要があります。

package.json
{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate --no-engine"
  }
  //
}

--no-engineフラグは、クエリエンジンバイナリが生成されたPrisma Clientライブラリに含まれないようにします。Prisma Postgresを使用する場合は必要ありません。

例: Prisma PostgresでNext.jsテンプレートをデプロイする​

このセクションには、Netlifyの公式Next.js Platform Starterテンプレートを使用して、Netlifyサイトをゼロからデプロイし、Prisma Postgresに接続する手順が示されています。

1. テンプレートを使用して新しいサイトを作成する​

Netlifyチームで、テンプレートを使用して新しいサイトを作成します。

  1. 左側のサイドナビでSitesを選択します。
  2. Add new siteボタンをクリックします。
  3. ドロップダウンでStart from a templateを選択します。
  4. Next.js Platform Starterを選択します。
  5. プロンプトに従ってこのテンプレートをGitプロバイダーにクローンする。
  6. サイト名を入力し、Deploy siteボタンをクリックします。

これが完了すると、このスタータープロジェクトのデプロイ済みバージョンにアクセスできるようになります。

2. Prisma Postgresインスタンスをセットアップする​

次に、Prisma Postgresインスタンスをセットアップします。

  1. ログインしてコンソールを開きます。
  2. 選択したワークスペースで、New projectボタンをクリックします。
  3. Nameフィールドにプロジェクトの名前を入力します（例：hello-ppg）。
  4. Prisma Postgresセクションで、Get startedボタンをクリックします。
  5. Regionドロップダウンで、現在の場所から最も近いリージョンを選択します（例：US East (N. Virginia)）。
  6. Create projectボタンをクリックします。
  7. DATABASE_URL環境変数を保存します。これは次のセクションで必要になります。

3. ローカルでPrisma Postgresをプロジェクトに追加する​

このセクションでは、Prisma Postgresをスタータープロジェクトにローカルマシンで追加します。

3.1. Prisma ORMをセットアップする​

  1. ステップ1でGitHubアカウントに追加されたNext.js Platform Starterリポジトリをクローンします。
  2. プロジェクトディレクトリに移動します（例：cd next-platform-starter）。
  3. Prisma CLIを開発依存関係としてインストールします。 
    npm install prisma --save-dev
  4. Prisma ORMを初期化してPrismaスキーマと.envファイルを作成します。 
    npx prisma init

3.2. マイグレーションを実行し、サンプルデータを作成する​

  1. 新しく作成されたschema.prismaファイルを開き、以下のモデルを追加します。
    schema.prisma
    generator client {
      provider = "prisma-client-js"
    }

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

    model User {
      id    Int     @id @default(autoincrement())
      name  String?
      email String  @unique
    }
  2. 新しく作成された.envファイルを開き、前のセクションのDATABASE_URL環境変数を貼り付けます。
  3. Userモデルをデータベースにマッピングするために、最初のマイグレーションを実行します。 
    npx prisma migrate dev --name init
  4. Prisma Studioを使用して、データベースに（少なくとも）1つのUserレコードを作成します。 
    npx prisma studio

3.3. アプリケーションコードを更新してUserレコードをクエリして表示する​

app/page.jsxファイルを開き、その内容全体をこのコードに置き換えます。

app/page.jsx
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient();

export default async function Page() {
  const users = await prisma.user.findMany();

  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold mb-4">Users</h1>
      <ul className="space-y-2">
        {users.length > 0 ? (
          users.map(user => (
            <li key={user.id} className="p-4 border rounded shadow-sm">
              <p><strong>ID:</strong> {user.id}</p>
              <p><strong>Name:</strong> {user.name || 'N/A'}</p>
              <p><strong>Email:</strong> {user.email}</p>
            </li>
          ))
        ) : (
          <p>No users found.</p>
        )}
      </ul>
    </main>
  );
}

このコードを配置したら、ローカルでアプリケーションを実行できます。

npm run dev

前のステップで作成したUserレコードのリストが表示されるはずです。

3.4. postinstallスクリプトを追加してPrisma Clientを生成する​

上記で述べたように、Prisma Clientライブラリが適切に生成されるように、package.jsonにpostinstallスクリプトを追加する必要があります。

package.json
{
    "name": "next-netlify-platform-starter",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "postinstall": "prisma generate --no-engine"
    },
    "dependencies": {
        "@netlify/blobs": "^8.1.0",
        "@prisma/client": "^6.3.0",
        "@prisma/extension-accelerate": "^1.2.1",
        "blobshape": "^1.0.0",
        "bright": "^0.8.5",
        "markdown-to-jsx": "^7.4.5",
        "next": "15.1.6",
        "react": "18.3.1",
        "react-dom": "18.3.1",
        "unique-names-generator": "^4.7.1"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.18",
        "daisyui": "^4.12.8",
        "eslint": "8.57.1",
        "eslint-config-next": "15.1.6",
        "postcss": "^8.4.36",
        "prisma": "^6.3.0",
        "tailwindcss": "^3.4.1"
    }
}

4. Prisma Postgres用Netlify拡張機能を設定する​

このセクションでは、NetlifyサイトにNetlify拡張機能を追加する必要があります。使い方のセクションにある指示に従って実行してください。

これらの手順を完了したら、Trigger deployボタンを見つけ、ドロップダウンでClear cache and deploy siteを選択します。

5. デプロイを検証する​

Open production deployボタンをクリックして、デプロイされたサイトを開きます。これで、ステップ3の最後にアプリをローカルで実行したときと同じUIが表示されるはずです。

© . All rights reserved.