미카 프로젝트

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. 로컬에는 기본적인 테스트 가능한 데이터만 입력합니다.

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

#해피코딩