"Firebase의 대체 플랫폼""Supabase"""

안녕하세요, 저는 개입니다.
파이어베이스 대체재로 불리는'수파베이스'를 만졌기 때문에 대략적으로 소개했다.

수파베이스가 뭐예요?

수파베이스(슈퍼베이스)는 다양한 기능에 클라우드로 접근할 수 있는 플랫폼이다.(Firebase를 상상해 보세요. 기본적으로 맞습니다.)
https://supabase.io/
웹의 관리 화면에서 DB를 제작하거나 API를 통해 제작된 DB의 데이터를 가져올 수 있다.각종 인증 기능(메일, SNS)도 있다.
Supabase에는 여러 개의 오픈소스가 사용되며 Supabase 자체도 오픈소스입니다.따라서 자체 인프라에 수파베이스를 구축할 수 있다.

Firebase와의 비교

Supabase 자체는 Firebase의 대체를 목적으로 하지 않습니다.
다만 Firebase를 사용한 사용자의 이력이 있기 때문에 Firebase가 편리한 곳을 이용하면서 독자적인 기능을 제공하는 것을 고려할 수 있다.
Firebase
Supabase
Authentication
메일 + 주요 SNS
메일+Google, Giithub, Giitlab, Bitbucket
Database
NoSQL
PostgreSQL
데이터로부터 가져오기
클라이언트 + API
클라이언트 + API
Storage
지원(+Hosting)
Coming soon
Functions
뒷받침
Coming soon
Firebase 측에는 이 외에도 다양한 기능(Crashlytics 등)이 있지만, 수파베이스 측에는 없다.
우선 인증과 데이터 주변을 잘 지원해야 한다.

가격.

2020년 12월까지 무료로 이용할 수 있다.
2020년 12월 이전α버전은 2020년 12월 이후β버전으로β버전의 사용자는 1년 동안 인터넷 기능을 무료로 사용할 수 있다.
이에 따라 2021년부터 클라우드 버전의 접대 비용 체계가 나오지 않았나.
또 스폰서로 기여할 수도 있다.
https://supabase.io/docs/pricing

건드린 주관자

데이터 구조가 다르다

Firebase와 가장 큰 차이점은 Firebase는 NosQL을, Supabase는 PostgreSQL을 선택했다는 것이다.
Firebase도 확실히 편리하지만 Realtime Database의 예법을 배워야 하기 때문에 사용하려면 일정한 학습 비용이 필요하다.
이런 점에서 수파베이스는 평소 친분이 있는 DB를 접하는 이들에게는 친해지기 쉬워 학습 비용 없이 진행할 수 있는 경우가 거의 없다.

화면 관리 용이성

수파베이스는 Firebase보다 관리 화면이 직관적이어서 로그인해보니 "알아요... 안 찾아도 알아요...!"이런 인상.
처리된 데이터도 DB와 관련이 있다는 점에서 문서를 보지 않고도 데이터 구조를 만들 수 있다.

Supabase 관리 화면

Supabase에 로그인

Giithub 계정으로 로그인할 수 있습니다.
로그인 후 ORGANIZATIONS(팀과 유사한 것)를 제작하고 그 밑에서 프로젝트(프로젝트)를 제작한다.
프로젝트 제작 시 구역을 선택할 수 있고, 글이 공개될 때 선택할 수 있는 구역은 여기에 있다.

프로젝트를 만들려면 2분 정도 기다려야 하고, 이후 관리 화면을 접하게 된다.

데이터베이스

시도한 거라 테이블을 간단히 만들었어요.
사용자 테이블
3

id: int4; // 主キー
name: varchar;

메시지 테이블
3

id: int4; // 主キー
message: text; // not null
userId: int4; // user.idの外部キー

외부 버튼 및 NotNull을 설정할 수도 있습니다.
이것은 실제 데이터를 입력한 화면이다.
데이터는 표 형식으로 표시된다.웹 기반 관계 DB를 처리하는 클라이언트 애플리케이션으로 인식됩니다.

데이터 액세스

API를 통해 위의 테이블에 액세스할 수 있습니다.
API 클라이언트는 공식적으로는 자바스크립트만 있고 커뮤니티 제작에는 C#, 파이톤, Rust가 있는 것 같다.
테이블이 만들어진 API 관리 화면입니다.

표를 제작한 후 화면 왼쪽의 일람표에'user'와'메시지'가 추가되어 페이지를 보면 자동으로 제작된 표에 대한 CRUD 처리 코드가 생성됩니다.
따라서 오른쪽 코드를 실제로 복사하면 SELECT 작업, INSERT 작업 등을 시도할 수 있다.
대단해!대단해, 수파베이스!
또한 관계 테이블을 통일적으로 얻을 수 있습니다.

Supabase 액세스 키

제작된 데이터에 대한 접근은 관리 화면에서 나오는 키이기 때문에 그것을 사용합니다.
Firebase와 마찬가지로 두 개의 키가 있습니다.

클라이언트 API 키
브라우저 측에서 사용하는 API 키입니다.인증하기 전에 익명 사용자로 간주됩니다.
실시간 통신은 아직 개발 중인 것 같아서 인증할 수 없습니다.

서비스 키(= 서버 API 키)
이것은 서버에서 사용하는 API 키입니다.데이터에 완전히 접근할 수 있다.

이걸로 실제 브라우저에서 방문하고 싶습니다.

브라우저에서 액세스

간단한 응용 프로그램을 만들어 보세요.
nuxt.나는 js에서 프로젝트를 만들고 그것을 거기에 편입했다.(nuxt.js 측 생략)

설치하다.

JavaScript용 프로그램 라이브러리를 제공하기 때문에 설치합니다.

$ npm install --save @supabase/supabase-js

초기화

프로젝트 페이지에supabase를 불러옵니다.
SUPABASE_KEY와 SUPABASEURL이 Supabase 관리 화면에 로그인하면 API 페이지에 표시됩니다.

import { createClient } from '@supabase/supabase-js'

const SUPABASE_KEY = '<クライアントAPIキー>'
const SUPABASE_URL = 'https://<プロジェクトID>.supabase.co'
// 初期化
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

사용자 등록

아, 이미 끝났어...?
수파베이스 관리 화면을 보면 실제로 사용자가 만든 것이라는 것을 알 수 있다.
대단하다, 수파베이스.

로그인, 로그아웃 등의 작업을 JavaScript에서도 수행할 수 있습니다.

Supabase의 향후

Supabase를 사용하면 Firebase보다 백엔드를 쉽게 만들 수 있습니다.
관리 화면은 간단하고 이해하기 쉬우며 관계 DB에서도 Firebase보다 학습 비용이 현저히 적다.
다만, 서비스 자체β버전이 이제 막 시작되었기 때문에 기능이 부족해서 앞으로 문제가 생길 수 있다.
따라서 지금은 정식으로 사용하기에는 적합하지 않지만 어느 정도의 샘플을 만들어 활용하는 데는 매우 좋다.
이후 샘플 응용이 어느 정도 검증될 수 있다면 실제 백엔드 설치를 추진하는 형식이 좋지 않겠는가.
이렇게 많은 학습 비용이 없고 백엔드 부분을 만들 수 있는 매우 위협적인 플랫폼이다.저도 개인적으로 앞으로의 발전을 기대합니다.

끝맺다

앞으로 서비스 검증을 할 때 수파베이스를 사용하고 싶습니다.역시 오늘 이맘때 친한 DB가 안도감을 느낀다.
감사합니다:)
이 기사에 도움이 되는 분이 있다면 주목해 주세요.