미카 프로젝트

Edge Function 은 Supabase 기반의 serverless api  솔루션입니다.

AWS Lambda 나 Google Cloud Function 과 같은 서비스라고 보시면 됩니다.

1. 사용 환경 만들기

EdgeFunction 을 어떻게 개발하지? 코드를 작성해서 클라우드에 올리나? 그럼 코드는 어떻게 확인하지.. 와 같은 의문이 들건데요.

간단히 결론부터 말하면 supabase 에서 cli(command line interface) 기반으로 Edge Function 을 개발할 수 있는 환경을 제공합니다.

이를 이용해서 로컬에서 개발하고 테스트 해볼 수 있습니다.

EdgeFunction을 작성하기 위해서는 PC에 개발 환경을 먼저 구축 해야 겠죠?

아래 가이드를 살펴보면서 작성하시면 좋겠습니다.

https://supabase.com/docs/guides/local-development?queryGroups=package-manager&package-manager=npm

CLI install 하고 실행하기

1. install
npm install supabase --save-dev
2. init
npx supabase init
3. start
npx supabase start

//brew 에서는 
1. install
brew install supabase/tap/supabase
2. init
supabase init
3. start
supabase start

[결과 화면]
         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: ----dfasdfasdf----------
service_role key: -----asdfasdxx---------
   S3 Access Key: ----asdf90as8d0f98asdf--------
   S3 Secret Key: -----234hjk35h2k34j5h--------
       S3 Region: local

2. CLI와 project 연결하기

npx supabase link --project-ref [project name]

1. npx supabase login

 첫 로그인을 시도하려고 하면 아래와 같은 에러가 발생합니다.

~/supabase$ npx supabse login
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/supabse - Not found
npm ERR! 404 
npm ERR! 404  'supabse@*' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/netplant/.npm/_logs/2024-12-16T07_31_12_169Z-debug-0.log
netplant@netplant01:~/supabase$ npx supabase login
Hello from Supabase! Press Enter to open browser and login automatically.

엔터를 치면, 

브라우저가 뜨고  supabse 에 로그인 화면이 나타납니다.

로그인을 합니다.

2. 로그인 하고나면, 

supabase verify 코드가 보이게 됩니다.

3.이 코드를 가지고 terminal에 입력합니다.

- Enter your verification code: f16d4f38 

3.. 함수 개발해보기

함수를 하나 만들어보자.

Edge function을 개발하기 위해서는 Cli를 이용해서 Edge Function을 만들어 줍니다.

supabase functions new my-function --no-verify-jwt
또는
npx supabase functions new my-function --no-verify-jwt

테스트를 위한 것이니 --no-verify-jwt 를 옵션으로 입력했습니다.

그러면 간단한 샘플코드와 함께 함수 폴더가 만들어 집니다.

supabase 밑에 functions 라는 폴더가 생기고, 그 아래 my-function이라는 폴더가 만들어 지죠.

폴더 위치 : supabase/functions/my-function

생성된 예제 코드

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

console.log("Hello from Functions!")

Deno.serve(async (req) => {
  const { name } = await req.json()
  const data = {
    message: `Hello ${name}!`,
  }

  return new Response(
    JSON.stringify(data),
    { headers: { "Content-Type": "application/json" } },
  )
})



/* To invoke locally:

  1. Run `supabase start` (see: https://supabase.com/docs/reference/cli/supabase-start)
  2. Make an HTTP request:

  curl -i --location --request POST 'http://127.0.0.1:54321/functions/v1/my-function' \
    --header 'Authorization: Bearer -sdjfklsdfjskldf-sdlfkasm23324l234dsdfk' \
    --header 'Content-Type: application/json' \
    --data '{"name":"Functions"}'

*/

함수에 대한 설정은 config.toml 파일에서 설정 할 수도 있습니다.

이렇게 코드가 만들어지고 나면 그다음은 함수를 테스트 해봐야 하는데요.

테스트를 위해서 함수를 제공하는 서비스를 실행합니다.

supabase functions serve my-function --no-verify-jwt

또는 

npx supabase functions serve my-function --no-verify-jwt

그리고 나서 함수를 테스트 하기 위해서 샘플 코드에 주석으로 적혀있는 curl 명령을 실행해봅니다.

  curl -i --location --request POST 'http://127.0.0.1:54321/functions/v1/my-function' \
    --header 'Authorization: Bearer -sdjfklsdfjskldf-sdlfkasm23324l234dsdfk' \
    --header 'Content-Type: application/json' \
    --data '{"name":"Functions"}'

이렇게 해서 결과가 나오면 api 를 개발할 수 있는 환경이 완성 된것입니다.

5. Edge Function 을 서버에 올리기

함수 개발을 끝내고 나면, 서버에 올리는 일이 남았습니다.

//전체 함수를 서버에 올리기
supabase functions deploy

// 한 함수만 올리기
supabase functions deploy my-function

//JWT 토큰 없이 동작할수 있도록 올리기
supabase functions deploy hello-world --no-verify-jwt

이렇게 하면 새로 만든 함수가 supabase 에 등록이 됩니다.

이제 부터는 실제로 개발할때 유용한 몇가지 팁들을 같이 적어볼까 합니다.

5. 팁

1. 환경 변수 또는 시크릿(Secret) 다루기 

[환경 변수 파일 .env]

일명 .env 또는 dotenv 라고 부르는 환경 변수 설정을 하는 방법입니다.

api key 또는 token 등 서비스를 구동할때 필요한 인증 키나 값들은 보통 소스코드에서 분리해서 사용하죠.

이럴때 일반적으로 .env를 활용하게 됩니다.

//env 사용하기
Deno.env.get('MY_SECRET_NAME')

그럼 어떻게 확인해 볼 수 있느냐?

supabase functions 서비스를 실행할때 env 파일을 설정해서 테스트 해볼 수 있습니다.

supabase functions serve --env-file ./supabase/.env

[시크릿 키 Secret]

Supabase 서버에서는 .env 파일을 그대로 사용할수 없고 ,supabase 에는 secret key를 관리하는 page에서 관리되는 키를 사용해야 합니다.

supabase site -> Project Settings -> Edge Functions -> Edge Function Secrets Management

가 바로 키를 관리하는 곳입니다.

CLI에 .env에 등록된 키들을 올리는 기능이 있으니 이를 활용하면 쉽게 올리고 테스트 가능하겠죠.

#.env에 있는 모든 키를 올릴때
supabase secrets set --env-file ./supabase/.env

#특정 키만 올일때
supabase secrets set MY_NAME=Chewbacca

2. 서버의 db를 로컬에 구축 하기(옵션 - 건너 뛰어도 됨.)

되도록이면 로컬의 환경이 서버의 환경과 동일(또는 유사)한것이 개발 및 테스트시 예외상황을 줄일 수 있습니다.

그래서 서버의 내용을 로컬에 구축하는 작업을 진행해보겠습니다.

1. 서버의 데이터를 모두 로컬에 복사해오면 좋겠지만  오버해드(서버의 데이터 내용이 많으면 많을 수록 문제가 되겠죠)가 큽니다.

그래서 서버의 구조, 즉 db schema 를 로컬에 동일하게 구축하는 것입니다.

2. 로컬에는 기본적인 테스트 가능한 데이터만 입력합니다.

서버의 일부 데이터만 입력하는 방법입니다.

#해피코딩

#Firebase 를 대처할만한 편리하고 저렴하게 사용할 수 있는 backend solution인 supabase 소개는 따로.!

Supabase에서 Database를 생성하고 나서, database 를 사용하는 방법은 다음과 같습니다.

supabase guide 를 보면 쉽게 따라하실수 있습니다.

https://supabase.com/docs/reference/dart/upgrade-guide?queryGroups=version&version=2.0x

지금 하고 싶은 이야기는 이미 supabase를 사용하고 계시는 분들에게 유용한 기능인데요.

# database 컬럼으로 json 활용

database를 만들어 사용하다 보면, 데이터중에  json 으로 데이터를 넣어야 하는 경우가 있습니다.

그런데, json 으로 데이터 컬럼을 추가 할경우, 쿼리 할때 데이터를 가져온다음에 name 이나 type을 비교해야 하는 상당히 불편한 부분이 생깁니다.

다행히도 supabase의 eq() 함수는 json data 내부의 필드값을 접근 할 수 있는 기능을 제공합니다.

https://supabase.com/docs/reference/dart/using-filters

final data = await supabase
  .from('test')
  .select()
  .eq('data->type', 'hello');

# eq 의 -> 가 에러가 발생

그런데 안타깝게도 아래와 같은 에러가 발생 할 수 있습니다.

PostgrestException(message: invalid input syntax for type json, code: 22P02, details: The input string ended unexpectedly., hint: null)

아 !,  -> 기능으로 json 내부 접근해서 쿼리 할수 있을 줄 알았는데 동작을 안하네??? 이러고 좌절 하실수 있는데요.

걱정하지 마세요 !

제가 찾아본 자료에서는 json 내부에 접근하는 접근자  몇가지 있는데요.

가이드에 나와있는 접근자로는 오류가 발생하고 다른 접근자를 사용하면 됩니다.

가이드에 적힌 '->' 느ㄴ son형태의 값을 넘기는 것이고, '->>'를 사용하면 text 값을 정상적으로 처리할 수 있습니다.

final data = await supabase
  .from('test')
  .select()
  .eq('data->>type', 'hello');

이렇게 사용하면 정상적으로 eq 가 동작합니다.

#json, jsonb 의 차이 및 접근자에 대해서 더 알고 싶다면

OperatorRight Operand TypeDescriptionExampleExample Result

https://www.postgresql.org/docs/9.5/functions-json.html

[참고]

https://yeongunheo.tistory.com/entry/PostgreSQL-json-jsonb-%ED%83%80%EC%9E%85%EA%B3%BC-%EC%97%B0%EC%82%B0%EC%9E%90

#해피코딩