241022 Supabase 01 기본세팅

신한별·2024년 10월 22일

TIL next.js supabase 정리

💪 매일 기록

목록 보기

83/97

Supabase

Supabase 오픈 소스 백엔드 플랫폼이다.
Supabase는 복잡한 서버 관리, 확장성, 보안 등의 문제를 해결해 주어 개발자가 핵심 로직에 집중할 수 있도록 돕는다.

데이터베이스 관리: PostgreSQL 기반의 데이터베이스를 제공하여 안정적이고 강력한 데이터 관리를 지원한다.
인증 서비스: 사용자 인증 및 관리를 손쉽게 할 수 있다.
스토리지 서비스: 파일 스토리지 기능을 통해 애플리케이션에서 필요한 파일을 안전하게 저장하고 관리할 수 있다.

Supabase와 서버리스

서버리스 아키텍처
백엔드 서비스를 제공하는 서버가 여전히 존재하지만, 서버 공간과 인프라 관리를 서비스 제공 업체가 처리하는 방식.
개발자는 서버 관리에 신경 쓸 필요 없이 코드를 작성하고 배포할 수 있다.

Supabase는 PostgreSQL 데이터베이스를 기반으로 다양한 BaaS(Backend-as-a-Service) 기능과 엣지 함수(Edge Functions)라는 FaaS(Function-as-a-Service) 기능을 제공한다.
ex) 데이터베이스 변경 시 특정 작업을 수행하거나 사용자 지정 인증 로직을 구현할 수 있다.

BaaS와 FaaS

Function-as-a-Service (FaaS): 이벤트(예: HTTP 요청, 데이터베이스 변경)에 의해 트리거되는 함수 단위로 코드를 실행.
- 대표적인 예로 AWS Lambda, Azure Functions, Google Cloud Functions가 있다.
Backend-as-a-Service (BaaS): 애플리케이션 백엔드에서 자주 사용되는 기능(예: 데이터베이스, 인증, 스토리지)을 서비스 형태로 제공.
- Supabase, Firebase, AWS Amplify 등이 이에 해당.

💘 Supabase 설정

테이블 생성

RLS 설정은 켜는 것이 좋다.
끄게 되면 DB에 권한이 없는 모두가 접근할 수 있다. (편리하지만 보안에 취약하다.)

Primary & Is Identify 를 체크하면 row를 추가할 때마다 자동으로 id값이 추가된다.

💘 Supabase와 vscode 프로젝트 연결

1. 패키지 설치

yarn add @supabase/ssr
yarn add @supabase/supabase-js

2. API 키 취득과 환경변수 설정(.env.local)

.env.local을 root에 만들어주고 아래의 코드를 입력해준다.
NEXT_PUBLIC_SUPABASE_URL=내 프로젝트 URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=내 API Key

3. 기타 코드 설정

💚 src/utils/supabase/client.ts

import { createBrowserClient } from "@supabase/ssr";

export const createClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );

const browserClient = createClient();

export default browserClient;

💚 src/utils/supabase/server.ts

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export const createClient = () => {
  const cookieStore = cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) => {
              cookieStore.set(name, value, options);
            });
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  );
};

export const getIsLogin = async () => {
  const serverClient = createClient();
  const {
    data: { session },
  } = await serverClient.auth.getSession();
  return !!session;
};

💚 src/utils/supabase/middleware.ts

import { createServerClient } from "@supabase/ssr";
import { type NextRequest, NextResponse } from "next/server";

export const updateSession = async (request: NextRequest) => {
  // This `try/catch` block is only here for the interactive tutorial.
  // Feel free to remove once you have Supabase connected.
  try {
    // Create an unmodified response
    let response = NextResponse.next({
      request: {
        headers: request.headers,
      },
    });

    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          getAll() {
            return request.cookies.getAll();
          },
          setAll(cookiesToSet) {
            cookiesToSet.forEach(({ name, value }) =>
              request.cookies.set(name, value)
            );
            response = NextResponse.next({
              request,
            });
            cookiesToSet.forEach(({ name, value, options }) =>
              response.cookies.set(name, value, options)
            );
          },
        },
      }
    );

    // This will refresh session if expired - required for Server Components
    // https://supabase.com/docs/guides/auth/server-side/nextjs
    await supabase.auth.getUser();

    return response;
  } catch (e) {
    // If you are here, a Supabase client could not be created!
    // This is likely because you have not set up environment variables.
    // Check out http://localhost:3000 for Next Steps.
    return NextResponse.next({
      request: {
        headers: request.headers,
      },
    });
  }
};

4. 페이지 코드 설정 및 RLS policy

import { createClient } from "@/utils/supabase/server";

const SupabaseTest = async () => {
  const serverClient = createClient();
  const { data: supabaseData } = await serverClient.from("test_table").select(); // supabase의 'test_table'테이블에 있는 모든 row를 불러온다.

  console.log(supabaseData);

  return <div>page</div>;
};

export default SupabaseTest;