一旦デプロイを試してみたくなってトライ。

NeonでクラウドDB作成

今回はVercelと相性がいい(らしい)Neonを一旦使用する

  1. connection poolingはfalseへ
    Prismaは接続管理を自分でやるため、(Prismaは接続プールを自分で管理)Pooler経由だとエラーになる場合がある。
    Direct connectionを使用する

2. Direct connection URLを取得し、ローカルの.env内の環境変数DABASE_URLの値を変更

3.下記を叩くとNeonにテーブルが作られる

npx prisma db push

Vercel設定

Vercelに環境変数を設定

Key: DATABASE_URL
Value: (NeonのDirect URL)

諸々エラー→修正を繰り返しながらデプロイ完了。

デプロイしたけど動かない

ボタンを押下した際に、エラーが発生する。

Foreign key constraint violated on the constraint: `Todo_userId_fkey`

仮でuserId = 1にログインしている想定で作成しているから、userテーブルに何もデータがないのが原因。DBを開いて、データを投入したところ動いた。

こういったことが起こるから、seedを作成し初期データを投入する必要があるらしい

seedを作成する

seedとは

データベースに最初に入れておくサンプルデータ(初期データ)
DBの初期データを自動で入れる仕組み

seedファイルを作成

const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();

async function main() {
  const user = await prisma.user.create({
    data: {
      email: 'test@test.com',
    },
  });

  await prisma.todo.create({
    data: {
      title: '最初のTodo',
      userId: user.id,
    },
  });

  console.log('Seed data created');
}

main()
  .catch((e) => {
    console.error(e);
    process.exit(1);
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

下記コマンドを叩くとデータが投入される

npx prisma db seed

ちなみに新しくプロジェクトをローカルに持ってくるとき(環境構築)、この流れをやるらしい。(メモ)

git clone
↓
npm install
↓
npx prisma migrate dev  // schema.prisma の内容をデータベースのテーブル構造に反映する
↓
npx prisma db seed  // 初期データを入れる

色々あったけど一旦デプロイはできた。
DB関連の前提知識がなくて何が起こっているのかいまいちピンときていないことばかりー。やりつつ深ぼっていきたい。

c.sakyou

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA