🔒

YouTube作業BGM動画作成サービスの舞台裏〜第３章AWS + Vercelで実現するセキュアなファイル転送システムの設計〜

2025/03/28に公開

こんにちは、「ファイルアップロードってセキュリティ的にどうすれば良いの？」と頭を抱えているあなた！
この記事では、「YouTube作業BGM動画作成サービス」の開発で実装したファイルアップロード・ダウンロードのセキュリティ設計について解説します。
AWSとVercelを組み合わせた当システムの舞台裏を覗いてみましょう。コードを見て「なるほど！」と膝を打つこと間違いなしです。

 はじめに：ファイル転送はセキュリティの落とし穴ファイル転送機能は、Webアプリの「裏口」のようなもの。きちんと鍵をかけないと、不審者が忍び込んでくる可能性大です！不適切な実装は以下の問題を招きます：
サーバーリソースの過剰消費（あなたのAWS請求書が突然太るかも😱）
不正なファイルによるセキュリティ侵害（「猫の画像.jpg」のはずが実は悪意のあるコード...）
ユーザープライバシーの侵害（「内緒の歌.mp3」が誰でも聴けるとマズいですよね）
悪意あるコードの実行（サーバーが突然「反乱」を起こす原因に...）
不安になってきましたか？大丈夫、この記事を読めば「ああ、こういうことね！」とスッキリするはずです。

 アーキテクチャ概要：最強の四天王で挑む私たちのシステムは4つの強力な味方で構成されています：

フロントエンド: Next.js（Vercelにデプロイ）- ユーザーと直接対話する「接客係」

バックエンドAPI: AWS Lambda + API Gateway - 裏方で働く「料理人」

ストレージ: Amazon S3 - 全てのファイルを保管する「倉庫係」

ステータス管理: DynamoDB - システムの状態を記録する「メモ係」
この4人がスムーズに連携することで、サーバーレスかつスケーラブルなシステムが実現します。ちなみに「サーバーレス」と言っても実際にはサーバーは存在します。単に「サーバーの面倒を見なくていい」だけなんです。便利ですね！

 セキュアなアップロードフロー：バケツリレーならぬS3リレー
 1. プリサインドURLを活用したダイレクトアップロード方式従来のアップロードフローというのは、「クライアント→サーバー→S3」という形で、サーバーが仲介役になります。これは「AさんからCさんへの手紙をBさんが届ける」ようなもの。
しかし、私たちのシステムでは「クライアント→S3」という直接転送を実現！「AさんがCさんに直接会いに行く」イメージです。サーバーは単に「Cさんの家はこちらですよ」と道案内するだけ。これがプリサインドURLの魔法です✨

 2. バックエンド側の実装ポイント：厳格なドアマンLambda関数は厳格なドアマンのように、入ってくるファイルをチェックします：
def lambda_handler(event, context):
    # リクエストボディの解析
    body = json.loads(event['body'])
    filename = body.get('fileName')
    content_type = body.get('contentType')
    file_size = body.get('fileSize')
    
    # バリデーション（身分証明書チェック👮‍♂️）
    if not all([filename, content_type, file_size]):
        return {
            'statusCode': 400,
            'body': json.dumps({'error': '必須パラメータが不足しています'})
        }
    
    # ファイルサイズ制限チェック（デブはお断り？いえいえファイルの話です😅）
    if file_size > 50 * 1024 * 1024:
        return {
            'statusCode': 400,
            'body': json.dumps({'error': 'ファイルサイズが上限を超えています'})
        }
    
    # コンテンツタイプチェック（VIP専用パーティーみたいなもの）
    allowed_types = ['audio/mpeg', 'image/jpeg', 'image/jpg']
    if content_type not in allowed_types:
        return {
            'statusCode': 400,
            'body': json.dumps({'error': '許可されていないファイル形式です'})
        }
    
    # ユニークなファイルキーの生成（世界に一つだけの名札を作成）
    file_extension = os.path.splitext(filename)[1]
    safe_filename = sanitize_filename(os.path.splitext(filename)[0])
    file_key = f"uploads/{datetime.now().strftime('%Y-%m-%d')}/{safe_filename}_{uuid.uuid4()}{file_extension}"
    
    # プリサインドURLの生成（特別な入場券を発行）
    presigned_url = s3_client.generate_presigned_url(
        'put_object',
        Params={
            'Bucket': BUCKET_NAME,
            'Key': file_key,
            'ContentType': content_type
        },
        ExpiresIn=EXPIRATION
    )
    
    return {
        'statusCode': 200,
        'body': json.dumps({
            'uploadUrl': presigned_url,
            'fileKey': file_key,
            'expiresIn': EXPIRATION
        }),
        'headers': {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json'
        }
    }

 3. フロントエンド側の実装ポイント：ユーザーの操作係Next.jsアプリケーションは、ユーザーの「手」となってファイルを届けます：
// 1. プリサインドURL取得関数（特別な入場券をもらいに行く）
export const getUploadUrl = async (params: GetUploadUrlParams): Promise<UploadUrlResponse> => {
  const response = await apiClient.post<UploadUrlResponse>('/upload/url', params);
  return response.data;
};

// 2. S3直接アップロード関数（実際にファイルを運ぶ）
export const uploadFileToS3 = async (url: string, file: File, contentType: string): Promise<void> => {
  await axios.put(url, file, {
    headers: {
      'Content-Type': contentType,
    },
  });
};

// 使用例（これが実際の流れ）
const handleUpload = async (file) => {
  // 1. プリサインドURL取得（「ここに届ければいいの？」）
  const urlResponse = await getUploadUrl({
    fileName: file.name,
    contentType: file.type,
    fileSize: file.size,
  });

  // 2. S3へ直接アップロード（「はい、お届けもの！」）
  await uploadFileToS3(urlResponse.uploadUrl, file, file.type);
  
  // 3. 成功時の処理（「届けてきました！」）
  console.log('Uploaded file key:', urlResponse.fileKey);
};

 セキュアなダウンロードフロー：招待状付きの宝物庫生成した動画ファイルは大切な宝物。誰でも見られるようにはしたくありませんよね？

 1. 期限付きアクセス制限：自己消滅する招待状生成された動画ファイルへのアクセスは、映画「ミッション：インポッシブル」の自己消滅するメッセージのように、期限付きのプリサインドURLで制限されています：
# 動画のダウンロードURL（プリサインド）の生成
# 「このURLは1時間で自動的に使えなくなります！急いで！」
video_url = s3_client.generate_presigned_url(
    'get_object',
    Params={
        'Bucket': OUTPUT_BUCKET,
        'Key': video_key
    },
    ExpiresIn=3600  # 1時間
)

 2. 視聴用とダウンロード用の区別：閲覧と持ち帰りは別物美術館の絵画を「見る」のと「持って帰る」が違うように、視聴用とダウンロード用に異なるURLを設定できます：
{
  "videoUrl": "https://example-bucket.s3.amazonaws.com/outputs/...", // 美術館で鑑賞
  "thumbnailUrl": "https://example-bucket.s3.amazonaws.com/outputs/...", // カタログの写真
  "downloadUrl": "https://example-bucket.s3.amazonaws.com/outputs/...", // レプリカを購入
  "duration": 3600,
  "size": 104857600
}

 主要なセキュリティ対策：ファイル名も侮れない！
 1. ファイル名のサニタイズ：ファイル名も洗濯が必要「え？ファイル名が危険だって？」と思うかもしれませんが、ファイル名は潜在的な攻撃の入口なのです。例えばファイル名に「; rm -rf /」と入れられたら...考えたくもありませんね😱
def sanitize_filename(filename):
    # 特殊文字を含むファイル名のサニタイズ処理
    # これは「ファイル名クリーニング屋さん」
    safe_filename = re.sub(r'[^\w\-\.]', '_', filename)
    return safe_filename
これは下記のようなケースを防ぎます：
パストラバーサル攻撃 (../../../etc/passwd) - 「カギのかかった部屋を覗こうとする行為」
コマンドインジェクション (;rm -rf /) - 「係員に偽の指示を出そうとする行為」
XSS攻撃 (<script>alert('XSS')</script>.mp3) - 「来場者に偽の案内を表示させる行為」

 2. CORS設定による保護：国境管理のようなものS3バケットには適切なCORS設定が必要です。これは「どの国からの訪問者を受け入れるか」を決める入国管理のようなものです：
CorsConfiguration:
  CorsRules:
    - AllowedHeaders:
        - '*'
      AllowedMethods:
        - PUT
        - GET
      AllowedOrigins:
        - '*'  # 本番環境では「全世界からどうぞ」ではなく制限すべき
      MaxAge: 3000

 3. ファイル自動削除ポリシー：自動お掃除ロボット「いつまでもファイルを保存していると、ストレージが満杯に...そして請求書も満杯に😱」
セキュリティとストレージコスト削減のため、ファイルには自動削除ポリシーを設定します。これは「○日経ったらゴミ箱に入れる」自動お掃除ロボットのようなものです：
LifecycleConfiguration:
  Rules:
    - Id: DeleteAfter7Days
      Status: Enabled
      ExpirationInDays: 7  # アップロードファイル
    
    # 出力ファイル用
    - Id: DeleteAfter30Days
      Status: Enabled
      ExpirationInDays: 30  # 生成された動画

 開発者向け：ファイル名サニタイズの重要性と実装
 なぜファイル名のサニタイズが重要なのかファイル名のサニタイズとは、ユーザーが提供するファイル名から潜在的に危険な文字や記号を取り除き、安全な形式に変換することです。これには以下の理由があります：

セキュリティリスク軽減: ファイル名を通じた攻撃を防ぐ（悪意あるファイル名は「トロイの木馬」のようなもの）

システム互換性確保: 異なるOSやファイルシステム間での問題を回避（WindowsとLinuxは「仲良く」できるように）

一貫した処理: ファイル名規則を統一することで処理を単純化（全員が同じユニフォームを着れば管理しやすい）

 実際のサニタイズ例サニタイズ処理は以下のような変換を行います：

my file.mp3 → my_file.mp3（スペースを_に変換。スペースは「見えない落とし穴」）

危険!.mp3 → _____.mp3（非ASCII文字と!を_に変換。「国際文字は複雑すぎるので単純化」）

../hidden.mp3 → ___hidden.mp3（ディレクトリトラバーサルを防止。「階段を勝手に上らないで！」）

script<>alert.mp3 → script__alert.mp3（特殊文字を除去。「怪しい記号はNG！」）

 初心者にもわかるファイル名のサニタイズファイル名のサニタイズとは、簡単に言えばファイル名を「お掃除」して安全にすることです。スマホの写真を共有する前に「恥ずかしい部分を隠す」みたいなものですね（笑）

 ファイル名のお掃除が必要な理由例えばこんな状況を想像してみましょう：
コンピュータが混乱するのを防ぐ

スマホで撮った写真「IMG_1234.jpg」と、パソコンで保存した「IMG/1234.jpg」は違います。「/」という記号はコンピュータにとって「フォルダの区切り」という特別な意味があるので、混乱を避けるために置き換えます。これは「渋谷駅」と「渋谷/駅」が別の場所だと勘違いするようなものです。
イタズラを防ぐ

悪い人が「削除してね.mp3」という名前の中に、実はコンピュータを壊す命令を隠している場合があります。これは「美味しいケーキです」と書かれた箱に毒入りケーキが入っているようなもの。サニタイズすることで、そういう危険な命令を無効化できます。
文字化けを防ぐ

「🎵楽しい音楽🎵.mp3」というファイル名は、別のコンピュータに移すと「???????.mp3」のように文字化けすることがあります。これは「私は日本語が分かります」と書いた紙を、日本語が読めない人に見せるようなもの。サニタイズすれば「_________.mp3」のように安全な形になります。

 実際の例で見てみようあなたの「夏休みの思い出.mp3」というファイルがアップロードされると...
まず「夏休みの思い出」という部分が「________」に変換されます（日本語は特殊文字とみなされることがある）
そして「_________.mp3」という安全なファイル名になります
さらに「__________abc123.mp3」のように、末尾に一意のコードをつけて、他のファイルと絶対にかぶらないようにします（世界に一つだけの「あなた専用ファイル」に！）
これがファイル名のサニタイズです。見た目は変わっても、あなたのファイルの中身は全く変わりません。ただ、名前が「お掃除」されて安全になっただけです。「カッコいい服に着替えさせる」みたいなものですね。

 実際の開発に応用するためのベストプラクティス
 1. 環境に合わせたセキュリティ調整：防犯は状況に応じて
本番環境ではCORSを厳格に: 開発中は「誰でも入れる」でも、本番では「招待客のみ」に（パーティー会場の入口管理のように）

コンテンツタイプの適切な制限: 「うちはPDFとJPGしか扱いません！」と明確に（レストランのメニューを限定するように）

サイズ制限の設定: 「申し訳ありませんが、100MB以上の手荷物はお預かりできません」（飛行機の手荷物制限のように）

 2. さらなるセキュリティ強化策：ベルトに加えてサスペンダーも
コンテンツ検証の追加: ファイルのヘッダー検証やマルウェアスキャン（「中身も確認させてください」）

アクセスポリシーの最適化: プリサインドURLの有効期限調整（「この招待状は2時間だけ有効です」）

監視とロギングの設定: 不審な活動の検出と対応（「防犯カメラを設置しておきましょう」）

ユーザー認証との連携: 権限に基づくアクセス制御（「VIPルームには専用パスが必要です」）

 3. パフォーマンス最適化：速さも大事
CDNの活用: 頻繁にアクセスされるファイルにはCloudFrontなどのCDNを検討（「人気商品は各支店に在庫を置いておく」）

圧縮設定: 大きなファイルには圧縮オプションを検討（「かさばる荷物は真空パックで！」）

並列アップロード: 大きなファイルは分割して並列アップロード（「大きな引っ越し荷物は複数のトラックで運ぶ」）

 まとめ：こうして動画は安全に届けられるAWS + Vercelを組み合わせたモダンなWebアプリケーションでは、S3のプリサインドURLを活用したアップロード・ダウンロードフローが効果的です。この手法はYouTube BGM動画生成のようなメディア処理アプリだけでなく、様々なファイル転送が必要なアプリケーションに応用できます。
適切なセキュリティ対策を講じることで、安全かつスケーラブルなファイル管理システムを構築できます。特にファイル名のサニタイズや適切な認証、権限管理は基本中の基本です。「家の鍵をかけるのは当たり前」という感覚と同じですね。
さあ、この記事を参考に、あなたも「セキュアなファイル転送マスター」への第一歩を踏み出しましょう！あなたのアプリに安全なファイル機能を実装して、ユーザーから「すごく使いやすい！」と言われる日が来ることを楽しみにしています。🚀

はじめに：ファイル転送はセキュリティの落とし穴

アーキテクチャ概要：最強の四天王で挑む

セキュアなアップロードフロー：バケツリレーならぬS3リレー

1. プリサインドURLを活用したダイレクトアップロード方式

2. バックエンド側の実装ポイント：厳格なドアマン

3. フロントエンド側の実装ポイント：ユーザーの操作係

セキュアなダウンロードフロー：招待状付きの宝物庫

1. 期限付きアクセス制限：自己消滅する招待状

2. 視聴用とダウンロード用の区別：閲覧と持ち帰りは別物

主要なセキュリティ対策：ファイル名も侮れない！

1. ファイル名のサニタイズ：ファイル名も洗濯が必要

2. CORS設定による保護：国境管理のようなもの

3. ファイル自動削除ポリシー：自動お掃除ロボット

開発者向け：ファイル名サニタイズの重要性と実装

なぜファイル名のサニタイズが重要なのか

実際のサニタイズ例

初心者にもわかるファイル名のサニタイズ

ファイル名のお掃除が必要な理由

実際の例で見てみよう

実際の開発に応用するためのベストプラクティス

1. 環境に合わせたセキュリティ調整：防犯は状況に応じて

2. さらなるセキュリティ強化策：ベルトに加えてサスペンダーも

3. パフォーマンス最適化：速さも大事

まとめ：こうして動画は安全に届けられる

Discussion