ストレージ

概要

Supabase Storageは、大容量のファイルを簡単に保存して利用できます。

ファイル

ファイルには、あらゆる種類のメディア・ファイルが含まれます。これには、画像、GIF、ビデオなどが含まれます。ファイルはサイズが大きいので、データベースの外に保存するのがよいでしょう。

フォルダー

フォルダーは、ファイルを整理するための方法です（自分のコンピューターと同じです）。 ファイルの整理方法には、正解や不正解もありません。自分のプロジェクトに合ったフォルダー構成でファイルを保存できます。

バケット

バケットとは、ファイルやフォルダーを入れる独立した容器のことです。一般的には、セキュリティールールやアクセスルールごとに異なるバケットを作成します。例えば、すべてのパブリックなファイルは「public（パブリック）」バケットに入れ、ログインしてアクセスする必要のあるファイルは「restricted（制限された）」バケットに入れるといった具合です。

はじめに

これはSupabase Storageの基本的な機能を示すクイック・ガイドです。デプロイできる完全なGitHubのサンプルアプリケーションをご覧ください。

Note はじめるまえに : ファイル名、フォルダー名、バケット名は、必ずAWSのセーフ文字のガイドラインに従い、他の文字の使用は避けてください。

バケットを作成

Supabaseダッシュボードを使ってバケットを作成できます。 ストレージはPostgresデータベースと相互運用性がありますので、SQLやクライアントライブラリーを使用できます。ここでは「avatars」というバケットを作成します。

UI

1. 「Storage」セクションに移動します。
2. 「Create Bucket」をクリックします。
3. バケット名を入力します。
4. 「Create Bucket」をクリックします。

SQL

-- Potgresを使ってバケットを作成します。

insert into storage.buckets (id, name)
values ('avatars', 'avatars');

JavaScript

// JSライブラリを使ってバケットを作成します。

const { data, error } = await supabase.storage.createBucket('avatars')

リファレンス

Dart

void main() async {
  final client = SupabaseClient('supabaseUrl', 'supabaseKey');

  final storageResponse = await client
      .storage
      .createBucket('avatars');
}

リファレンス

ファイルをアップロード

ファイルのアップロードは、ダッシュボードからでも、JSライブラリーを使ってブラウザー内からでも可能です。

UI

1. 「Storage」セクションに移動します。
2. ファイルをアップロードしたいバケットを選択します。
3. 「Upload File」をクリックします。
4. 表示されるダイアログで、アップロードしたいファイルを選択します。

JavaScript

const avatarFile = event.target.files[0]
const { data, error } = await supabase.storage
  .from('avatars')
  .upload('public/avatar1.png', avatarFile)

リファレンス

Dart

void main() async {
  final client = SupabaseClient('supabaseUrl', 'supabaseKey');

  // Create file `example.txt` and upload it in `public` bucket
  final file = File('example.txt');
  file.writeAsStringSync('File content');
  final storageResponse = await client
      .storage
      .from('public')
      .upload('example.txt', file);
}

ファイルをダウンロード

ファイルのダウンロードは、ダッシュボードからでも、JSライブラリーを使ってブラウザー内からでも可能です。

UI

1. 「Storage」セクションに移動します。
2. ファイルが入っているバケットを選択します。
3. ダウンロードしたいファイルを選択します。
4. 「Download」ボタンをクリックします。

JavaScript

// JSライブラリを使用して、バケットを作成します。

const { data, error } = await supabase.storage.from('avatars').download('public/avatar1.png')

リファレンス

Dart

void main() async {
  final client = SupabaseClient('supabaseUrl', 'supabaseKey');

  final storageResponse = await client
      .storage
      .from('public')
      .download('example.txt');
}

セキュリティールールの追加

ファイルへのアクセスを制限するには、ダッシュボードまたはSQLを使用します。

UI

1. 「Storage」セクションに移動します。
2. サイドバーの「Policy」をクリックします。
3. 「OBJECTS」テーブルの「Add Policies」をクリックすると、ファイルのポリシーが追加されます。また、バケットのポリシーも作成できます。
4. ポリシーを、ダウンロード（SELECT）、アップロード（INSERT）、アップデート（UPDATE）、削除（DELETE）のいずれに適用するかを選択します。
5. ポリシーにはユニークな名前をつけます。
6. SQLを使ってポリシーを書きます。

SQL

-- SQLを使ってポリシーを作成します。

create policy "Public Access"
  on storage.objects for select
  using ( bucket_id = 'public' );

ヘルパー

Supabase Storageには、データベースのクエリやポリシーで使用できるデータベースSQLヘルパー関数が設定されています。

---

storage.filename()

ファイルの名前を返します。

select storage.filename(name)
from storage.objects;

例えば、ファイルがpublic/subfolder/avatar.pngに格納されている場合、次のように返されます。

'avatar.png'

---

storage.foldername()

ファイルが属するすべてのサブフォルダーをパスの配列で返します。

select storage.foldername(name)
from storage.objects;

例えば、ファイルがpublic/subfolder/avatar.pngに格納されている場合、次のように返されます。

[ 'public', 'subfolder' ]

---

storage.extension()

ファイルの拡張子を返します。

select storage.extension(name)
from storage.objects;

例えば、ファイルがpublic/subfolder/avatar.pngに格納されている場合、次のように返されます。

'png'

---

オブジェクトへのアクセス

プライベートなバケットの場合、downloadメソッドでオブジェクトにアクセスできます。これは/object/auth/ APIエンドポイントに対応します。あるいは、createSignedUrlメソッドを使って、有効期限のあるパブリックに共有可能なURLを作成できます。このメソッドは、/object/sign/ APIを呼び出します。 また、/object/sign/ APIを呼びだすcreateSignedUrlメソッドを使用して、有効期限付きの公開用URLを作成可能です。

パブリックなバケットでは、トークンやAuthorisationヘッダーなしでアセットに直接アクセスできます。getPublicUrlヘルパーメソッドは、アセットの完全なパブリックURLを返します。これは、/object/public/ APIエンドポイントを内部的に呼び出します。

上級向け：リバース・プロキシ

返されるURLは、APIプロキシを経由してプロキシされたものです。これらのURLには/storage/v1というプレフィックスが付きます。

例えば、ホストされたプラットフォームでは、以下のようになります。

https://[project_ref].supabase.co/ストレージ/v1/object/public/[id]

同じエンドポイントを使用して、Storage APIに直接アクセスできます。利用できる操作の一覧は、APIドキュメントを参照してください。

---

セキュリティー

Supabase Storageは、Postgresデータベースと統合されています。つまり、ファイルへのアクセスを管理するために、同じポリシーエンジンを使用できるのです。

ポリシーの例

ここでは、PostgreSQLの行単位セキュリティーの威力を示す例を紹介します。各ポリシーはテーブルに添付され、テーブルがアクセスされるたびにポリシーが実行されます。

バケットへのパブリックなアクセスを許可する

-- 1. 「public（パブリック）」バケット内のすべてのファイルへのアクセスを許可
create policy "Public Access"
on storage.objects for select
using ( bucket_id = 'public' );

ログイン状態でのバケットへのアクセスを許可

-- 1. 「restricted（制限付き）」バケット内のすべてのファイルへのログインした状態でのアクセスを許可
create policy "Restricted Access"
on storage.objects for select
using (
  bucket_id = 'restricted'
  and auth.role() = 'authenticated'
);

ファイルへの個別のアクセスを許可

-- 1. ユーザーが自分のファイルにアクセスできるようにする
create policy "Individual user Access"
on storage.objects for select
using ( auth.uid() = owner );

リソース

• GitHubでAPIサーバーを参照：github.com/supabase/storage-api
• Swagger API Docsをオンラインで参照：supabase.github.io/storage-api
• 公式クライアントライブラリーのドキュメント：JavaScriptとDart
• コミュニティーによるライブラリー：github.com/supabase-community

次のステップ

• 何か質問がありしたら、こちらで質問してください
• ストレージの詳細はブログ記事を参照してください
• サインイン：app.supabase.com