🚀

【Docker】Docker & MySQL & Prisma【#2 Prisma セットアップ】

2023/12/01に公開

【#2 Prisma セットアップ】

YouTube:https://youtu.be/MHi27CDqspA

https://youtu.be/MHi27CDqspA

今回は前回作成したコンテナを使用して、
「Prisma」でアクセスできるように実装を進めていきます。

クライアント用のアプリは「NextJs」で準備します。

npx create-next-app@latest . --typescript --tailwind --eslint

NextJsが準備できましたら、
こちらのコマンドでPrismaの初期設定を実行します。

npx prisma init

上記コマンドを実行すると以下のファイルが作成されますので、
「MySQL」用の設定とサンプルのモデルを作成します。

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 = "mysql"
  url      = env("DATABASE_URL")
  relationMode = "prisma"
}

model Post {
  id String @id @default(uuid())
  content String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

次に同時に作成された「.env」ファイルの中身を書き換えます。

.env
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="mysql://root:mysql@localhost:3306/test-data"

上記ファイルの「root」の部分はユーザー名、
そのあとの「mysql」はパスワードになります。

こちらは前回使用した、
「docker-compose.yml」の内容が反映されています。
「phpmyadmin」の権限で別のユーザーの作成が可能です。

最後の「test-data」の部分は「phpmyadmin」の方で
新しくデータを追加作成します。

次に、schema.prismaで作成した内容を
「prismaClient」で使用できるようにします。

npx prisma generate

ここまでできましたら、
以下のコマンドでデータベースにサンプルの「Post」を追加します。

npx prisma db push 

ブラウザを更新して「test-data」の直下に「Post」ができていれば成功です。

Postのデータ追加はこちらを使用してテストします。

npx prisma studio

Discussion