Supabase Edge Function 구현

---

학습 목표

1. Edge Function이 무엇이고 왜 필요한지 설명할 수 있다.
2. Supabase에서 Edge Function을 생성하고 배포할 수 있다.
3. 사용자 브라우저부터 외부 API까지의 전체 데이터 흐름을 이해한다.
4. **Supabase 프로젝트 키(anon/publishable, service_role)**의 차이와 사용 원칙을 익힌다.

---

Edge Function이란?

Edge Function = 우리가 직접 서버를 운영하지 않아도 서버 역할을 대신 해주는 코드 조각

전통적인 웹 서비스에서는 서버 컴퓨터를 직접 구매하고, 24시간 켜놓고, 관리해야 했다. Edge Function은 이 모든 것을 클라우드 서비스가 대신 처리해준다. 우리는 "이 요청이 오면 이렇게 응답해줘"라는 코드 조각만 작성하면 된다.

핵심 특징

특징	설명
서버리스	서버를 직접 관리할 필요 없음
Deno 기반	TypeScript를 기본 지원하는 런타임
전 세계 엣지 노드	사용자와 가장 가까운 서버에서 실행 → 빠른 응답
자동 확장	트래픽이 늘어도 자동으로 처리 능력 확장
무료 한도	Supabase 무료 플랜으로 충분히 사용 가능

---

왜 Edge Function이 필요한가?

이전 챕터에서 배운 API KEY 보안 원칙을 기억하자. API KEY를 클라이언트(브라우저)에 직접 넣으면 위험하다. Edge Function은 이 문제를 해결해준다.

방식	API KEY 위치	보안
클라이언트에서 직접 호출	브라우저 코드에 노출	위험
Edge Function 경유	서버 환경변수에 안전 보관	안전

---

전체 아키텍처

사용자가 사이트에 접속하면, 데이터가 아래와 같이 흐른다.

데이터 흐름 요약

단계	출발	도착	전달 내용
1	브라우저	Cloudflare FE	사이트 접속 요청
2	Cloudflare FE	브라우저	화면 렌더링에 필요한 정적 자산 전달
3	브라우저	Edge Function	API 요청 (anon/publishable key 포함 가능)
4	Edge Function	WeatherAPI	날씨 조회 (WEATHER_API_KEY 포함)
5	WeatherAPI	Edge Function	원본 날씨 데이터
6	Edge Function	브라우저	가공된 결과

핵심: WeatherAPI KEY 같은 비밀 키와 Supabase의 service_role/secret 계열 키는 Edge Function 안에서만 사용한다. 반면 Supabase의 anon/publishable 키는 낮은 권한의 공개 가능한 프로젝트 키다.

---

상세 요청/응답 흐름

아래 시퀀스 다이어그램으로 각 단계의 요청과 응답을 더 자세히 살펴보자.

---

Supabase 설정 과정

1단계: 프로젝트 생성

1. supabase.com 접속 후 회원가입
2. New Project 클릭
3. 프로젝트 이름 입력
4. 리전(Region) 선택: Northeast Asia (Tokyo) 추천 (한국에서 가장 빠름)
5. Create new project 클릭

2단계: API KEY를 Secrets에 등록

WeatherAPI.com에서 발급받은 API KEY를 Supabase에 안전하게 등록한다.

1. 좌측 메뉴에서 Edge Functions 클릭
2. Secrets 탭 클릭
3. New Secret 클릭
4. 이름: WEATHER_API_KEY
5. 값: WeatherAPI.com에서 발급받은 KEY 입력
6. Save 클릭

중요: Secret 이름(WEATHER_API_KEY)은 Edge Function 코드에서 Deno.env.get('WEATHER_API_KEY')로 접근할 때 사용하는 이름과 반드시 일치해야 한다.

3단계: Edge Function 생성

1. Edge Functions → Functions 탭
2. New Function 클릭
3. 함수 이름 입력 (예: get-weather)
4. Via Editor 클릭
5. Cursor AI가 만들어준 Edge Function 코드를 복사 붙여넣기
6. Deploy 클릭

Edge Function 코드 구조 예시

import 'jsr:@supabase/functions-js/edge-runtime.d.ts'

Deno.serve(async (req) => {
  // 1. 요청 파라미터 추출
  const { searchParams } = new URL(req.url)
  const city = searchParams.get('city') || 'Seoul'

  // 2. 환경변수에서 외부 API 비밀키 가져오기
  const apiKey = Deno.env.get('WEATHER_API_KEY')
  if (!apiKey) {
    return Response.json({ error: 'WEATHER_API_KEY is not set' }, { status: 500 })
  }

  // 3. WeatherAPI 호출
  const response = await fetch(
    `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}&lang=ko`
  )
  const data = await response.json()

  // 4. 가공된 결과 반환
  return Response.json({
    city: data.location.name,
    temp: data.current.temp_c,
    condition: data.current.condition.text,
    humidity: data.current.humidity,
  })
})

팁: 이 코드를 직접 작성할 필요는 없다. Cursor AI에게 "WeatherAPI를 호출하는 Supabase Edge Function을 만들어줘"라고 요청하면 된다.

---

Supabase 프로젝트 키 이해

Supabase에는 공개 가능한 프로젝트 키와 서버 전용 키가 함께 존재한다. 이 둘을 섞어 이해하면 보안 설계가 꼬이기 쉽다.

핵심 구분

키 종류	노출 가능 여부	주 용도	보관 위치 예시
anon / publishable	공개 가능	브라우저에서 Supabase client 구성, Edge Function invoke	브라우저 공개 env 또는 서버 env
service_role / secret	비공개	관리자 권한 작업, RLS 우회, 서버 전용 작업	Edge Function secrets, 서버 환경변수

anon / publishable 키 확인 방법

1. Supabase 대시보드 → Project Settings
2. API 탭
3. anon 또는 publishable 키 확인

주의: anon 키는 낮은 권한의 공개 가능한 키이므로 브라우저에서 사용해도 된다. 하지만 이것만으로 "우리 사이트에서 온 요청"을 완전히 증명할 수는 없다. 특정 사용자만 접근하게 하려면 Edge Function 안에서 JWT 검증이나 별도 인증 로직을 추가해야 한다.

---

핵심 정리

순서	할 일	결과
1	Supabase 프로젝트 생성	프로젝트 준비 완료
2	Secrets에 WEATHER_API_KEY 등록	API KEY 안전 보관
3	Edge Function 생성 및 코드 배포	서버리스 함수 동작
4	anon/publishable 키와 service_role 키의 차이 이해	공개 키와 비밀 키 구분 완료

다음 단계: Edge Function이 준비되었다면, 이제 Cloudflare 환경변수 설정과 자동 배포 파이프라인을 구성하여 사이트를 세상에 공개한다.