画像・メディア管理: S3ストレージとCDN配信

この記事では、製品画像を効率的に保存、整理、配信する方法を説明します。

課題: 数千枚の画像の管理

当社では以下のものがあります:

  • 多数の製品SKU(5,000以上)、それぞれに複数の画像

  • コンポーネント画像(10,000以上) (シャーシ、ボード、アクセサリ)

  • 主要製品の製品動画

  • 複数のフォーマット (Web用WebP、データシート用PNG)

画像をWebサーバーに保存すると、以下の問題が発生します:

  • ディスク容量の問題: 数百GBの画像

  • 配信の遅延: サーバーの帯域幅制限

  • グローバルCDNの欠如: 国際ユーザーにとって遅い

  • バックアップの複雑さ: 大容量ファイルのバックアップ

解決策: S3 + CloudFront

保存にはAWS S3を、配信にはCloudFrontを使用しています:

  • S3: バージョニング機能付きのスケーラブルなオブジェクトストレージ

  • CloudFront: 高速配信のためのグローバルCDN

  • 画像マニフェスト: 画像の場所を管理する中央レジストリ

  • WebPフォーマット: PNG/JPEGより大幅に小さい(30-50%)

画像ストレージ

製品画像はS3に保存されます:

  • S3バケット: 製品メディア用のオブジェクトストレージ

  • フォーマット: 最適化された画像にはWebP

  • 動画: 製品動画にはMP4

  • マニフェスト: 画像の場所を管理する中央レジストリ

画像ソーシング

画像は画像マニフェストを使用してS3から取得されます: 1. 画像マニフェスト: 画像の場所を管理する中央レジストリ 2. S3バケット: オブジェクトストレージに保存された製品画像 3. WebPフォーマット: 高速読み込みのための最適化画像 4. フォールバック: 実際の画像が利用できない場合のプレースホルダー画像

画像キャッシング

画像はメモリ内でキャッシュされます:

  • グローバルキャッシュ: 画像検索用のメモリ内キャッシュ

  • 部品/SKUによるキー設定: 識別子による高速検索

  • キャッシュ無効化: フックを介して在庫が更新された時

画像ディレクトリ構造

画像は部品識別子ごとに整理されます:

  • 部品画像: 部品IDごとに整理

  • SKU画像: シャーシ、ボード、WiFiの組み合わせ

  • 動画ファイル: 画像と一緒に保存

画像処理

異なるユースケースに合わせて画像を処理します:

  • 完全な画像: 製品ページ

  • トリミングされた画像: データシート (最初の画像のみ)

  • プレースホルダー: 画像が利用できない場合のフォールバック

CloudFront配信

画像はCDNを通じて配信されます:

  • エッジキャッシング: 世界中のエッジロケーション

  • レイテンシーの低減: ユーザーは最も近いエッジからコンテンツを取得

  • DDoS保護: 組み込みの保護機能

まとめ

画像・メディア管理により以下が実現されます:

  • S3ストレージ: 製品画像、データシート、顧客ロゴ

  • WebPフォーマット: 高速読み込みのための最適化画像

  • 画像マニフェスト: 画像の場所を管理する中央レジストリ

  • キャッシング: パフォーマンスのためのメモリ内キャッシュ

  • CloudFront配信: 高速なグローバル配信