[Dalmuri] Supabase로 랜덤 주제 open API 만들기

지금 작성하고 있는 dalmuri 프로젝트 내에 랜덤 주제를 던지면 그것에 대해 자유롭게 이야기하는 기능을 만들고 있다.

저 문구에 매일 다른 내용으로 바뀌고 자유롭게 이야기하는것을 구성한다.

라즈베리파이를 외부에서 연결 후 DB를 구축하고 싶었는데, 좋은 시스템을 찾는 와중 Supabase라는걸 알게 되었다..

Supabase에 대한 설명은 추후에 작성한다...

 

어찌됬건 Supabase를 통해 open API를 만들고, 그 open API를 내 프로젝트에 불러 위 위젯에 문구를 띄우는 방식으로 만들기로 생각했다. 

 

들어가기 전에!
먼저 Supabase에 프로젝트를 만들었다는 가정 하에 작성한다...

---

1. Supabase에서 TABLE 생성

테이블에는 ID, 내용, 그리고 insert time이 들어가 있다. 랜덤한 주제가 핵심이기 때문에 많은 컬럼을 넣진 않았다.

저런식으로 만들었다. 소재는 차차 더 생각해볼 예정.

참고로 테이블을 생성할 때 반드시 RLS정책을 적용할 수 있도록 표시를 해야 한다!

 

2. 보안 정책 설정

Supabase의 가장 매력적인 장점으로, 각 테이블 별로 정책을 만들 수 있다는 것이다.

open API의 핵심은 사용자가 SELECT문만 가능하도록 해야 한다.

API를 호출하는 사용자가 INSERT, UPDATE, DELETE를 할 수 있으면 절대 안되기 때문....

따라서 SELECT만 할 수 있도록 별도의 설정을 추가한다.

 

1️⃣ Policies 클릭 > create Policy 클릭

 

2️⃣ SELECT만 체크

 

다른걸 선택하면 외부 사용자가 INSERT, UPDATE, DELETE도 할 수 있게 되므로 무조건 SELECT만 허용한다.

 

3️⃣ VIEW 생성

어차피 컨텐츠를 랜덤으로 가져오는 것이므로 사용자는 id나 inserttime같은 부가적인 컬럼은 필요없다.

따라서 api 호출 시 컨텐츠만 가져올 수 있도록, 즉 RANTO_CONTENT만 공개할 수 있도록 VIEW를 생성한다. 

 

(1) SQL 에디터 오픈

화면은 다음과 같이 생겨먹었다

(2) VIEW를 생성하는 쿼리문 작성

-- 뷰를 통해 컨텐츠 컬럼(RANTO_CONTENT)만 공개
CREATE VIEW public."RANDOM_TOPIC_VIEW" 
  WITH (security_invoker = true)
AS
SELECT "RANTO_CONTENT" FROM public."RANDOM_TOPIC";

주의점!

PostegreSQL은 대소문자를 엄격히 구분한다. 또한 별도의 표시가 없다면 무조건 소문자로 인식한다.

public.RANDOM_TOPIC이라고 작성하면 public.random_topic으로 인식하는데, RANDOM_TOPIC = random_topic으로 인식을 하지 못해 Error: Failed to run sql query: 와 같은 에러가 나타났다. 

따라서 대문자로 테이블/컬럼을 작성한 경우 반드시 큰따옴표 "" 를 위와 같이 붙일 것!

이걸 몰라서 중간에 좀 헤맸다ㅋㅋㅎ

그리고 Supabase의 SQL은 주석을 하지 않으면 스크립트 전체가 실행되기 때문에(; 단위로 끊어지지 않더라...?) 반드시 실행할 구문만 남겨두고 나머지는 주석 처리를 하도록 한다.

 

참고로 security_invoker을 설정해야 했는데, 그 원인은 보안 때문이다..

 

➕ SECURITY INVOKER vs SECURITY DEFINER

open API는 누구나 데이터를 조회할 수 있다. 

• SECURITY INVOKER(호출자) : 실제 API 요청을 보내는 사용자의 권한을 기준으로 RLS가 적용되며. 공개용 뷰라면 public 역할에 맞추어 안전하게 공개할 수 있다.
• SECURITY DEFINER(정의자) : 뷰 소유자의 권한을 기준으로 데이터가 반환되며, RLS 정책이 무시될 수 있어 외부에서 접근하면 안되는 데이터까지 노출될 수 있다.

누구를 기준으로 정책 권한을 적용할지 설정하는 것인데, 즉 뷰 소유자의 권한이 읽기/쓰기 등의 중요한 편집이 가능하다면 외부 사용자도 RLS 정책이 무시되어 이상하게 접근할 수 있는 위험이 생기는거다.

따라서 open API로 사용할 예정에서 VIEW를 만들 땐 반드시 'INVOKER'로 할 것!

 

4️⃣ 프로시져 생성

위에서 생성했던 RANDOM_TOPIC_VIEW를 기반으로 랜덤으로 토픽을 가져오는 프로시져를 작성했다.

CREATE FUNCTION get_random_topic() 
RETURNS "RANDOM_TOPIC_VIEW" 
as 
$$
  SELECT * FROM "RANDOM_TOPIC_VIEW" ORDER BY RANDOM() LIMIT 1;
$$
LANGUAGE sql STABLE;

• 함수 이름: get_random_topic
• 함수 옆 괄호()는 파라미터를 받는 영역인데, 지금은 없으므로 비워둠
• RETURNS "RANDOM_TOPIC_VIEW" : RANDOM_TOPIC_VIEW라는 VIEW 전체 구조와 같은 형식으로 반환. RANDOM_TOPIC_VIEW는 RANTO_CONTENT 컬럼만 있으므로 그것만 반환할 것. PostegreSQL에선 TABLE이나 VIEW 이름을 반환 타입으로 지정하면 그 구조대로 반환됨
• AS $$...$$ : 함수의 실제 쿼리문을 담는 SQL 블록
  • SELECT * FROM "RANDOM_TOPIC_VIEW" : 해당 뷰에서 전체 컬럼을 조회(어차피 CONTENT만 있어서 상관 없음)
  • ORDER BY RANDOM() : 랜덤으로 배정함
  • LIMIT 1: 1개의 행만 가져옴
• LANGUAGE sql : 이 함수가 SQL 문법으로 작성됨
• STABLE : 같은 트랜잭션에선 같은 입력에 대해 같은 결과를 반환한다고 DB가 판단

3. 프론트 프로젝트 - supabase 설정

1️⃣ 내 프론트 프로젝트에 .env 파일 설정

SUPABASE_URL에 내 프로젝트 아이디(https://내 프로젝트 아이디.supabse.co)를 작성하고

SUPABASE_ANON_KEY에 Publishable key를 복붙을 하도록 한다. 

참고로 ANON = anonymous란 뜻이기 때문에 각 사이트별로 api key값을 부른 호칭이 다르다. 설명에는 supabase anon key라고 쓰여 있어서 도대체 이게 뭔 키인고... 찾아보니 그냥 publishable key를 갖다쓰면 되는거였다ㅋ

General > Project ID와 

API Keys > Publishable key 를 가져와서 복붙을 하면된다.

 

2️⃣ npm install supabase를 설치

내 프로젝트는 node.js를 사용하니까 npm으로 supabase를 설치한다.

 

3️⃣ 코드 작성

다음과 같이 코드를 작성해본다.

async function getRandomTopic () {
  const { data, error } = await supabase.rpc('get_random_topic')
  if(error) console.error(error)
  if(data) {
    console.log(data)
  }
  setTopic(data.RANTO_CONTENT)
}

저렇게 console.log를 통해 data를 출력하면 잘 나온다!

 

4. 백 프로젝트 - supabase 설정, 연결

내 백은 java+spring을 사용하기 때문에 spring 형식에 따른다.

 

1️⃣ 인텔리제이에 내 DB 연결

이거때문에 좀 많이 애먹었는데 막상 하면 성공할 수 있다.

일단 이 화면이 보여야 한다. 참고로 supabase는 PostgreSQL을 사용하므로 해당 SQL을 선택한다.

 

2️⃣ 내 supabase DB 정보 입력

정보 찾는게 제일 애먹었다. 진짜로ㅋㅋㅋㅋ

한국어 설명은 왜이리 없을까

 

(1) connect 클릭

(2) Method: Sesson pooler 클릭

Session pooler로 클릭하고 view parameters를 클릭하면 인텔리제이 properties에 무슨 정보를 입력해야 하는지 뜬다.

참고로 database는 내가 임의로 적지 말고 postgres를 따라 적는다. 난 괜히 프로젝트명으로 했다가 애먹었다..

그리고 기본 포트번호는 5432이다.

 

(3) 인텔리제이에 그대로 작성, 연결

연결 성공

기존에 create, install했던 테이블과 row들

기존에 만들었던 테이블이 잘 보인다. 오예!

 

그 뒤로 pom.xml에 의존성 추가

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency
<dependency>
	<groupId>org.postgresql</groupId>
	<artifactId>postgresql</artifactId>
</dependency>

참고로 dependencyManagement에 작성하면 안됨! 거기서 작성했다가 괜한 시간 보냈다..

pom.xml에 작성했으면 applicaiton.properties에 개인 jdbc 연결 정보 작성.

그리고 코드 작성, 해결!

 

3️⃣ 코드 작성

 MVC패턴에 의거하여 작성하였다. 여기선 controller, service만 공개

 

(1) controller

public class RandomTopicController {

    public final RandomTopicService service;

    @GetMapping("get-random-topic")
    public RandomTopicResponseDTO getRandomTopic() {
        return service.getRandomTopic();
    } // getRandomTopic

}

 

(2) service

public class RandomTopicService {

    private final JdbcTemplate jdbcTemplate;

    public RandomTopicResponseDTO getRandomTopic () {
        String sql = "SELECT * FROM get_random_topic()";
        Map<String, Object> result = jdbcTemplate.queryForMap(sql);
        String content = (String) result.get("RANTO_CONTENT");

        RandomTopicResponseDTO res = new RandomTopicResponseDTO();
        res.setRantoContent(content);

        return res;
    } // getRandomTopic

}

 

위와 같이 작성하면 호출 시 정상적으로 데이터를 가지고 온걸 확인할 수 있었다. 

 5. Supabase Edge Function으로 openAPI를 만들기

이제 localhost가 아닌 모든 컴퓨터에서 api를 호출할 수 있도록 작업을 한다.

그러기 위해선 또 scoop을 깔아야 하는데... 왜냐면 더이상 supabase가 npm install -g supabase를 지원하지 않기 때문이다 ㅎ....

설치하기 그 전에

C:\Dalmuri
│
├─ src/                   ← React 소스
├─ public/
├─ package.json
└─ supabase/              ← Supabase Edge Function 전용
    ├─ config.toml
    └─ functions/
        └─ get-random-topic/
            ├─ index.ts
            └─ supabase.function.toml

이런식으로 나눠야 하기 때문에 supabase를 위한 폴더를 따로 판다.

 

(1) scoop 설치

Invoke-RestMethod https://get.scoop.sh | Invoke-Expression

 

(2) Supabase Edge Function 설치

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

 

(3) Supabase CLI에 로그인

supabase login

라고 치면 다음 화면이 나오는데,

저기서 나오는 코드를 powershell창에 복붙한다.

그러면 로그인이 되면서

이딴게 뜬다. 지금 🐶고생하면서 코딩하고 있는데 장난하냐?

 

(4) 키값 등록

프론트때 .env에 키값을 추가했던 것과 마찬가지로 등록한다.

supabase secrets set SUPABASE_URL=https://<URprojectID>.supabase.co
supabase secrets set SUPABASE_ANON_KEY=<your-anon-key>

를 등록하는데, 만약

이런 류의 에러 문구가 나면 이미 SUPABASE_URL, SUPABASE_ANON_KEY 같은 이름이 Edge Functions에서 이미 시스템 환경 변수로 사용되고 있으므로 따로 secrets로 등록할 필요 없다는 뜻이다.

 

(5) 코드 작성

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.36.0";

serve(async () => {
  // 환경변수에서 supabase 정보 꺼내기
  const SUPABASE_URL = Deno.env.get("SUPABASE_URL")
  const SUPABASE_ANON_KEY = Deno.env.get("SUPABASE_ANON_KEY")

  const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

  try {
   // 여긴 본인 상황에 맞는 코드를 작성하면 된다.
    const { data, error } = await supabase.select .... 
    if (error) console.error(error)
    if(data){
      console.log(data)
    }

    if(!data || data.length === 0) {
      return new Response(JSON.stringify({rantoContent:null}), {
        status: 200,
        headers: {
          'content-type': 'application/json',
          'Access-Control-Allow-Origin': '*', // 공개 허용
        },
      })
    }

  } catch (err) {
    console.error(err)
    return new Response(JSON.stringify({rantoContent:null}), {
      status: 500,
      headers: {
        'content-type': 'application/json',
        "Access-Control-Allow-Origin": "*",
      },
    })
  }
})

코드를 어떻게 작성할지는 개발자마다 각각 다르기 때문에 예시로서 저렇게 남겨둔다.

 

(6) 배포하기

배포 명령어는 아래와 같다.

supabase functions deploy 배포할 function 이름 --no-verify-jwt

왜 --no-verify-jwt를 덧붙였냐면...supabase는 기본적으로 JWT 인증을 요구하기 때문이다.

근데 아무나 호출하는 공개 api로 만들려면 jwt인증을 끄거나, anon key를 심어서 호출해야 한다.

 

• 인증 켜진 상태
  • Authorization 헤더 필수
  • Supabase ANON_KEY 또는 로그인 토큰 필요
  • 안 붙이면 401 에러
• --no-verify-jwt 사용
  • 인증 체크 끔
  • 누구나 URL만 알면 호출 가능
  • 브라우저에서 쉽게 fetch 가능

 

근데 anon-key를 붙이고 호출하면 나중에 괜히 키값 노출될까봐 그냥 jwt 인증을 없이 부를 수 있도록 설정했다.

단 배포할 때 마다 반드시 no verify jwt를 붙일 것!

 

6. 결과물!

랜덤으로 주제 하나를 던지는 공개 API로, 인증이나 키 없이 접근할 수 있다.

 

Endpoint

https://llfsxgdcamgbxpwcsnwh.functions.supabase.co/get-random-topic

 

Request 

Method	URL	Headers	Body
GET	/get-random-topic	없음	없음

 

Response

• 200 ok

[
  {
    "RANTO_CONTENT": "오늘 저녁메뉴 추천!"
  }
]

• 500 error : null / undefined 반환

CORS 정책

• 모든 도메인에서 접근 가능 (Access-Control-Allow-Origin: *)
• 프론트에서 바로 fetch 호출 가능

예시

async function fetchRandomTopic() {
  const response = await fetch('https://llfsxgdcamgbxpwcsnwh.functions.supabase.co/get-random-topic');
  const data = await response.json();
  console.log(data[0].RANTO_CONTENT);
}

fetchRandomTopic();

이거 만드는데 왜이리 힘드냐...

그리고 계속 호출하지 마라 supabase 무로버전이라 서버 부셔질까 걱정된다... 나도 하루에 한번 호출하는데

(그럴거면 왜 오픈함?ㅋㅋㅋ;)

7. 중간중간 오류 원인

1. RANDOM_TOPIC_VIEW가 있는데 DB에서 인식을 못한 경우

👉 함수의 반환 타입(Returns Type) 불일치. 함수 뷰 구조의 여러행(SETOF)을 반환해야 했으나 초기에 단일행을 반환하는것처럼 작성됨. VIEW는 여러 행을 반환하나 내가 단일 행만 반환한다고 잘못 선언했음

따라서 기존의 RETURNS_뷰_이름에서 RETURNS SETOF 뷰_이름으로 변경함

 

2. [XX000] FATAL: MaxClientsInSessionMode: max clients reached - in Session mode max clients are limited to pool_size

이 에러는 connection pool을 30으로 늘렸더니 해결은 했지만.. connection pool에 대해 공부해야겠다. 이건 다른 포스트에서!

 

3. scoop와 supabase가 새로 만든 프로젝트에서 인식이 되지 않아 오류가 발생하는 문제

시스템 환경변수 편집 > 환경 변수 > 새로만들기 > path 클릭 > scoops\shims가 있는 파일을 추가

근데도 인식 안되면 껐다 켜라. 난 됬다ㅋ

 

[참고 자료]

https://rlawo32.tistory.com/entry/SUPABASE-SUPABASE-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[Supabase] Supabase 사용하기

 

https://velog.io/@manner9945/supabase-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-6tyu3xcx

supabase 사용하기

https://velog.io/@itzel_02/IntelliJ-DB-%EC%97%B0%EB%8F%99

IntelliJ & DB 연동

https://like-grapejuice.tistory.com/214

PostgreSQL 환경설정 Intellij로 connect하기 + java code로 실행하기

https://ai-one.tistory.com/entry/Supabase-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%A0%91%EC%86%8D-%EC%A0%95%EB%B3%B4-%EC%95%88%EB%82%B4

IT 개발자 블로그 - Java, Spring Boot, React 등