Supabase（スーパーベース・スパベース）の使い方5回目となります。
今回はこれまで作成してきたWebアプリに、画像をアップロードする機能をつけます。Supabaseのstorage機能を使っていきます。
storageもまたセキュリティが高いのよね～
気になるわ！
なお前回までの記事を見ていない方は、まずはこちらをチェックしておいてくださいね。
SupabaseでStorage設定
まずはSupabase側でStorageの設定を進めておきましょう。最初に、ファイルを入れる箱（Bucket・バケツ）を作ります。
Bucketの作成
ログインし、プロジェクトを開きます。サイドバーのStorageを開き、【New bucket】をクリック。
下記のように設定しておきます。
- Bucket Nameはimagesとしておきます。
- Publicにチェックを入れます。Publicにすると、URLを知っていれば誰でもファイルにアクセスできるようになります。
- Restrict file sizeには、ファイルサイズの上限をいれます。今回は5MBまでとします。
- Restrict MIME typesには、保存するファイルの種類をいれます。今回はJPEGまたはPNG形式の画像ファイルのみ保存したいので、 image/jpeg,image/pngとします。
誰にでも見られたくない場合は、Privateを選んでね。すると、Webアプリのコードを通じてしかアクセスできなくなるから。
そんなことも簡単にできるのね！
Bucketのポリシー設定
次に、Bucketのポリシーを設定します。前回はデータベースにポリシーを設定しましたが、Supabaseでは、Bucketにもポリシーを設定し、細かくアクセス制限をかけられます。
ポリシーでは、Webアプリのコードを通じたアクセスを制御できます。
画像の新規作成、編集、削除を誰ができるか設定できるの。
まあ。色々できるのね。
作成したBucketをクリックします。【Policies】をクリックします。
【New policy】をクリックします。
今回は【For full customization】を選択します。
下記のように設定します。
- Policynameを適当につけます。
- Allowed operationでは、すべてにチェックを入れます。
- Target rolesでは、今回はauthenticatedを選択します。これで、認証ユーザーのみがすべての操作（アップロード・閲覧・更新・削除）を行えるようになります。
![]()
テーブルにカラム（列）追加
画像が追加されたときには、データベースにパスをいれるようにします。これによって、パスを使って画像を表示することができます。
サイドバーのTable Editorより、テーブルを選びます。本記事ではbihinsテーブルを選択します。【Insert】ボタンをクリックし、Insert columnを選択します。
下記のように設定します。
- Nameには、カラム（列）名をいれます。image_pathとしておきます。
- Data Typeには、データ型をいれます。今回はtextにします。
Webアプリ側の修正
これでSupabase側の準備が整いました。次に、Webアプリ側に機能を搭載します。
Claude Code等で下記のように指示してコードを書いてもらいます。
コードを搭載後、実際にテストしてみてください。
【テスト手順】
- Webアプリにログイン
- 画像を登録
- SupabaseのTable Editor → bihinsテーブルのimage_pathカラムにパスが入ることを確認
- SupabaseのStorage → imagesに画像が入っていることを確認
- 編集・削除も実行
あら、ちゃんと画像が登録できるわ。なんだか嬉しい！
画像がちゃんとひょうじされると嬉しいよね。もし表示されない場合は、ポリシーを見直したりしてみて。
さいごに
Storage機能でも、色々とアクセス制御ができることをご紹介しましたが、いかがでしたか。
今回はPublic設定で手軽に進めましたが、Privateにすれば、「見る」ことにも制限をかけられます。さらにコードで署名付きURLを発行すれば、有効期限付きでファイルを共有することも可能です。
詳しくは公式ドキュメントのSigning URLsをご覧ください。
普段はそこまで必要ないかもしれないけど、いざという時は、ルールを強めにできるのが良いわね。
でしょ。
Supabase講座、また時々更新したいと思うので、ご興味あれば見てくださいね。
