Lovable × AWS S3｜安価な大容量ストレージにアップロードする

動画や大量画像など、Lovable Cloudストレージでは割高になるユースケースはS3を使うのが定石です。サーバー経由ではなく署名付きURLで直接PUTしましょう。

全体の流れ#

1. サーバー関数で署名付きURLを発行
2. ブラウザがそのURLにPUTで直接アップロード
3. 完了後、メタデータをDBに保存

サーバー関数の骨格#

import { S3Client } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { PutObjectCommand } from "@aws-sdk/client-s3";

const s3 = new S3Client({ region: process.env.AWS_REGION! });
const url = await getSignedUrl(
  s3,
  new PutObjectCommand({ Bucket: process.env.S3_BUCKET!, Key: key }),
  { expiresIn: 60 }
);

実例ケーススタディ：1GB動画アップを安定化#

1. Lovable側で『presigned URL発行』のserver functionを実装（IAMはs3:PutObject＋必要prefixのみ）
2. ブラウザ→presigned URLに直接multipart upload
3. 完了後、Lovable Cloudのassetsテーブルにkey/size/owner_id等を記録
4. 配信はCloudFront署名URL経由、24時間有効でログイン中ユーザーのみ

つまずきポイント集#

• 症状：CORSエラー → 対処：S3バケットのCORSにアプリのoriginとPUT/POSTメソッドを許可
• 症状：presignedの期限が短すぎる → 対処：大きいファイルは expiresIn を15〜60分で多めに
• 症状：誤って公開してしまう → 対処：Block Public Access をアカウント全体でON、バケットポリシーは最小権限
• 症状：S3費用が高い → 対処：Intelligent-Tiering、ライフサイクルでGlacierへ自動移行

よくある質問（検索意図別）#

[実装手順] Q. 署名付きURLで直接アップロードする手順

①Edge FunctionでS3 SDKの`getSignedUrl(PutObjectCommand)`を発行 ②フロントから返ったURLに対して直接PUT ③成功通知でDBへキー保存。サーバを経由しないので大容量ファイルでも安定します。

[トラブル解決] Q. 『AccessDenied』ばかり返って原因が分からない

①バケットポリシーで`s3:PutObject`が許可されているか ②CORS設定にフロントのオリジンが含まれているか ③署名URLの有効期限が切れていないか、の順で確認。9割はこのどれかです。