[Claude Code] Supabase 데이터베이스 연동

1. Supabase 소개

https://supabase.com/

Supabase

- PostgreSQL이라는 관계형 데이터베이스(RDBMS)를 기반으로 하는 데이터베이스 제공

- 테이블을 만들기만 하면 RESTful API와 GraphQL API가 자동으로 생성되어 프론트엔드에서 바로 호출하는 구조

 

 

 

2. Organization

회원가입을 완료하면 새 Organization을 만들라고 한다. Organization은 여러 프로젝트를 묶어 관리하는 조직을 의미한다.

 

 

 

 

3. Project 생성

대시보드(/dashboard)에 들어가면 내 Organizations를 확인할 수 있을 것이다. Organization 내에서 프로젝트들을 관리 가능하다.

 

 

 Organizations에 들어가서 새 프로젝트를 생성한다.

 

여기서 GitHub (optional) 부분은 짚고 넘어가고자 한다.

깃허브 연동을 해두면 각 Git 브랜치에 preview용 supabase가 생기고, 업데이트를 푸시할 때마다 자동으로 업데이트된다. 그리고 메인 Git 브랜치에 병합하면 supabase는 프로덕션 데이터베이스 내에서 데이터베이스 마이그레이션을 실행한다고 한다.

(출처: https://supabase.com/blog/supabase-branching)

깃허브 레포지토리를 찾을 수 없다면 Add GitHub Repositories를 눌러 직접 추가하면 된다.

 

참고로, 깃허브와 연동하는 메뉴는 아까 들어갔던 Account Settings의 좌측 사이드에 있는 Preference 메뉴에서도 찾을 수 있다.

 

프로젝트를 생성했다면 아래와 같은 프로젝트 화면을 볼 수 있을 것인데

노란색으로 가려둔 부분이 project ref다. 클로드 코드 설정 시 필요한 정보이기 때문에 복사해두자.

 

4. Supabase MCP 서버 설치

supabase 공식 문서의 MCP 설치 가이드를 따르겠다.

https://supabase.com/docs/guides/ai-tools/mcp

Supabase MCP Server | Supabase Docs

 

클로드 코드에서 Supabase MCP 서버를 설치하려면 아래 명령를 입력한다.

claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp"

 

.mcp.json 설정 파일이 생겼다.

 

claude를 실행하니 supabase라는 새 MCP 서버가 발견되었다고 나온다. 이 MCP 서버를 사용하도록 허용한다.

 

/mcp로 MCP 목록을 열고 supabase 인증까지 완료해주자. supabase의 인증 페이지가 누르면 권한을 허용하면 된다.

 

 

 

5. Supabase Access Token 발급

Account preferences 메뉴로 들어가서

 

좌측 사이드 메뉴의 Access Tokens로 가서 Generate new token을 누른다.

 

최초로 토큰을 생성하면 처음에만 보여주고 두 번 다시 볼 수 없기 때문에 안전한 곳에 복사해두자.

 

 

 

6. 프로젝트에 Supabase 설정

아까 생성된 .mcp.json 설정 파일에 들어가서 아래와 같이 설정한다.

SUPABASE_PROJECT_REF는 [3. Project 생성]에서 확인할 수 있었고

SUPABASE_ACCESS_TOKEN은 방금 [5. Supabase Access Token] 에서 확인할 수 있었다.

해당 부분들을 알맞는 정보로 대체하자.

{
  "mcpServers": {
    "supabase": {
      "type": "http",
      "url": "https://mcp.supabase.com/mcp?project_ref=${SUPABASE_PROJECT_REF}",
      "headers": {
        "Authorization": "Bearer ${SUPABASE_ACCESS_TOKEN}"
      }
    }
  }
}

 

 

7. 코드 반영

이제 클로드 코드 프롬프트에 supabase 연동 요청만 하면 끝난다.

 

 

 

8. 데이터베이스 내용 확인

상세 프로젝트 페이지에서 좌측 사이드바의 Table Editor 메뉴에 들어가면 테이블에 담겨있는 데이터들을 확인할 수 있다.