PluploadのHTML5ランタイムを使ってAmazon S3へ直接アップロードする方法

Amazon S3は、CORS（Cross-Origin Resource Sharing／オリジン間リソース共有）に対応したことで、ブラウザからHTML5経由でS3バケットへ直接ファイルをアップロードできるようになりました。これにより、サーバーを中継せずにクライアント側だけで完結するアップロード処理が実現できます。

以前は不可能だった直接アップロード

CORS対応以前は、セキュリティ上の制約（同一オリジンポリシー）により、ブラウザから別ドメインであるS3へ直接リクエストを送ることができませんでした。そのため、ファイルは一旦自社サーバーにアップロードし、そこからS3へ転送するという二段階の処理が必要でした。

しかし現在では、PluploadのようなアップロードライブラリがHTML5ランタイムを通じてCORSを利用することで、S3への直接アップロード（ダイレクトアップロード）が可能になっています。

CORSがもたらすメリット

CORSを活用すると、リッチなクライアントサイドWebアプリケーションの構築が容易になります。主なメリットは以下のとおりです。

• サーバー負荷の軽減： ファイル転送がクライアントとS3間で直接行われるため、アプリケーションサーバーの帯域やCPUリソースを節約できます。
• 高速なアップロード： 中継サーバーを介さないため、アップロード時間を短縮できます。
• スケーラビリティ： Amazon S3のインフラをそのまま活用できるため、大量のアクセスにも柔軟に対応できます。

S3側での設定について

直接アップロードを有効にするには、S3バケットのCORS設定で、許可するオリジン・HTTPメソッド（PUTやPOSTなど）・ヘッダーを選択的に指定します。この「選択的なアクセス許可」によって、信頼できるドメインからのみS3リソースへのクロスオリジンアクセスを安全に許可することができます。

この仕組みにより、開発者はAmazon S3のストレージ基盤を活かしながら、モダンで快適なユーザー体験を提供するWebアプリケーションを構築できるようになりました。