[기타] supabase storage 'bucket not found' 에러

storage에 저장한 이미지를 불러오기 위해 storage에서 publicUrl을 가져오려고 했다. 그런데 url은 만들어지는데, 계속 이미지가 뜨지 않는 오류가 발생했다. 해당 url을 직접 브라우저에 입력해서 확인해보니 아래와 같은 값을 볼 수 있었다.

{"statusCode":"404","error":"Bucket not found","message":"Bucket not found"}

 

조금 검색해보니 해당 버킷을 'public'으로 설정하지 않아서 발생한 오류였다.

 

해결방법 1 - 버킷을 public으로 설정하기

따라서 storage의 해당 버킷 이름의 오른쪽에 토글 버튼을 눌러 'edit bucket'에 들어가서 public으로 바꿔주면 된다.

 

이러면 `getPublicUrl` 메소드의 값을 잘 사용할 수 있다.

 

해결방법 2 - `getSignedUrl` 메소드 사용하기

public으로 만들기 싫다면 `getSignedUrl` 메소드를 사용하면 된다. 이 메소드는 `getPublicUrl`과 달리 비동기 함수이다. 또한 해당 url을 유지할 수 있는 시간을 초 단위로 지정할 수 있다.

const getImageUrl = async (path) => {
  const { data:{signedUrl}, error } = await supabase.storage.from(<storage name>).getSignedUrl(path, 60)
  return signedUrl;
}

 

위 코드는 60초, 즉 1분 동안 유효한 url을 반환한다.

 

참고로 여러 이미지에 대한 signedUrl을 받고 싶다면, `getSignedUrls` 메소드를 사용하고 path로 이루어진 배열을 path자리에 넣으면 된다.

 

---

위 내용을 확인할 수 있는 공식 문서도 첨부한다.

JavaScript: Create a signed URL | Supabase Docs