【保存版】Supabase Storageで実現する、爆速・安全なファイル管理ガイド

Webアプリやモバイルアプリを開発する際、画像や動画、PDFなどの「ファイル管理」は避けて通れない課題です。 かつては自前でサーバーを立てたり、複雑なAWS S3のIAMポリシー設定に頭を抱えたりしたものですが、今は違います。

今回は、Firebaseの対抗馬として不動の地位を築いたBaaS「Supabase」が提供する、強力かつ開発者フレンドリーなSupabase Storageについて、基礎から実戦で使えるテクニックまで徹底解説します。

1. Supabase Storageとは？

Supabase Storageは、AWS S3をバックエンドに採用しつつ、PostgreSQLの強力な権限管理（RLS）をそのまま利用できるファイルストレージサービスです。

単なるファイル置き場ではなく、以下のような特徴を持ちます。

• 直感的なUI: ダッシュボードからドラッグ＆ドロップで簡単にファイルを操作可能。
• 堅牢なセキュリティ: 誰がどのファイルにアクセス・編集できるかを、SQLと同じ感覚で細かく制御。
• Smart CDNによる高速配信: 世界中のエッジサーバーからファイルが配信されるため、どこからアクセスしても表示が速い。

構成要素の3本柱

Supabase Storageは、以下の3つの階層で成り立っています。

• Buckets（バケット）: ファイルの最上位コンテナ。用途ごとに複数作成し、「公開（Public）」か「非公開（Private）」かを最初に決めます。
• Folders（フォルダ）: バケット内でファイルを整理するための仮想的な階層。
• Files（ファイル）: 実際にアップロードされる画像やドキュメントなどの実体。

2. ここが凄い！Supabase Storageの3つのメリット

① RLS（行単位セキュリティー）との完全統合

Supabase Storage最大の特徴は、「認証（Auth）」と「データベース」がストレージと直結していることです。 バケットを「非公開（Private）」にした上で、SQLでポリシーを書くことで、非常に柔軟なアクセス制限が可能です。

【実戦的なRLSポリシーの例】 例えば、「ユーザーが自分のID名のフォルダ（例: avatars/ユーザーID/）にだけ画像をアップロードできる」というルールは以下のように書きます。

-- 自身のフォルダ内のみアップロード（INSERT）を許可する
CREATE POLICY "Users can upload to their own folder"
ON storage.objects FOR INSERT
TO authenticated
WITH CHECK (
  bucket_id = 'avatars' AND 
  (storage.foldername(name))[1] = auth.uid()::text
);

複雑なサーバー側のAPIを書かなくても、データベース層で直接ブロックしてくれるため、圧倒的に安全です。

② 画像の動的リサイズ機能（Proプラン以上）

フロントエンドで重い画像処理をする必要はありません。URLの末尾にパラメータを付けるだけで、エッジサーバー側で画像をリサイズ・最適化してくれます。

// クライアント側で最適化された画像URLを取得する例
const { data } = supabase.storage
  .from('photos')
  .getPublicUrl('landscape.jpg', {
    transform: {
      width: 800,
      quality: 80, // 画質を80%に落として軽量化
      format: 'webp', // WebPへ自動変換
    },
  })

元の画像が数MBあっても、ユーザーには最適化された数十KBの画像が届くため、パフォーマンスが劇的に向上します。

③ 圧倒的な開発体験（DX）

公式のJavaScript SDKを使えば、アップロード処理も非常にシンプルです。 キャッシュの事故（古い画像が表示され続けるなど）を防ぐため、ファイル名にはUUIDを使うのがベストプラクティスです。

import { v4 as uuidv4 } from 'uuid';

// ファイル名の一意化
const fileName = `${uuidv4()}.png`;

const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`public/${fileName}`, file, {
    cacheControl: '3600', // キャッシュ制御も簡単
    upsert: false // 上書きを防ぐ
  });

3. 大容量ファイルにも対応（TUSプロトコル）

動画などの大きなファイルを扱う場合、途中で通信が切れてしまうことがあります。 Supabase Storageはオープンソースのプロトコルである TUS（Resumable Uploads） をサポートしています。

これにより、アップロードが90%で途切れても、最初からやり直すことなく残りの10%から再開できるため、モバイル回線など不安定な環境でも確実なファイル保存が可能です。

4. 料金プランと制限（2026年時点）

個人開発やプロトタイプなら、無料枠で十分すぎるスペックが提供されています。

まとめ：どんな時に使うべきか？

Supabase Storageは、以下のようなプロジェクトに強く推奨できます。

• Next.jsやReact、Flutterなどでモダンなアプリを作っている
• ユーザーごとに「見れるファイル・編集できるファイル」を細かく制御したい
• 画像の自動リサイズやCDN配信を手軽に導入したい
• インフラ構築に時間をかけず、コア機能の開発に集中したい

設定はわずか数分。まずはSupabaseのダッシュボードで「New Bucket」を作成し、ファイルをドラッグ＆ドロップしてみるところから体験してみてください！