Netlify

概要

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

機能

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

使用方法

拡張機能をインストールする

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

Prisma Platform連携トークンをNetlifyチームに追加する

NetlifyチームをPrisma Platformワークスペースに接続するには、次の手順を1回実行します

ログインしてください.
Netlifyに接続するワークスペースを選択します。
左側のサイドバーにある連携メニューに移動します。
プロンプトに従って、新しいNetlify連携トークンを作成し、トークン値をコピーします。
上記の連携トークンフィールドにトークンを貼り付けます。ワークスペースIDが自動的に入力されます。
保存をクリックして、設定を完了します。

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

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

Prisma Postgresを使用するすべてのNetlifyサイトに対して、次の手順を実行します

Netlifyのサイトビューに移動し、拡張機能セクションの下にあるPrisma Postgresをクリックします。
プロジェクトセレクターから、Netlifyサイトに接続するPrismaプロジェクトを選択します。
本番環境の環境を構成します。
プレビュー環境の環境を構成します。
保存をクリックして、サイトの設定を完了します。
拡張機能は、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チームで、テンプレートを使用して新しいサイトを作成します

左側のサイドナビでサイトを選択します。
新しいサイトを追加ボタンをクリックします。
ドロップダウンで、テンプレートから開始を選択します。
Next.js Platform Starterを選択します。
プロンプトに従って、このテンプレートをGitプロバイダーにクローンします。
サイト名を入力し、サイトをデプロイボタンをクリックします。

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

2. Prisma Postgresインスタンスを設定する

次に、Prisma Postgresインスタンスを設定します

にログインしてコンソールを開きます。
任意のワークスペースで、新しいプロジェクトボタンをクリックします。
名前フィールドにプロジェクトの名前を入力します（例：hello-ppg）。
Prisma Postgresセクションで、開始するボタンをクリックします。
リージョンドロップダウンで、現在の場所に最も近いリージョンを選択します（例：米国東部（バージニア北部））。
プロジェクトを作成ボタンをクリックします。
DATABASE_URL環境変数を保存します。次のセクションで必要になります。

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

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

3.1. Prisma ORMを設定する

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

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

新しく作成された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
}

新しく作成された.envファイルを開き、前のセクションのDATABASE_URL環境変数を貼り付けます。
最初のマイグレーションを実行して、Userモデルをデータベースにマッピングします
```
npx prisma migrate dev --name init
```
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サイトに追加する必要があります。これを行うには、上記の使用方法セクションの手順に従ってください。

これらの手順を完了したら、デプロイをトリガーボタンを見つけて、ドロップダウンでキャッシュをクリアしてサイトをデプロイを選択します。

5. デプロイを検証する

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

概要​

機能​

使用方法​

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

Prisma Platform連携トークンをNetlifyチームに追加する​

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

追加の考慮事項​

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

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

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

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

2. Prisma Postgresインスタンスを設定する​

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

3.1. Prisma ORMを設定する​

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

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

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

4. Prisma Postgres用のNetlify拡張機能を構成する​

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

概要

機能