Supabase edge functions를 사용해보자

supabase functions 란?

Supabase Edge Functions은 Supabase의 서버리스 함수 기능 중 하나로, 전 세계의 엣지 네트워크에 함수를 배포하는 기능입니다. 이를 통해 API 요청에 대한 응답 시간을 단축하고 사용자에게 더 빠른 서비스를 제공할 수 있습니다. Supabase의 관리 대시보드를 통해 간편하게 함수를 개발하고 배포할 수 있으며, 엣지 네트워크에 자동으로 배포됩니다. 이를 활용하여 Supabase의 다른 기능과 함께 효과적인 백엔드 서비스를 구축할 수 있습니다.

 

기존에는 aws를 통해 백앤드 서버를 구축하였으나, 간단한 프로젝트인경우 비용도 aws보다 괜찮고, 배포도 매우 편리하기 때문에 꼭 사용해 보셨으면 좋겠습니다 ㅎㅎ

 

supabase functions 사용하기

개발환경은 mac 에서 진행하였으나 추후에 Window에서도 사용해보고 코드 추가할 예정입니다~

 

1. supabase cli를 설치하기

supabase 명령어를 사용하기위해 cli를 설치하여 줍니다.

npm install supabase --save-dev

 

2. supabase login 하기

나중에 deploy하기 위해 로그인을 해야합니다.

supabase login

supabase login 로그인 명령어를 입력하면 아래 사진과 같이 토큰을 입력해달라고 뜹니다.

그럼 아래 사진에서 dashboard > access tokens 탭으로 들어가 generate token 을 해준후 만들어진 토큰을 copy 해줍니다

그다음 프로젝트로 돌아가서 enter your access token: 에 발급받은 토큰을 입력해주시기 바랍니다.

 

3. supabase 파일 만들기

supabase functions new test

위와 같이 명령어를 입력하면 supabase 폴더가 만들어집니다.  진행하는 프론트엔드 프로젝트에 만들어줬습니다. 

 

4. 배포하기

자 이제 index.ts 에 get과 post 요청 하나씩 예시로 작성하고 테스트 해보겠습니다.

[ index.ts ]

 
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

serve(async (req: Request) => {

  if (req.method === 'GET') {
    // GET 요청 처리 로직 작성
    const data = {
      message: 'GET request successful',
    };
    return new Response(JSON.stringify(data), {
      headers: { 'Content-Type': 'application/json' },
    });
  }

  else if (req.method === 'POST') {
    // POST 요청 처리 로직 작성
    const body = await req.text();
    const data = {
      message: `POST request successful. Body: ${body}`,
    };
    return new Response(JSON.stringify(data), {
      headers: { 'Content-Type': 'application/json' },
    });
  }
})

자 이렇게 코드를 작성하고 배포 해줍니다.

supabase functions deploy test

배포시에 Enter your project ref 를 입력하라고 뜨는데 

dashboard > 프로젝트 이름 > project settings 로 들어가 Reference ID를 입력해 주시기 바랍니다.

 

배포한 프로젝트는 

dashboard > 프로젝트 이름 >  edge functions에서 볼 수 있습니다.

postman을 이용하여 아래 url로 요청을 보내보았는데 Missing authorization header 에러가 뜹니다. 그이유는 

enforce jwt verification 이 기본 설정이 true이기 때문입니다 이것을 false로 바꾼후 save하고 다시 요청을 보내보면 아래와 같이 정상적으로 실행 되는것을 보실수 있습니다.

 

이렇게 supabase Edge functions 를 사용하는 방법을 알아보았습니다. 다음에는 edge functions를 사용하여 oauth로그인을 하나씩 진행해 보겠습니다 ^^..!