Supabase PostgreSQL
Supabase에서 제공하는 데이터베이스는 PostgreSQL입니다. PostgreSQL은 관계형 데이터베이스로 다양한 데이터를 유기적으로 저장/관리할 수 있습니다.
학습 목표
•
웹 콘솔에서 Table을 관리하는 방법
•
코드레벨에서 Table Schema을 사용하는 방법
•
코드레벨에서 데이터 CRUD
1. 테이블 생성
Supabase 웹 콘솔의 Table Editor를 활용해 테이블을 생성합니다.
•
Name: 테이블 이름
•
Columns
Name | Type | Default Value | Primary |
id | int8 | O | |
created_at | timestamp | now() | |
short_path | text | NULL | |
redirect_url | text | NULL |
Save 버튼을 눌러 테이블을 생성합니다.
2. Database Scheme to TypeScript
생성한 테이블을 타입스크립트 코드레벨에서 쉽게 사용할 수 있는 기능을 지원합니다.
•
scripts 디렉토리에 gen-type.sh 파일을 추가합니다.
◦
gen-type.sh
supabase gen types typescript --project-id {프로젝트ID} --schema public > supabase/functions/types/supabase.ts
TypeScript
복사
프로젝트ID는 본인의 프로젝트ID를 입력하면 됩니다.
프로젝트ID는 Supabase 설정 페이지에서 확인할 수 있습니다.
•
functions 디렉토리 하위에 types 디렉토리도 추가합니다.
이제 생성한 스크립트를 실행합니다.
bash scripts/gen-type.sh
TypeScript
복사
스크립트가 정상적으로 수행되면 types 디렉토리 하위에 supabase.ts 파일이 생성되며 파일 내용에는 1번 과정에서 생성한 테이블 Schema가 포함되어 있습니다.
3. 환경변수
Supabase에서도 환경변수 기능을 지원합니다. Supabase 연결을 위해 환경변수를 추가하고 사용하는 방법을 학습합니다.
supabase 하위 디렉토리에 .env.production 파일을 추가합니다.
•
supabase/.env.production
SB_PROJECT_URL='https://zksnirpbgoppgoprlfdw.supabase.co'
SB_SERVICE_ROLE_KEY={service_role key}
TypeScript
복사
SB_PROJECT_URL, SB_SERVICE_ROLE_KEY 값은 Supabase 웹 콘솔에서 확인할 수 있습니다.
service_role 키는 절대로 유출되면 안됩니다.
Github Private Repository가 아니라면 .env.production 파일을 Github에 업로드 하지 않도록 주의해주세요. .gitignore에 .env.* 를 추가하여 업로드되지 않도록 하는것을 추천합니다.
•
.gitignore
supabase/.branches
supabase/.temp
.env.*
TypeScript
복사
환경변수를 Typescript에서 사용할 수 있도록 가져오는 코드를 작성합니다.
supabase/functions/environments.ts 파일을 추가합니다.
•
supabase/functions/envrionments.ts
export const supabaseProjectURL = Deno.env.get("SB_PROJECT_URL")!;
export const supabaseServiceRoleKey = Deno.env.get("SB_SERVICE_ROLE_KEY")!;
TypeScript
복사
환경변수 파일을 Deno 런타임에 사용할 수 있도록 배포 스크립트를 변경합니다.
•
scripts/serve.sh
supabase functions serve --no-verify-jwt --env-file ./supabase/.env.production
Bash
복사
4. Supabase 서버사이드 환경변수
Supabase 서버사이드에서도 환경변수를 사용할 수 있도록 Secrets에 환경변수를 등록해야 합니다.
•
로컬에서는 .env.production 의 값 사용
•
리모트에서는 Secrets 설정값 사용
5. Supabase SDK 연동
Supabase 기능을 Typescript에서 사용할 수 있도록 Supabase SDK를 가져옵니다.
•
supabase/functions/lib/supabase.ts
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
import { supabaseProjectURL, supabaseServiceRoleKey } from "../environments";
import { Database } from "../types/supabase";
export const supabase = createClient<Database>(
supabaseProjectURL,
supabaseServiceRoleKey
);
TypeScript
복사
6. Supabase SDK 연동 테스트
Supabase SDK가 정상적으로 연동되었는지 확인을 위해 API를 수정합니다.
•
supabase/functions/api/index.ts
import { supabase } from "./../lib/supabase.ts";
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
Deno.serve(async (req) => {
const { data, error } = await supabase.from("v1_short_paths").insert({
redirect_url: "https://example.com",
short_path: "example",
});
if (error) {
console.error("Error inserting data:", error);
return new Response("Failed to insert data", { status: 500 });
}
return new Response("Data inserted successfully");
});
TypeScript
복사
API 요청이 오면 `v1_short_paths` 테이블에 예제 데이터를 insert하는 로직을 추가합니다.
•
웹 (API 호출)
•
데이터베이스
끝.