Supabase の storage から getPublicUrl() した値が404になる問題

Supabase では storage にアップロードしたリソースのパブリックなURLを取得するメソッド getPublicUrl() が用意されているのですが、このメソッドを使って取得した値が 404 になるケースに遭遇しました。

export const removeBucketPath = (key: string, bucketName: string) => {
  return key.slice(bucketName.length + 1) // "/"の分だけ加算している
}

// この結果が404になる
const { publicURL, error } = supabase.storage.from("photos").getPublicUrl(removeBucketPath(photo.url, "photos"))

storage のキーも合っているし、getPublicUrl() に渡す bucket のパスも合っているので、原因がなにか分からずしばらく途方に暮れていました。

しばらく Supabase のダッシュボードを眺めていたら、この問題に気がつきました。

▼これ

supabase の bucket は private か public かのいずれかの状態があるのですが、これが private になっていました（上記の画像は修正後なので public になっています）。

ここを public に変更したら、無事取得できるようになりました。

supabase.com

The bucket needs to be set to public, either via updateBucket() or by going to Storage on app.supabase.io, clicking the overflow menu on a bucket and choosing "Make public"