Netlify Edge Functions와 Neon Postgres에서 Drizzle 사용하기

Neon Postgres 설정하기

Neon Console에 로그인하여 Projects 섹션으로 이동합니다. 프로젝트를 선택하거나 New Project 버튼을 클릭하여 새 프로젝트를 생성합니다.

Neon 프로젝트에는 neondb라는 이름의 바로 사용 가능한 Postgres 데이터베이스가 함께 제공됩니다. 이 튜토리얼에서는 이것을 사용할 것입니다.

연결 문자열 변수 설정하기

Project Dashboard 섹션에서 Connect 버튼을 클릭하고 데이터베이스 연결 문자열을 복사합니다. 다음과 비슷한 형태일 것입니다:

postgres://username:password@ep-cool-darkness-123456.us-east-2.aws.neon.tech/neondb?sslmode=require

.env 파일에 DATABASE_URL 환경 변수를 추가합니다. 이것을 사용하여 Neon 데이터베이스에 연결할 것입니다.

DATABASE_URL=NEON_DATABASE_CONNECTION_STRING

Netlify Edge Functions 설정하기

프로젝트 루트에 netlify/edge-functions 디렉토리를 생성합니다. 여기에 Edge Functions를 저장할 것입니다.

netlify/edge-functions 디렉토리에 user.ts 함수를 생성합니다.

import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  return new Response("User data");
};

imports 설정하기

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

{
  "imports": {
    "drizzle-orm/": "https://esm.sh/drizzle-orm/",
    "@neondatabase/serverless": "https://esm.sh/@neondatabase/serverless"
  }
}

Netlify Edge Functions의 import_map.json에 대한 자세한 내용은 여기에서 확인하세요.

Netlify 설정 파일 생성하기

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

[functions]
  deno_import_map = "./import_map.json"

[[edge_functions]]
  path = "/user"
  function = "user"

이 설정은 Netlify에게 Deno imports를 위해 import_map.json 파일을 사용하고, /user 경로로의 요청을 user.ts 함수로 라우팅하도록 지시합니다. netlify.toml에 대한 자세한 내용은 여기에서 확인하세요.

테이블 생성하기

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

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

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

Drizzle 설정 파일 구성하기

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

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

import 'dotenv/config'; // remove this line if you use Node.js v20.6.0 or later
import type { Config } from "drizzle-kit";

export default {
  schema: './netlify/edge-functions/common/schema.ts',
  out: './drizzle',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
} satisfies Config;

이 튜토리얼에서는 Drizzle kit을 사용하여 Neon 데이터베이스에 변경사항을 푸시할 것입니다.

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

npx drizzle-kit push

또는 마이그레이션 워크플로우를 사용할 수도 있습니다. 자세한 내용은 Migrations에서 확인하세요.

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

netlify/edge-functions/user.ts 파일을 업데이트하고 데이터베이스 설정을 구성합니다:

import type { Context } from "@netlify/edge-functions";
import { usersTable } from "./common/schema.ts";
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';

export default async (request: Request, context: Context) => {
  const sql = neon(Netlify.env.get("DATABASE_URL")!);
  const db = drizzle({ client: sql });

  const users = await db.select().from(usersTable);

  return new Response(JSON.stringify(users));
};

로컬에서 코드 테스트하기

다음 명령어를 실행하여 Netlify dev 서버를 시작합니다:

netlify dev

처음 명령어를 실행하면 VS Code가 Edge Functions를 사용하도록 설정할 것인지 제안합니다. Yes를 클릭하여 설정합니다. .vscode 디렉토리에 settings.json 파일이 생성됩니다. 여전히 빨간색 밑줄이 표시되면 Deno Language Server를 재시작할 수 있습니다.

브라우저를 열고 /user 경로로 이동합니다. Neon 데이터베이스에서 반환된 사용자 데이터를 볼 수 있습니다:

[]

users_table 테이블에 데이터를 추가하지 않았다면 빈 배열일 수 있습니다.

새 Netlify 프로젝트 초기화하기

다음 명령어를 실행하여 새 Netlify 프로젝트를 초기화합니다:

netlify init

CLI의 질문에 답하여 새 Netlify 프로젝트를 생성합니다. 이 튜토리얼에서는 Yes, create and deploy site manually -> <YOUR_TEAM> -> <SITE_NAME>을 선택합니다.

Netlify 환경 변수 설정하기

다음 명령어를 실행하여 환경 변수를 Netlify로 가져옵니다:

netlify env:import .env

Netlify 환경 변수에 대한 자세한 내용은 여기에서 확인하세요.

프로젝트 배포하기

다음 명령어를 실행하여 프로젝트를 배포합니다:

netlify deploy

CLI의 지시에 따라 Netlify에 프로젝트를 배포합니다. 이 튜토리얼에서 게시 디렉토리는 '.'입니다.

기본적으로 draft deployment입니다. 프로덕션 배포를 하려면 다음 명령어를 실행합니다:

netlify deploy --prod