Netlify Edge Functions 및 Supabase Database에서 Drizzle 사용하기

새 Supabase 프로젝트 생성

대시보드에서 새 Supabase 프로젝트를 생성하거나 이 링크를 따라가세요.

연결 문자열 변수 설정

대시보드 상단의 Connect 버튼을 클릭하고 Transaction pooler 섹션에서 URI를 복사하여 Project connect details를 찾을 수 있습니다. 비밀번호 플레이스홀더를 실제 데이터베이스 비밀번호로 교체하는 것을 잊지 마세요.

.env 파일에 DATABASE_URL 변수를 추가하세요.

DATABASE_URL=<YOUR_DATABASE_URL>

Supabase Database 연결에 대한 자세한 내용은 문서를 참조하세요.

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

import 설정

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

{
  "imports": {
    "drizzle-orm/": "https://esm.sh/drizzle-orm/",
    "postgres": "https://esm.sh/postgres"
  }
}

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 데이터베이스에 변경사항을 push합니다.

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

npx drizzle-kit push

또는 마이그레이션 워크플로우를 사용할 수 있습니다. 자세한 내용은 마이그레이션을 참조하세요.

데이터베이스에 Drizzle ORM 연결

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

import type { Context } from "@netlify/edge-functions";
import { usersTable } from "./common/schema.ts";
import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';

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

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

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

로컬에서 코드 테스트

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

netlify dev

처음 명령어를 실행하면 Edge Functions을 사용하도록 VS Code를 구성할 것을 제안합니다. 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에 배포하세요. 이 튜토리얼에서 publish 디렉토리는 '.'입니다.

기본적으로 드래프트 배포입니다. 프로덕션 배포를 수행하려면 다음 명령어를 실행하세요:

netlify deploy --prod