Nuxt で Prisma ORM を使用する方法
Prisma Nuxt モジュールは、初期設定プロセスを簡素化することで、Nuxt で Prisma を使い始めるのに役立ちます。このガイドでは、Nuxt アプリケーションをセットアップし、Prisma Nuxt モジュールを使用して Prisma Postgres を構成し、プロジェクトを本番環境向けに Vercel にデプロイする方法について説明します。
学習内容
- Prisma Nuxt モジュールを使用して Nuxt プロジェクトをセットアップする方法。
- Nuxt アプリケーションで Prisma Nuxt モジュールを使用して Prisma Postgres を構成および使用する方法。
- プロジェクトを Vercel にデプロイする方法。
前提条件
このガイドに従うには、以下が必要です。
- Node.js バージョン: Prisma 6 に必要な 互換性のある Node.js バージョン。
- アカウント
- Git と Vercel デプロイに関する基本的な知識 (役立ちますが必須ではありません)。
1. 新しい Nuxt プロジェクトを作成し、Prisma Nuxt モジュールをセットアップする
-
新しい Nuxt プロジェクトを初期化し、パッケージマネージャーとして
npmを選択し、git を初期化します。npm create nuxt hello-world注意@prisma/nuxtモジュールでは、npmが最も安定したオプションであるため、npmを使用することをお勧めします。 -
プロジェクトディレクトリに移動し、
@prisma/nuxtモジュールをインストールします。cd hello-world
npm i @prisma/nuxt -
Prisma Accelerate クライアント拡張機能 をインストールします。これは Prisma Postgres を使用するために必要です。
npm i @prisma/extension-accelerate -
nuxt.config.tsファイルに次の構成で@prisma/nuxtモジュールを追加します。// https://nuxt.dokyumento.jp/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-11-01",
modules: ["@prisma/nuxt"],
experimental: {
componentIslands: true,
},
devtools: { enabled: true },
});
2. ローカルで開発サーバーを実行して Prisma ORM をセットアップする
Nuxt プロジェクトを Prisma モジュールで構成したら、次のステップは Prisma ORM をセットアップすることです。このプロセスは、開発サーバーを起動することから始まり、これは SQLite データベースで Prisma を自動的に構成します。
次のコマンドを実行して開発サーバーを起動します。
npm run dev
このコマンドを実行すると、Prisma Migrate を使用してデータベース移行を実行するように求められます。
? Do you want to migrate database changes to your database? › (Y/n)
Y キーを押して、データベースを移行し、初期テーブルを作成することを確認します。
セットアップフローが終了すると、次の処理が行われます。
- Prisma CLI をインストールしました。
- SQLite データベースで Prisma プロジェクトを初期化しました。
schema.prismaファイルにサンプルのUserモデルとPostモデルを作成しました。prisma/schema.prisma// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
}- 前のステップの
UserモデルとPostモデルのデータベーステーブルを作成しました。注意migrationsフォルダがない場合、モジュールを最初に起動するときにデータベースは自動的に移行されます。その後、スキーマの変更を適用するには、CLI でnpx prisma migrate devを手動で実行する必要があります。npx prisma migrate devコマンドを手動で実行すると、移行の管理が容易かつ安全になり、移行関連のエラーを トラブルシューティング するのも容易になります。 - DB のクエリを可能にする Prisma Client をインストールして生成しました。
- Prisma Studio をインストールしました。
Prisma のセットアップが完了すると、開発サーバーが https://localhost:3000 で起動します。
次に、コードを変更する必要があるため、サーバーを停止します。
4. アプリケーションコードを更新する
Prisma を構成したら、次のステップは、データベースからデータを取得して表示するようにアプリケーションコードを更新することです。
-
プロジェクトのルートディレクトリに、
componentsという名前のフォルダを作成します。 -
componentsフォルダ内に、User.server.vueという名前のファイルを作成します。このサーバーコンポーネントは、データベースから最初のユーザーの名前を取得して表示します。components/User.server.vue<script setup>
import { withAccelerate } from "@prisma/extension-accelerate";
const prisma = usePrismaClient().$extends(withAccelerate());
const user = await prisma.user.findFirst();
</script>
<template>
<p>{{ user?.name ?? "No user has been added yet." }}</p>
</template>注意Prisma Postgres との互換性を確保するために、
withAccelerate()拡張メソッドでusePrismaClient()コンポーザブルを拡張しています。この拡張機能により、クエリをキャッシュすることもできます。 -
Nuxt Islands を使用して新しいサーバーコンポーネントを含めるように、ルートディレクトリにある
app.vueファイルを変更します。app.vue<template>
<div>
<NuxtIsland name="User"></NuxtIsland>
</div>
</template> -
次のコマンドを実行して、開発サーバーを再度起動します。
npm run dev -
https://localhost:3000のブラウザでアプリケーションを開いて、アプリケーションコードが動作していることを確認します。
データベースにはまだユーザーがいないため、アプリケーションには次のように表示されます。No user has been added yet.このメッセージは、ユーザーがデータベースに追加されると動的に更新されます。
これらの手順を完了すると、アプリケーションは Prisma データベースからデータを取得し、フロントエンドにレンダリングできるようになります。
5. Prisma Postgres インスタンスを作成する
アプリケーションのデータを保存するには、Prisma Data Platform を使用して Prisma Postgres データベースインスタンスを作成します。
Prisma Postgres データベースを作成するには、次の手順に従います。
- 以下にログインします。コンソールを開きます。
- 任意の ワークスペース で、新しいプロジェクト ボタンをクリックします。
- 名前 フィールドにプロジェクトの名前を入力します (例: hello-ppg)。
- Prisma Postgres セクションで、開始する ボタンをクリックします。
- リージョン ドロップダウンで、現在地から最も近いリージョンを選択します (例: 米国東部 (バージニア北部))。
- プロジェクトを作成 ボタンをクリックします。
この時点で、データベース ページにリダイレクトされ、データベースのステータスが PROVISIONING から CONNECTED に変わるまで数秒待つ必要があります。
緑色の CONNECTED ラベルが表示されたら、データベースを使用する準備が完了です!
次に、データベースアクセスの設定 セクションでデータベースの認証情報を探し、DATABASE_URL 環境変数をコピーします。
DATABASE_URL=<your-database-url>
DATABASE_URL 環境変数は、次のステップで必要になります。
6. Nuxt アプリケーションで Prisma Postgres をセットアップする
Prisma Postgres インスタンスの準備ができたので、このデータベースを使用するように Nuxt アプリケーションを更新します。
-
以前にコピーした値で既存の
DATABASE_URL値を置き換えて、.envファイルを更新します。次のようになります。.envDATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY" -
prismaフォルダにあるschema.prismaファイルのdatasourceブロックで、データベースプロバイダーを変更してschema.prismaファイルを変更します。prisma/schema.prismadatasource db {
provider = "postgresql"
url = env("DATABASE_URL")
} -
prismaディレクトリにある SQLite データベースファイル (dev.dbおよびdev.db-journal) をmigrationsフォルダと一緒に削除します。これにより、既存の SQLite セットアップがクリーンアップされ、PostgreSQL への移行の準備が整います。 -
prisma migrateコマンドを実行して、Postgres データベースの新しい移行を手動で作成します。npx prisma migrate dev --name init -
開発サーバーを再度起動します。
npm run dev -
Nuxt DevTools (Shift+Option+ D を押して開きます) を開き、左側のサイドナビにある Prisma ロゴをクリックして Prisma Studio を開きます。次に、
nameフィールドとemailフィールドの値を指定して、新しいUserレコードを追加します。 -
https://localhost:3000でアプリケーションを更新して、アプリケーションのデータを確認します。ページには、Prisma Studio で追加したユーザーの名前が表示されるはずです。たとえば、Jonという名前のユーザーを追加した場合、アプリケーションにはブラウザにJonが表示されます。
おめでとうございます。Nuxt アプリケーションが Prisma Postgres と完全に統合されました!
7. Vercel にデプロイする
次の手順に従って、Prisma Postgres 統合を使用して Nuxt アプリケーションを Vercel にデプロイします。
- プロジェクトがバージョン管理され、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 のユーザー名とリポジトリの名前に置き換えます。 - Vercel にログインし、ダッシュボード に移動します。
- 新しいプロジェクトを作成します。Vercel の 既存のプロジェクトをインポートする ガイドに従いますが、デプロイ をクリックする前に環境変数を構成する ステップ 3 で停止します。
DATABASE_URL環境変数を構成します。- 環境変数 セクションを展開します。
DATABASE_URL環境変数を追加します。- キー:
DATABASE_URL - 値: Prisma Postgres 接続 URL を貼り付けます。たとえば、Nuxt プロジェクトの
.envファイルからコピーします。
警告DATABASE_URL変数を設定せずにデプロイしないでください。アプリケーションがデータベースに接続できない場合、デプロイは失敗します。- キー:
- デプロイ ボタンをクリックします。Vercel はプロジェクトをビルドし、ライブ URL にデプロイします。
- Vercel から提供されたライブ URL を開き、アプリケーションが動作していることを確認します。
- Prisma Studio でユーザーを追加した場合、ライブサイトにその名前が表示されるはずです。
- ユーザーが存在しない場合、アプリケーションには次のように表示されます。
No user has been added yet.
- データを追加または管理するには
- Prisma Data Platform またはローカルインスタンスを介して Prisma Studio を開きます。
- データベースにユーザーデータを追加または更新します。
- ライブサイトを更新して変更を確認します。
おめでとうございます! Prisma Postgres 統合を備えた Nuxt アプリケーションがライブになり、Vercel で完全に動作するようになりました。
考慮事項
このガイドは、Nuxt モジュールを使用して Prisma Postgres を使い始めるのに役立ちます。Nuxt モジュールは積極的に進化しているため、Prisma のすべての機能を網羅しているわけではなく、すべてのエッジケースをサポートしているわけではありません。より高度な機能やエッジデプロイメントについては、Prisma を直接使用することを検討してください。
Prisma とのつながりを保つ
以下とつながることで、Prisma の旅を続けましょう。 活発なコミュニティ。最新情報を入手し、参加し、他の開発者と協力しましょう。
- X でフォローしてください お知らせ、ライブイベント、役立つヒントをご覧ください。
- Discord に参加してください 質問をしたり、コミュニティと話したり、会話を通じて積極的なサポートを受けたりできます。
- YouTube でチャンネル登録 チュートリアル、デモ、ストリームをご覧ください。
- GitHub でエンゲージ リポジトリにスターを付けたり、問題を報告したり、問題に貢献したりします。