Drizzle와 Vercel Edge Functions

이 튜토리얼은 Edge 런타임의 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 호환 드라이버

Drizzle ORM을 Vercel Edge 함수와 함께 사용할 때는 함수가 Node.js 런타임이 아닌 Edge 런타임에서 실행되므로 edge 호환 드라이버를 사용해야 합니다. 따라서 일부 표준 Node.js API에 제한이 있습니다.

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

Neon serverless 드라이버를 사용하면 TCP 대신 HTTP 또는 WebSocket을 통해 서버리스 및 edge 환경에서 Neon Postgres 데이터베이스를 쿼리할 수 있습니다. Neon Postgres 연결에는 이 드라이버를 권장합니다.
Vercel Postgres 드라이버는 Neon serverless 드라이버 위에 구축되었습니다. Vercel Postgres 연결에는 이 드라이버를 권장합니다.
PlanetScale serverless 드라이버를 사용하면 일반적으로 클라우드 제공자가 차단하지 않는 HTTP 연결을 통해 모든 MySQL 클라이언트에 액세스하고 쿼리를 실행할 수 있습니다.
libSQL 클라이언트를 사용하면 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 함수에 액세스할 수 있습니다.

Vercel Postgres

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

`@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 함수에 액세스할 수 있습니다.

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 함수에 액세스할 수 있습니다.

Turso

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

`@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 함수에 액세스할 수 있습니다.

Drizzle와 Vercel Edge Functions

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` 드라이버 설치