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

NuxtでPrisma ORMを使用する方法

10分

このガイドでは、Nuxtアプリケーションをセットアップし、Prisma PostgresをPrisma Nuxtモジュールを使用して構成し、本番環境用にプロジェクトをVercelにデプロイする方法を説明します。

学習内容

  • Prisma NuxtモジュールでNuxtプロジェクトをセットアップする方法。
  • NuxtアプリでPrisma Nuxtモジュールを使ってPrisma Postgresを構成し、使用する方法。
  • プロジェクトをVercelにデプロイする方法。

前提条件​

このガイドに従うには、以下が必要です。

1. 新しいNuxtプロジェクトを作成し、Prisma Nuxtモジュールをセットアップする​

  1. 新しいNuxtプロジェクトを初期化し、パッケージマネージャーとしてnpmを選択し、gitを初期化します。

    npm create nuxt hello-world
    注

    @prisma/nuxtモジュールでは、npmを使用することを推奨します。これは最も安定したオプションです。

  2. プロジェクトディレクトリに移動し、@prisma/nuxtモジュールをインストールします。

    cd hello-world
    npm i @prisma/nuxt

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

    npm i @prisma/extension-accelerate

  4. 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をセットアップする​

PrismaモジュールでNuxtプロジェクトを構成した後、次のステップはPrisma ORMをセットアップすることです。このプロセスは、開発サーバーを起動することから始まり、自動的にSQLiteデータベースでPrismaを構成します。

開発サーバーを起動するために、以下のコマンドを実行します。

npm run dev

このコマンドを実行すると、Prisma Migrateでデータベースのマイグレーションを実行するよう求められます。

? Do you want to migrate database changes to your database? › (Y/n)

キーボードのYを押して、データベースをマイグレートし、初期テーブルを作成することを確認します。

セットアップフローが終了すると、以下が実行されます。

  1. Prisma CLIがインストールされます。
  2. SQLiteデータベースでPrismaプロジェクトが初期化されます。
  3. 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
    }
  4. 前のステップで作成されたUserおよびPostモデルのデータベーステーブルが作成されます。
    注

    migrationsフォルダがない場合、モジュールを最初に起動したときにデータベースが自動的にマイグレートされます。その後、スキーマの変更を適用するには、CLIでnpx prisma migrate devを手動で実行する必要があります。npx prisma migrate devコマンドを手動で実行することで、マイグレーションの管理がより簡単かつ安全になり、マイグレーション関連のエラーのトラブルシューティングも容易になります。

  5. データベースをクエリできるPrisma Clientがインストールされ、生成されます。
  6. Prisma Studioがインストールされます。

Prismaのセットアップが完了すると、開発サーバーはhttps://:3000で起動するはずです。

次に、いくつかのコード変更を行う必要があるため、サーバーを停止します。

4. アプリケーションコードを更新する​

Prismaが構成されたので、次のステップはデータベースからデータをフェッチして表示するようにアプリケーションコードを更新することです。

  1. プロジェクトのルートディレクトリに、componentsという名前のフォルダを作成します。

  2. 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>
    注

    usePrismaClient()コンポーザブルをwithAccelerate()拡張メソッドで拡張し、Prisma Postgresとの互換性を確保しています。この拡張により、クエリをキャッシュすることも可能になります。

  3. Nuxt Islandsを使用して新しいサーバーコンポーネントを含めるように、ルートディレクトリのapp.vueファイルを変更します。

    app.vue
    <template>
      <div>
        <NuxtIsland name="User"></NuxtIsland>
      </div>
    </template>

  4. 開発サーバーを再度起動するために、以下のコマンドを実行します。

    npm run dev

  5. ブラウザでhttps://:3000にアプリケーションを開き、アプリケーションコードが動作していることを確認します。
    データベースにユーザーがまだいないため、アプリケーションは以下を表示します。

    No user has been added yet.

    このメッセージは、ユーザーがデータベースに追加されると動的に更新されます。

これらの手順を完了すると、アプリケーションはPrismaデータベースからデータをフェッチし、フロントエンドにレンダリングできるようになります。

5. Prisma Postgresインスタンスを作成する​

アプリのデータを保存するために、Prisma Data Platformを使用して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ボタンをクリックします。

この時点で、Databaseページにリダイレクトされ、データベースのステータスがPROVISIONINGからCONNECTEDに変わるまで数秒待つ必要があります。

緑色のCONNECTEDラベルが表示されたら、データベースを使用する準備ができています！

次に、Set up database accessセクションでデータベース認証情報を見つけ、DATABASE_URL環境変数をコピーします。

DATABASE_URL=<your-database-url>

DATABASE_URL環境変数は、次のステップで必要になります。

6. NuxtアプリでPrisma Postgresをセットアップする​

Prisma Postgresインスタンスの準備ができたので、このデータベースを使用するようにNuxtアプリケーションを更新します。

  1. 既存のDATABASE_URLの値を以前にコピーしたものに置き換えて、.envファイルを更新します。以下のようになります。

    .env
    DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"

  2. prismaフォルダにあるschema.prismaファイルのdatasourceブロックでデータベースプロバイダーを変更して、schema.prismaファイルを修正します。

    prisma/schema.prisma
    datasource db {
     provider = "postgresql"
     url      = env("DATABASE_URL")
    }

  3. prismaディレクトリにあるSQLiteデータベースファイル（dev.dbとdev.db-journal）およびmigrationsフォルダをすべて削除します。これにより、既存のSQLite設定がクリーンアップされ、プロジェクトがPostgreSQLにマイグレートする準備が整います。

  4. prisma migrateコマンドを実行して、Postgresデータベースの新しいマイグレーションを手動で作成します。

    npx prisma migrate dev --name init

  5. 開発サーバーを再度起動します。

    npm run dev

  6. Nuxt DevTools（Shift+Option+Dを押す）を開き、左サイドナビのPrismaロゴをクリックしてPrisma Studioを開きます。次に、nameとemailフィールドの値を指定して、新しいUserレコードを追加します。

  7. https://:3000でアプリケーションを更新し、アプリケーション内のデータを確認します。Prisma Studioで追加したユーザーの名前が表示されるはずです。例えば、Jonというユーザーを追加した場合、ブラウザにJonが表示されます。

おめでとうございます。あなたのNuxtアプリはPrisma Postgresと完全に統合されました！

7. Vercelにデプロイする​

以下の手順に従って、Prisma Postgres統合を伴うNuxtアプリケーションを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の既存プロジェクトのインポートガイドに従いますが、Deployをクリックする前に環境変数を設定するステップ3で停止してください。
  4. DATABASE_URL環境変数を設定します
    1. Environment variablesセクションを展開します。
    2. DATABASE_URL環境変数を追加します
      • キー: DATABASE_URL
      • 値: Prisma Postgres接続URLを貼り付けます（例：Nuxtプロジェクトの.envファイルからコピー）。
      警告

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

  5. Deployボタンをクリックします。Vercelはプロジェクトをビルドし、ライブURLにデプロイします。
  6. Vercelが提供するライブURLを開き、アプリケーションが動作していることを確認します。
    • Prisma Studioでユーザーを追加した場合、ライブサイトにその名前が表示されるはずです。
    • ユーザーが存在しない場合、アプリケーションは以下を表示します。 
      No user has been added yet.
  7. データを追加または管理するには
    1. Prisma Data Platformまたはローカルインスタンスを介してPrisma Studioを開きます。
    2. データベース内のユーザーデータを追加または更新します。
    3. ライブサイトを更新して変更を確認します。

おめでとうございます！Prisma Postgresが統合されたNuxtアプリケーションがVercelで稼働し、完全に動作しています。

考慮事項​

このガイドは、Nuxtモジュールを使用してPrisma Postgresを始めるのに役立ちます。Nuxtモジュールは活発に進化しているため、Prismaのすべての機能や、すべてのエッジケースをカバーしているわけではありません。より高度な機能やエッジデプロイメントには、Prismaを直接使用することを検討してください。


Prismaとつながる

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

  • Xでフォローする お知らせ、ライブイベント、役立つヒントをお届けします。
  • Discordに参加する 質問したり、コミュニティと話したり、会話を通じて積極的にサポートを受けたりできます。
  • YouTubeで購読する チュートリアル、デモ、ストリームをお届けします。
  • GitHubに参加する リポジトリにスターを付けたり、問題を報告したり、問題に貢献したりして、関与しましょう。
皆様のご参加を心より歓迎し、コミュニティの一員としてお迎えできることを楽しみにしております！

© . All rights reserved.