番外編 画像アップロードをつける（保存先の選び方つき）

初級編で「文字のデータ」は保存できるようになりました。次は画像——プロフィールのアバターや投稿写真です。作り方は他のレッスンと地続きですが、1つだけ大事な考え方があります：大きいファイルは、データベースの“行”には入れない。

STEP1：原則「大きいファイルは専用の倉庫へ、URLだけDBに」

データベース（profilesテーブルなど）は、文字や数字を入れる棚。画像や動画のような大きいファイルは、専用の“オブジェクトストレージ”（ファイル倉庫）に置いて、その置き場所のURLだけをDBに保存します。こうすると表示は速く、DBは軽いまま保てます。

オブジェクトストレージ

ファイル専用の倉庫。URLで出し入れする。

DBに入れるのはURL

画像そのものではなく「置き場所（文字）」だけ。

STEP2：保存先を選ぶ（ここが今日の肝）

ファイル倉庫サービスはいくつかあります。最初から悩まなくて大丈夫——早見表と、最後の指針で決められます。

※ 無料枠の数字は目安です。変わることがあるので、各公式の最新情報で確認してください。

STEP3：まずSupabase Storageでバケットを作る

1. 1Supabaseのダッシュボード → Storage → 「New bucket」。
2. 2名前は avatars、Public にチェック（アバターは公開でOK）→ Create。
3. 3アップロードは本人だけ・本人のファイルだけ上書き、というポリシーは次のSTEPでAIに任せます。

STEP4：アップロードUIをAIに実装してもらう

プロフィール画像のアップロードを付けたい。①マイページに画像選択＋アップロードボタン ②選んだ画像をSupabase Storageの avatars バケットにアップロード ③その公開URLを profiles.avatar_url（text列。無ければ追加し、本人がupdateできるよう権限を開ける）に保存 ④ヘッダーとマイページにアバターを表示 ⑤アップロードできるのはログイン本人だけ・本人のファイルだけ ⑥画像ファイルのみ・サイズ上限5MBをアップロード前にチェック ⑦Storageのポリシーも本人だけが自分のフォルダに書き込める形にする。まず計画を見せて。

STEP5：容量が増えてきたら——Cloudflare R2へ引っ越す

写真や動画が増えて無料枠が窮屈になったら、R2へ。R2はS3互換なので、AIに「@aws-sdk/client-s3 を使って、アップロード先をCloudflare R2に差し替えて」と頼めます。URLをDBに保存する設計のままなら、アップロード先と表示URLを差し替えるだけで済みます。

1. 1CloudflareでR2バケットを作成し、APIトークン（アクセスキー）を発行。
2. 2VercelにR2用の鍵を環境変数で追加（もちろんサーバー専用・NEXT_PUBLICなし。漏れたら困る等級——中級で身につけた判断のとおり）。
3. 3アップロード処理をR2向けに変更。表示用URLは、公開設定にしたR2の公開URL（またはカスタムドメイン）に。

おさらい：今日の考え方

URLだけDBに

ファイル本体は倉庫へ、DBには置き場所（URL）だけ。引っ越しも楽になる。

Supabase Storage

まず試すならこれ。統合が楽でRLS感覚で権限管理。

Cloudflare R2

大容量・動画・配信多めに強い。無料枠と転送量で有利。S3互換。

Cloudflare Images

画像のリサイズ・最適化・配信まで自動（基本有料）。画像が主役なら。

公開/非公開

公開バケットのURLは誰でも開ける。秘密のファイルは非公開＋署名URL。