🪐

Next.jsでPrismaとPlanetScaleを設定する

2022/09/07に公開

Next.js

Prisma

PlanetScale

tech

以下の記事を参考にNext.jsでPrismaとPlanetScaleを設定します。

Prisma: ORM
PlanetScale: サーバーレスDB

事前準備

PlanetScaleのアカウント作成
使用するデータベースの作成
Next.jsでアプリケーションを作成
PlanetScale CLIをインストール

Prismaの設定

Prismaをインストールします。

$ npx prisma init
Need to install the following packages:
  prisma
Ok to proceed? (y) y

✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run npx prisma db pull to turn your database schema into a Prisma schema.
4. Run npx prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started

生成された.envファイルのDATABASE_URLを以下の内容に変更します。

.env

DATABASE_URL="mysql://root@127.0.0.1:3309/YOUR-DB-NAME-HERE"

schema.prismaを以下の内容に変更します。

prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

モデルの作成

今回は参考記事に沿ってモデルを作成します。

prisma/schema.prisma

model Inquiry {
  id      Int   @default(autoincrement()) @id
  name    String
  email   String
  subject String?
  message String
}

ターミナルで新しいタブを開いて以下のコマンドでデータベースに接続します。

$ pscale connect YOUR-DB-NAME-HERE main --port 3309

以下のコマンドでschemaを反映します。

$ npx prisma db push

確認します。

$ pscale shell YOUR-DB-NAME-HERE main
my-app/main> describe Inquiry;
+---------+--------------+------+-----+---------+----------------+
| Field   | Type         | Null | Key | Default | Extra          |
+---------+--------------+------+-----+---------+----------------+
| id      | int          | NO   | PRI | NULL    | auto_increment |
| name    | varchar(191) | NO   |     | NULL    |                |
| email   | varchar(191) | NO   |     | NULL    |                |
| subject | varchar(191) | YES  |     | NULL    |                |
| message | varchar(191) | NO   |     | NULL    |                |
+---------+--------------+------+-----+---------+----------------+
my-app/main>

以上で、PrismaとPlanetScaleの設定を行いました。
実際に運用する時は諸々の配慮が必要になるかもしれませんが、今回はチュートリアルの学習目的のため割愛します。

事前準備

Prismaの設定

モデルの作成

Discussion