supabase storage 이미지 업로드

이미지 파일 업로드 할때 base64 문자열 형식으로 이미지 파일을 업로드를 했습니다. 그런데 프로필 이미지를 변경하면 HTTP ERROR 431 에러가 나왔고 원인을 찾아보니 이미지 크기에 따라 문자열이도 길어져 헤더 쿠기의 크기가 초과 되어서 발생한 에러였습니다. 그래서 팀원들과 대화 후 간단하고 빠르게 이미지를 업로드하기 위해서 supabase storage 활용하여 이미지를 문자열이 아닌 url로 저장함으로 에러를 해결했으며 이번 포스팅은 supabase storage를 활용해서 이미지 파일 업로드에 대해 정리를 해보겠습니다.

HTTP ERROR 431 에러발생에 대한 정리글

---

storage 시작

1) supabase에 들어가서 New project를 클릭해 프로젝트를 만들어줍니다.

2) 생성한 프로젝트를 클릭하고 들어가서 왼쪽 사이드바에 storage로 들어갑니다.

3) storage 페이지에 왼쪽 사이드 부분에 New bucket을 클릭하면 아래와 같이 파일 업로드할 bucket을 만들 수 있습니다.

• bucket name은 정하고싶은 name으로 입력

• 공개 버킷 체크

• MIME 유형은 비워두면 모든 유형을 허용이고 이 프로젝트에서는 이미지만 허용이라서 image/*로 설정

  4) Policies 정책 설정

• New policy를 클릭하여 For full customization 전체 사용자 정의
  

• Policy name 지정 해주고 작업 설정

• 타켓은 anon으로 익명으로 누구나 진행 가능

  

(설정 완료)

---

// supabase.ts

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// profileAction.ts

export async function supabaseUploadImage(doc: string, formData: FormData) {
  const file = formData.get("file") as File;
  const fileName = nanoid();

  try {
    const { error } = await supabase.storage
      .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
      .upload(`${doc}/${fileName}`, file);

    if (error) {
      return { state: false, message: "이미지 파일이 업로드 되지않았습니다." };
    }

    const { data } = supabase.storage
      .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
      .getPublicUrl(`${doc}/${fileName}`);

    return { state: true, result: data.publicUrl };
  } catch (error) {
    return { state: false, message: "이미지 업로드에 실패했습니다." };
  }
}

• 하나의 bucket에 업로드하는 이미지들을 해당 사용 폴더로 구분하고자 폴더별로 분리해서 이미지 파일을 업로드

// 프로필 이미지
const upload = await supabaseUploadImage("profile", formData);  

// 스터디 이미지
const upload = await supabaseUploadImage("study", formData);  

---

• 결과 image bucket의 쌓인 이미지 파일

// get image url 

https://vwdgzbbojiqcjpodjyzo.supabase.co/storage/v1/object/public/image/study/wrcfBMpYoT4Q9PTprar3K