Vercel Edge Functions에서 Drizzle 사용하기

이 튜토리얼은 Edge runtime에서 Vercel Functions와 함께 Drizzle ORM을 사용하는 방법을 보여줍니다.

This guide assumes familiarity with:

최신 버전의 Vercel CLI가 설치되어 있어야 합니다.

npm

yarn

pnpm

bun

npm i -g vercel

yarn add -g vercel

pnpm add -g vercel

bun add -g vercel

기존 Next.js 프로젝트가 있거나 다음 명령을 사용하여 새 프로젝트를 생성해야 합니다:

npx create-next-app@latest --typescript

Drizzle ORM과 Drizzle kit이 설치되어 있어야 합니다. 다음 명령어를 실행하여 설치할 수 있습니다:

npm

yarn

pnpm

bun

npm i drizzle-orm
npm i -D drizzle-kit

yarn add drizzle-orm
yarn add -D drizzle-kit

pnpm add drizzle-orm
pnpm add -D drizzle-kit

bun add drizzle-orm
bun add -D drizzle-kit

IMPORTANT

설치 중 종속성 해결 문제가 발생하는 경우:

React Native를 사용하지 않는 경우, --force 또는 --legacy-peer-deps를 사용하여 강제 설치하면 문제가 해결됩니다. React Native를 사용하는 경우, React Native 버전과 호환되는 정확한 React 버전을 사용해야 합니다.

Edge 호환 드라이버

Vercel Edge functions에서 Drizzle ORM을 사용할 때는 edge 호환 드라이버를 사용해야 합니다. 함수가 Node.js runtime이 아닌 Edge runtime에서 실행되므로 표준 Node.js API에 몇 가지 제한 사항이 있습니다.

데이터베이스 dialect에 따라 다음 드라이버 중 하나를 선택할 수 있습니다:

Neon serverless driver를 사용하면 TCP 대신 HTTP 또는 WebSocket을 통해 서버리스 및 edge 환경에서 Neon Postgres 데이터베이스를 쿼리할 수 있습니다. Neon Postgres에 연결하려면 이 드라이버를 사용하는 것이 좋습니다.
Vercel Postgres driver는 Neon serverless driver 위에 구축되었습니다. Vercel Postgres에 연결하려면 이 드라이버를 사용하는 것이 좋습니다.
PlanetScale serverless driver를 사용하면 모든 MySQL 클라이언트에 액세스하고 HTTP 연결을 통해 쿼리를 실행할 수 있으며, 이는 일반적으로 클라우드 제공업체에 의해 차단되지 않습니다.
libSQL client를 사용하면 Turso 데이터베이스에 액세스할 수 있습니다.

탐색

Neon Postgres 섹션으로 직접 이동합니다.
Vercel Postgres 섹션으로 직접 이동합니다.
PlanetScale 섹션으로 직접 이동합니다.
Turso 섹션으로 직접 이동합니다.

Neon Postgres

`@neondatabase/serverless` 드라이버 설치하기

@neondatabase/serverless 드라이버를 설치합니다:

npm

yarn

pnpm

bun

npm i @neondatabase/serverless

yarn add @neondatabase/serverless

pnpm add @neondatabase/serverless

bun add @neondatabase/serverless

테이블 생성하기

src/db 디렉토리에 schema.ts 파일을 생성하고 테이블 스키마를 선언합니다:

import { pgTable, serial, text } from "drizzle-orm/pg-core";

export const usersTable = pgTable('users_table', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  age: text('age').notNull(),
  email: text('email').notNull().unique(),
})

Drizzle 설정 파일 구성하기

Drizzle config - Drizzle Kit이 사용하는 설정 파일로, 데이터베이스 연결, 마이그레이션 폴더 및 스키마 파일에 대한 모든 정보를 포함합니다.

프로젝트 루트에 drizzle.config.ts 파일을 생성하고 다음 내용을 추가합니다:

import { defineConfig } from "drizzle-kit";

export default defineConfig({
  schema: "./src/db/schema.ts",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.POSTGRES_URL!,
  },
});

.env 파일에서 데이터베이스 연결 문자열을 구성합니다:

POSTGRES_URL="postgres://[user]:[password]@[host]-[region].aws.neon.tech:5432/[db-name]?sslmode=[ssl-mode]"

데이터베이스에 변경 사항 적용하기

drizzle-kit generate 명령을 사용하여 마이그레이션을 생성한 다음 drizzle-kit migrate 명령을 사용하여 실행할 수 있습니다.

마이그레이션 생성:

npx drizzle-kit generate

이러한 마이그레이션은 drizzle.config.ts에 지정된 대로 drizzle 디렉토리에 저장됩니다. 이 디렉토리에는 데이터베이스 스키마를 업데이트하는 데 필요한 SQL 파일과 다양한 마이그레이션 단계에서 스키마의 스냅샷을 저장하기 위한 meta 폴더가 포함됩니다.

생성된 마이그레이션의 예:

CREATE TABLE IF NOT EXISTS "users_table" (
	"id" serial PRIMARY KEY NOT NULL,
	"name" text NOT NULL,
	"age" text NOT NULL,
	"email" text NOT NULL,
	CONSTRAINT "users_table_email_unique" UNIQUE("email")
);

마이그레이션 실행:

npx drizzle-kit migrate

또는 Drizzle kit push 명령을 사용하여 변경 사항을 데이터베이스에 직접 푸시할 수 있습니다:

npx drizzle-kit push

IMPORTANT

Push 명령은 로컬 개발 환경에서 새로운 스키마 디자인이나 변경 사항을 빠르게 테스트해야 하는 상황에 적합하며, 마이그레이션 파일 관리의 오버헤드 없이 빠른 반복을 가능하게 합니다.

Drizzle ORM을 데이터베이스에 연결하기

src/db 디렉토리에 index.ts 파일을 생성하고 데이터베이스 설정을 구성합니다:

import { drizzle } from 'drizzle-orm/neon-serverless';


export const db = drizzle(process.env.POSTGRES_URL!)

API 라우트 생성하기

src/app/api/hello 디렉토리에 route.ts 파일을 생성합니다. 함수 작성 방법에 대한 자세한 내용은 Functions API Reference 및 Vercel Functions Quickstart를 참조하세요.

import { db } from "@/db";
import { usersTable } from "@/db/schema";
import { NextResponse } from "next/server";

export const dynamic = 'force-dynamic'; // static by default, unless reading the request
export const runtime = 'edge' // specify the runtime to be edge

export async function GET(request: Request) {
  const users = await db.select().from(usersTable)

  return NextResponse.json({ users, message: 'success' });
}

로컬에서 코드 테스트하기

next dev 명령을 실행하여 로컬 개발 서버를 시작합니다:

npx next dev

브라우저에서 생성한 경로 (예: /api/hello)로 이동합니다:

{
  "users": [],
  "message": "success"
}

프로젝트 배포하기

대시보드에서 새 프로젝트를 생성하거나 vercel 명령을 실행하여 프로젝트를 배포합니다:

vercel

POSTGRES_URL 환경 변수 추가:

vercel env add POSTGRES_URL

환경 변수를 업데이트하기 위해 프로젝트를 재배포합니다:

vercel

마지막으로, 배포된 프로젝트의 URL을 사용하여 생성한 경로(예: /api/hello)로 이동하여 edge function에 액세스할 수 있습니다.

Vercel Postgres

Drizzle과 Vercel Postgres 클라이언트에 대한 빠른 시작 가이드는 문서에서 확인할 수 있습니다.

`@vercel/postgres` 드라이버 설치하기

@vercel/postgres 드라이버를 설치합니다:

npm

yarn

pnpm

bun

npm i @vercel/postgres

yarn add @vercel/postgres

pnpm add @vercel/postgres

bun add @vercel/postgres

테이블 생성하기

src/db 디렉토리에 schema.ts 파일을 생성하고 테이블 스키마를 선언합니다:

import { pgTable, serial, text } from "drizzle-orm/pg-core";

export const usersTable = pgTable('users_table', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  age: text('age').notNull(),
  email: text('email').notNull().unique(),
})

Drizzle 설정 파일 구성하기

Drizzle config - Drizzle Kit이 사용하는 설정 파일로, 데이터베이스 연결, 마이그레이션 폴더 및 스키마 파일에 대한 모든 정보를 포함합니다.

프로젝트 루트에 drizzle.config.ts 파일을 생성하고 다음 내용을 추가합니다:

import { defineConfig } from "drizzle-kit";

export default defineConfig({
  schema: "./src/db/schema.ts",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.POSTGRES_URL!,
  },
});

.env 파일에서 데이터베이스 연결 문자열을 구성합니다:

POSTGRES_URL="postgres://[user]:[password]@[host]-[region].aws.neon.tech:5432/[db-name]?sslmode=[ssl-mode]"

데이터베이스에 변경 사항 적용하기

drizzle-kit generate 명령을 사용하여 마이그레이션을 생성한 다음 drizzle-kit migrate 명령을 사용하여 실행할 수 있습니다.

마이그레이션 생성:

npx drizzle-kit generate

생성된 마이그레이션의 예:

CREATE TABLE IF NOT EXISTS "users_table" (
	"id" serial PRIMARY KEY NOT NULL,
	"name" text NOT NULL,
	"age" text NOT NULL,
	"email" text NOT NULL,
	CONSTRAINT "users_table_email_unique" UNIQUE("email")
);

마이그레이션 실행:

npx drizzle-kit migrate

또는 Drizzle kit push 명령을 사용하여 변경 사항을 데이터베이스에 직접 푸시할 수 있습니다:

npx drizzle-kit push

IMPORTANT

Drizzle ORM을 데이터베이스에 연결하기

src/db 디렉토리에 index.ts 파일을 생성하고 데이터베이스 설정을 구성합니다:

import { drizzle } from 'drizzle-orm/vercel-postgres';

export const db = drizzle()

API 라우트 생성하기

src/app/api/hello 디렉토리에 route.ts를 생성합니다. 함수 작성 방법에 대한 자세한 내용은 Functions API Reference 및 Vercel Functions Quickstart를 참조하세요.


import { db } from "@/db";
import { usersTable } from "@/db/schema";
import { NextResponse } from "next/server";

export const dynamic = 'force-dynamic'; // static by default, unless reading the request
export const runtime = 'edge' // specify the runtime to be edge

export async function GET(request: Request) {
  const users = await db.select().from(usersTable)

  return NextResponse.json({ users, message: 'success' });
}

로컬에서 코드 테스트하기

next dev 명령을 실행하여 로컬 개발 서버를 시작합니다:

npx next dev

브라우저에서 생성한 경로 (예: /api/hello)로 이동합니다:

{
  "users": [],
  "message": "success"
}

프로젝트 배포하기

대시보드에서 새 프로젝트를 생성하거나 vercel 명령을 실행하여 프로젝트를 배포합니다:

vercel

POSTGRES_URL 환경 변수 추가:

vercel env add POSTGRES_URL

환경 변수를 업데이트하기 위해 프로젝트를 재배포합니다:

vercel

마지막으로, 배포된 프로젝트의 URL을 사용하여 생성한 경로(예: /api/hello)로 이동하여 edge function에 액세스할 수 있습니다.

PlanetScale

이 튜토리얼에서는 PlanetScale MySQL을 사용합니다.

`@planetscale/database` 드라이버 설치하기

@planetscale/database 드라이버를 설치합니다:

npm

yarn

pnpm

bun

npm i @planetscale/database

yarn add @planetscale/database

pnpm add @planetscale/database

bun add @planetscale/database

테이블 생성하기

src/db 디렉토리에 schema.ts 파일을 생성하고 테이블 스키마를 선언합니다:

import { mysqlTable, serial, text } from "drizzle-orm/mysql-core";

export const usersTable = mysqlTable('users_table', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  age: text('age').notNull(),
  email: text('email').notNull().unique(),
})

Drizzle 설정 파일 구성하기

Drizzle config - Drizzle Kit이 사용하는 설정 파일로, 데이터베이스 연결, 마이그레이션 폴더 및 스키마 파일에 대한 모든 정보를 포함합니다.

프로젝트 루트에 drizzle.config.ts 파일을 생성하고 다음 내용을 추가합니다:

import { defineConfig } from "drizzle-kit";

export default defineConfig({
  schema: "./src/db/schema.ts",
  dialect: "mysql",
  dbCredentials: {
    url: process.env.MYSQL_URL!,
  },
});

.env 파일에서 데이터베이스 연결 문자열을 구성합니다:

MYSQL_URL="mysql://[user]:[password]@[host].[region].psdb.cloud/[db-name]?ssl={'rejectUnauthorized':[ssl-rejectUnauthorized]}"

데이터베이스에 변경 사항 적용하기

drizzle-kit generate 명령을 사용하여 마이그레이션을 생성한 다음 drizzle-kit migrate 명령을 사용하여 실행할 수 있습니다.

마이그레이션 생성:

npx drizzle-kit generate

생성된 마이그레이션의 예:

CREATE TABLE `users_table` (
	`id` serial AUTO_INCREMENT NOT NULL,
	`name` text NOT NULL,
	`age` text NOT NULL,
	`email` text NOT NULL,
	CONSTRAINT `users_table_id` PRIMARY KEY(`id`),
	CONSTRAINT `users_table_email_unique` UNIQUE(`email`)
);

마이그레이션 실행:

npx drizzle-kit migrate

또는 Drizzle kit push 명령을 사용하여 변경 사항을 데이터베이스에 직접 푸시할 수 있습니다:

npx drizzle-kit push

IMPORTANT

Drizzle ORM을 데이터베이스에 연결하기

src/db 디렉토리에 index.ts 파일을 생성하고 데이터베이스 설정을 구성합니다:

import { drizzle } from "drizzle-orm/planetscale-serverless";

export const db = drizzle(process.env.MYSQL_URL!)

API 라우트 생성하기

src/app/api/hello 디렉토리에 route.ts를 생성합니다. 함수 작성 방법에 대한 자세한 내용은 Functions API Reference 및 Vercel Functions Quickstart를 참조하세요.

import { db } from "@/app/db/db";
import { usersTable } from "@/app/db/schema";
import { NextResponse } from "next/server";

export const dynamic = 'force-dynamic'; // static by default, unless reading the request
export const runtime = 'edge' // specify the runtime to be edge

export async function GET(request: Request) {
  const users = await db.select().from(usersTable)

  return NextResponse.json({ users, message: 'success' });
}

로컬에서 코드 테스트하기

next dev 명령을 실행하여 로컬 개발 서버를 시작합니다:

npx next dev

브라우저에서 생성한 경로 (예: /api/hello)로 이동합니다:

{
  "users": [],
  "message": "success"
}

프로젝트 배포하기

대시보드에서 새 프로젝트를 생성하거나 vercel 명령을 실행하여 프로젝트를 배포합니다:

vercel

MYSQL_URL 환경 변수 추가:

vercel env add MYSQL_URL

환경 변수를 업데이트하기 위해 프로젝트를 재배포합니다:

vercel

마지막으로, 배포된 프로젝트의 URL을 사용하여 생성한 경로(예: /api/hello)로 이동하여 edge function에 액세스할 수 있습니다.

Turso

Drizzle과 Turso에 대한 빠른 시작 가이드 또는 튜토리얼은 문서에서 확인할 수 있습니다.

`@libsql/client` 드라이버 설치하기

@libsql/client 드라이버를 설치합니다:

npm

yarn

pnpm

bun

npm i @libsql/client

yarn add @libsql/client

pnpm add @libsql/client

bun add @libsql/client

테이블 생성하기

src/db 디렉토리에 schema.ts 파일을 생성하고 테이블 스키마를 선언합니다:

import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const usersTable = sqliteTable('users_table', {
  id: integer('id').primaryKey(),
  name: text('name').notNull(),
  age: text('age').notNull(),
  email: text('email').notNull().unique(),
})

Drizzle 설정 파일 구성하기

Drizzle config - Drizzle Kit이 사용하는 설정 파일로, 데이터베이스 연결, 마이그레이션 폴더 및 스키마 파일에 대한 모든 정보를 포함합니다.

프로젝트 루트에 drizzle.config.ts 파일을 생성하고 다음 내용을 추가합니다:

import { defineConfig } from "drizzle-kit";

export default defineConfig({
  schema: "./src/db/schema.ts",
  dialect: "turso",
  dbCredentials: {
    url: process.env.TURSO_CONNECTION_URL!,
    authToken: process.env.TURSO_AUTH_TOKEN!,
  },
});

.env 파일에서 데이터베이스 연결 문자열 및 인증 토큰을 구성합니다:

TURSO_CONNECTION_URL="libsql://[db-name].turso.io"
TURSO_AUTH_TOKEN="[auth-token]"

데이터베이스에 변경 사항 적용하기

drizzle-kit generate 명령을 사용하여 마이그레이션을 생성한 다음 drizzle-kit migrate 명령을 사용하여 실행할 수 있습니다.

마이그레이션 생성:

npx drizzle-kit generate

생성된 마이그레이션의 예:

CREATE TABLE `users_table` (
	`id` integer PRIMARY KEY NOT NULL,
	`name` text NOT NULL,
	`age` text NOT NULL,
	`email` text NOT NULL
);
--> statement-breakpoint
CREATE UNIQUE INDEX `users_table_email_unique` ON `users_table` (`email`);

마이그레이션 실행:

npx drizzle-kit migrate

또는 Drizzle kit push 명령을 사용하여 변경 사항을 데이터베이스에 직접 푸시할 수 있습니다:

npx drizzle-kit push

IMPORTANT

Drizzle ORM을 데이터베이스에 연결하기

src/db 디렉토리에 index.ts 파일을 생성하고 데이터베이스 설정을 구성합니다:

import { drizzle } from 'drizzle-orm/libsql';

export const db = drizzle({ connection: {
  url: process.env.TURSO_CONNECTION_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN!,
}})

API 라우트 생성하기

src/app/api/hello 디렉토리에 route.ts를 생성합니다. 함수 작성 방법에 대한 자세한 내용은 Functions API Reference 및 Vercel Functions Quickstart를 참조하세요.

import { db } from "@/app/db/db";
import { usersTable } from "@/app/db/schema";
import { NextResponse } from "next/server";

export const dynamic = 'force-dynamic'; // static by default, unless reading the request
export const runtime = 'edge' // specify the runtime to be edge

export async function GET(request: Request) {
  const users = await db.select().from(usersTable)

  return NextResponse.json({ users, message: 'success' });
}

로컬에서 코드 테스트하기

next dev 명령을 실행하여 로컬 개발 서버를 시작합니다:

npx next dev

브라우저에서 생성한 경로 (예: /api/hello)로 이동합니다:

{
  "users": [],
  "message": "success"
}

프로젝트 배포하기

대시보드에서 새 프로젝트를 생성하거나 vercel 명령을 실행하여 프로젝트를 배포합니다:

vercel

TURSO_CONNECTION_URL 환경 변수 추가:

vercel env add TURSO_CONNECTION_URL

TURSO_AUTH_TOKEN 환경 변수 추가:

vercel env add TURSO_AUTH_TOKEN

환경 변수를 업데이트하기 위해 프로젝트를 재배포합니다:

vercel

마지막으로, 배포된 프로젝트의 URL을 사용하여 생성한 경로(예: /api/hello)로 이동하여 edge function에 액세스할 수 있습니다.

Vercel Edge Functions에서 Drizzle 사용하기

Edge 호환 드라이버

탐색

Neon Postgres

@neondatabase/serverless 드라이버 설치하기

테이블 생성하기

Drizzle 설정 파일 구성하기

데이터베이스에 변경 사항 적용하기

Drizzle ORM을 데이터베이스에 연결하기

API 라우트 생성하기

로컬에서 코드 테스트하기

프로젝트 배포하기

Vercel Postgres

@vercel/postgres 드라이버 설치하기

테이블 생성하기

Drizzle 설정 파일 구성하기

데이터베이스에 변경 사항 적용하기

Drizzle ORM을 데이터베이스에 연결하기

API 라우트 생성하기

로컬에서 코드 테스트하기

프로젝트 배포하기

PlanetScale

@planetscale/database 드라이버 설치하기

테이블 생성하기

Drizzle 설정 파일 구성하기

데이터베이스에 변경 사항 적용하기

Drizzle ORM을 데이터베이스에 연결하기

API 라우트 생성하기

로컬에서 코드 테스트하기

프로젝트 배포하기

Turso

@libsql/client 드라이버 설치하기

테이블 생성하기

Drizzle 설정 파일 구성하기

데이터베이스에 변경 사항 적용하기

Drizzle ORM을 데이터베이스에 연결하기

API 라우트 생성하기

로컬에서 코드 테스트하기

프로젝트 배포하기

`@neondatabase/serverless` 드라이버 설치하기

`@vercel/postgres` 드라이버 설치하기

`@planetscale/database` 드라이버 설치하기

`@libsql/client` 드라이버 설치하기