Vercel Edge Functions와 함께 Drizzle 사용하기

@neondatabase/serverless 드라이버 설치

@neondatabase/serverless 드라이버를 설치하려면 다음 명령어를 사용하세요:

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(),  // 기본 키로 설정된 id 컬럼
  name: text('name').notNull(),   // null이 허용되지 않는 name 컬럼
  age: text('age').notNull(),     // null이 허용되지 않는 age 컬럼
  email: text('email').notNull().unique(),  // null이 허용되지 않고 고유한 email 컬럼
});

이 코드는 users_table이라는 테이블을 정의합니다. 테이블은 id, name, age, email 네 개의 컬럼을 가지며, 각 컬럼은 특정한 제약 조건을 가지고 있습니다.

Drizzle 설정 파일 설정하기

Drizzle 설정 파일은 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!, // 데이터베이스 연결 URL
  },
});

.env 파일에 데이터베이스 연결 문자열을 설정하세요:

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

이 설정 파일을 통해 Drizzle Kit은 데이터베이스 연결 정보를 읽고, 스키마 파일을 기반으로 마이그레이션 작업을 수행할 수 있습니다.

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

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

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

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

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

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

이 코드는 Drizzle ORM을 사용하여 데이터베이스에 연결하는 기본 설정을 보여줍니다. process.env.POSTGRES_URL은 환경 변수에서 데이터베이스 연결 URL을 가져옵니다. 이 URL을 사용하여 Drizzle ORM이 데이터베이스와 상호작용할 수 있도록 합니다.

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'; // 기본적으로 정적이지만, 요청을 읽을 때 동적으로 변경
export const runtime = 'edge' // 런타임을 edge로 지정

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

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

로컬에서 코드 테스트하기

로컬 개발 서버를 시작하려면 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

@vercel/postgres 드라이버 설치

@vercel/postgres 드라이버를 설치하려면 다음 명령어를 사용하세요:

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(),  // 고유 식별자로 사용될 id 컬럼
  name: text('name').notNull(),   // 사용자 이름 (필수 입력)
  age: text('age').notNull(),     // 사용자 나이 (필수 입력)
  email: text('email').notNull().unique(),  // 사용자 이메일 (필수 입력, 중복 불가)
});

이 코드는 users_table이라는 테이블을 정의합니다. 각 컬럼은 다음과 같은 역할을 합니다:

• id: 고유 식별자로 사용되며, 자동으로 증가하는 시리얼 값입니다.
• name: 사용자의 이름을 저장하며, 필수 입력 항목입니다.
• age: 사용자의 나이를 저장하며, 필수 입력 항목입니다.
• email: 사용자의 이메일을 저장하며, 필수 입력 항목이고 중복될 수 없습니다.

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!,  // 데이터베이스 연결 URL
  },
});

.env 파일에 데이터베이스 연결 문자열을 설정하세요:

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

이 설정 파일은 Drizzle Kit이 데이터베이스와 상호작용할 때 필요한 정보를 제공합니다. schema는 데이터베이스 스키마를 정의한 파일의 경로를, dialect는 사용할 데이터베이스 종류를 지정합니다. dbCredentials에는 데이터베이스 연결에 필요한 URL을 환경 변수에서 가져와 설정합니다.

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

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

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

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

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

export const db = drizzle();

이 코드는 Drizzle ORM을 사용하여 데이터베이스에 연결하는 기본 설정을 보여줍니다. drizzle 함수를 호출하여 데이터베이스 연결을 초기화하고, 이를 db라는 이름으로 내보냅니다. 이제 이 db 객체를 사용하여 데이터베이스 작업을 수행할 수 있습니다.

API 라우트 생성하기: _BGrTTffvq5GeRofU549fcp

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)이지만, 요청을 읽을 때 동적(dynamic)으로 변경
export const runtime = 'edge'; // 런타임을 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"
}

프로젝트 배포하기_YaMuL439M8dR9hVRAhZfYG

대시보드에서 새 프로젝트를 생성하거나 vercel 커맨드를 실행하여 프로젝트를 배포할 수 있습니다:

vercel

POSTGRES_URL 환경 변수를 추가합니다:

vercel env add POSTGRES_URL

환경 변수를 업데이트하려면 프로젝트를 다시 배포합니다:

vercel

@planetscale/database 드라이버 설치

@planetscale/database 드라이버를 설치하려면 다음 명령어를 사용하세요:

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(),  // 기본 키로 설정된 id 컬럼
  name: text('name').notNull(),   // null이 허용되지 않는 name 컬럼
  age: text('age').notNull(),     // null이 허용되지 않는 age 컬럼
  email: text('email').notNull().unique(),  // null이 허용되지 않고 고유한 email 컬럼
});

이 코드는 users_table이라는 테이블을 정의하며, 각 컬럼은 특정 타입과 제약 조건을 가지고 있습니다.

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!, // 데이터베이스 연결 URL
  },
});

.env 파일에 데이터베이스 연결 문자열을 설정하세요:

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

이 설정 파일을 통해 Drizzle Kit이 데이터베이스와 상호작용할 수 있습니다.

데이터베이스 변경 사항 적용하기 (database_3Tamy3V8kBSGS9gUpuLvCp)

drizzle-kit generate 커맨드를 사용해 마이그레이션을 생성하고, drizzle-kit migrate 커맨드로 실행할 수 있습니다.

마이그레이션 생성하기:

npx drizzle-kit generate

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

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

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

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

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

// src/db/index.ts
import { drizzle } from "drizzle-orm/planetscale-serverless";

// 환경 변수에서 MYSQL_URL을 가져와 Drizzle ORM을 초기화
export const db = drizzle(process.env.MYSQL_URL!);

이 코드는 Drizzle ORM을 사용하여 PlanetScale 서버리스 데이터베이스에 연결하는 기본 설정을 보여줍니다. process.env.MYSQL_URL은 환경 변수에서 데이터베이스 연결 URL을 가져옵니다.

API 라우트 생성하기: _MtdbmdzXShYBWmYTQZPsva

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)이지만, 요청을 읽을 때 동적(dynamic)으로 변경
export const runtime = 'edge'; // 런타임을 엣지(edge)로 지정

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

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

설명

• dynamic = 'force-dynamic': 기본적으로 라우트는 정적(static)으로 처리되지만, 이 설정을 통해 요청 시 동적(dynamic)으로 변경됩니다.
• runtime = 'edge': 이 라우트가 엣지 런타임에서 실행되도록 지정합니다.
• GET 함수: 데이터베이스에서 사용자 데이터를 조회한 후, JSON 형식으로 응답을 반환합니다.

로컬에서 코드 테스트하기

로컬 개발 서버를 시작하려면 next dev 커맨드를 실행하세요:

npx next dev

브라우저에서 생성한 라우트(예: /api/hello)로 이동하면 다음과 같은 결과를 확인할 수 있습니다:

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

여러분의 프로젝트 배포하기

대시보드에서 새 프로젝트를 생성하거나 vercel 커맨드를 실행하여 프로젝트를 배포할 수 있습니다:

vercel

MYSQL_URL 환경 변수를 추가합니다:

vercel env add MYSQL_URL

환경 변수를 업데이트하려면 프로젝트를 다시 배포하세요:

vercel

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

@libsql/client 드라이버를 설치하려면 다음 명령어를 사용하세요:

npm i @libsql/client

yarn add @libsql/client

pnpm add @libsql/client

bun add @libsql/client

테이블 생성하기_U3YwnYmSECdbsqzvxz3b7i

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

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

export const usersTable = sqliteTable('users_table', {
  id: integer('id').primaryKey(),  // id 컬럼, 정수 타입, 기본 키
  name: text('name').notNull(),    // name 컬럼, 텍스트 타입, 필수 값
  age: text('age').notNull(),      // age 컬럼, 텍스트 타입, 필수 값
  email: text('email').notNull().unique(),  // email 컬럼, 텍스트 타입, 필수 값, 고유 값
});

이 코드는 SQLite 데이터베이스에 users_table이라는 테이블을 정의합니다. 각 컬럼은 특정 타입과 제약 조건을 가지고 있습니다.

Drizzle 설정 파일 설정하기

Drizzle 설정 파일은 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!,  // 데이터베이스 연결 URL
    authToken: process.env.TURSO_AUTH_TOKEN!,  // 인증 토큰
  },
});

.env 파일에 데이터베이스 연결 문자열과 인증 토큰을 설정하세요:

TURSO_CONNECTION_URL="libsql://[db-name].turso.io"  // 데이터베이스 연결 URL
TURSO_AUTH_TOKEN="[auth-token]"  // 인증 토큰

이 설정 파일을 통해 Drizzle Kit은 데이터베이스 연결 정보를 읽어와 스키마 파일을 기반으로 마이그레이션을 수행할 수 있습니다.

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

drizzle-kit generate 커맨드를 사용해 마이그레이션을 생성하고, drizzle-kit migrate 커맨드로 실행할 수 있습니다.

마이그레이션 생성:

npx drizzle-kit generate

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

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

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

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!,
  }
});

이 코드는 Drizzle ORM을 사용하여 데이터베이스에 연결하는 기본 설정을 보여줍니다. TURSO_CONNECTION_URL과 TURSO_AUTH_TOKEN은 환경 변수에서 가져옵니다.

API 라우트 생성하기: route_icTSj6CMvmNQJ449dnS9Ae

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";

// 기본적으로 정적(static)이지만, 요청을 읽을 때 동적(dynamic)으로 설정
export const dynamic = 'force-dynamic'; 

// 런타임을 엣지(edge)로 지정
export const runtime = 'edge'; 

export async function GET(request: Request) {
  // 데이터베이스에서 사용자 정보 조회
  const users = await db.select().from(usersTable);

  // JSON 형식으로 응답 반환
  return NextResponse.json({ users, message: 'success' });
}

로컬에서 코드 테스트하기

로컬 개발 서버를 시작하려면 next dev 명령어를 실행하세요:

npx next dev

브라우저에서 생성한 라우트(예: /api/hello)로 이동하면 다음과 같은 결과를 확인할 수 있습니다:

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

Deploy your project

Create a new project in the dashboard or run the vercel command to deploy your project:

vercel

Add TURSO_CONNECTION_URL environment variable:

vercel env add TURSO_CONNECTION_URL

Add TURSO_AUTH_TOKEN environment variable:

vercel env add TURSO_AUTH_TOKEN

Redeploy your project to update your environment variables:

vercel