【ITニュース解説】The Architecture That Lets Us Sleep: Scalable Uploads with S3 presigned URLs

システム開発において、ユーザーが大きなファイルをアップロードする機能は非常に重要だ。しかし、この大きなファイルのアップロードは、Webサイトの裏側で動くサーバー（バックエンド）にとって大きな負担となる場合が多い。例えば、動画ファイルのように数GBにもなるファイルを、一度にサーバー経由で受け取ろうとすると、サーバーが処理しきれずに動作が遅くなったり、最悪の場合は停止してしまったりする可能性がある。これは、データが一度に流せる量（帯域幅）が限られていたり、サーバーが同時に処理できるリクエストの数に限界があったりするため、処理の流れが滞る場所（ボトルネック）となってしまうのだ。

このような課題を解決し、Webアプリケーションの安定性を保ちながら、ユーザーに快適なアップロード体験を提供するための強力な方法がある。それが、Amazon S3（Simple Storage Service）というクラウドサービスと、その機能である「S3 Pre-Signed URL」および「Multipart Uploads」を組み合わせるアプローチだ。

Amazon S3は、インターネット上で大量のデータを保存・取得できるサービスである。保存できるデータの量にほとんど上限がなく、非常に高い耐久性を持つため、大切なファイルを安心して預けられる。このS3をファイルアップロードに活用することで、ファイルのデータ転送プロセス全体を、自分のサーバーではなくS3に肩代わりさせることができる。これにより、自分のサーバーの負荷を大幅に軽減し、アップロード処理がどんなに増えても安定して対応できる（スケーラブルな）システムを構築することが可能になる。

特に重要なのが「S3 Pre-Signed URL」という機能だ。通常、S3にファイルを直接アップロードしたりダウンロードしたりするには、AWSというクラウドサービスの認証情報（アクセスキーなど）が必要となる。しかし、Webアプリケーションの一般ユーザーに、これらの認証情報を直接渡すのはセキュリティ上非常に危険である。そこでS3 Pre-Signed URLの出番となる。これは、Webサイトのバックエンドサーバーが一時的に発行する、特別なURLだ。このURLは、一定の時間（例えば1時間）だけ有効で、そのURLを知っている人だけがS3に直接ファイルをアップロードしたり、ダウンロードしたりできる。つまり、ユーザーは自分のAWS認証情報を知らなくても、一時的な許可証であるPre-Signed URLを使ってS3と直接やり取りできるため、セキュリティを保ちつつ、サーバーを介さない直接アップロードが実現できるのだ。

さらに、大きなファイルを効率的にアップロードするために「Multipart Uploads」という方法も利用する。これは、ファイルを小さな塊（チャンク）に分割し、それぞれのチャンクを並行してS3にアップロードしていく方法である。すべてのチャンクがアップロードされた後、S3がそれらを一つに結合して元のファイルとして完成させる。この方法の利点はいくつかある。まず、ファイル全体を一度にアップロードするよりも、小さなチャンクごとにアップロードする方が、ネットワークの途中で問題が発生しても、最初からやり直す必要がなく、失敗したチャンクだけを再送すれば済むため、アップロードの信頼性が高まる。また、複数のチャンクを同時にアップロードすることで、全体のアップロード時間を短縮できる効果も期待できる。

今回構築するアプリケーションは、Next.jsという技術を使った動画ギャラリーアプリだ。このアプリでは、S3 Pre-Signed URLとMultipart Uploadsを組み合わせて、大規模な動画ファイルを効率的にアップロードできるように設計されている。特に注目すべきは、ファイルアップロードという重い処理を、Webページの見た目や操作を処理する「メインUIスレッド」とは別の場所で実行する点である。

これは「Web Worker」という技術を活用して実現する。Web Workerは、Webブラウザ内でバックグラウンドで処理を実行するための仕組みだ。ファイル分割（チャンク化）や各チャンクのS3へのアップロード、進捗状況の更新といった一連の処理をWeb Workerに任せることで、メインUIスレッドは常に軽快に動作し続けることができる。これにより、ユーザーはファイルアップロード中であっても、Webページをスムーズに操作でき、ストレスなく利用できる。アップロードの進捗状況もリアルタイムで表示されるため、ユーザーは安心して待つことができるのだ。

具体的な開発手順としては、まずNext.jsプロジェクトを初期化し、S3との連携に必要なAWS SDKのライブラリや、見た目を整えるためのUIコンポーネントをインストールする。AWSのサービスを利用するためには、認証情報としてアクセスキーとシークレットアクセスキーを環境変数に設定する必要がある。これらは、AWSの管理画面から取得し、安全に管理することが重要だ。また、Web Workerを利用するためにNext.jsの設定ファイルに一部変更を加える。

次に、Webサイトのバックエンドとして機能するAPIルートをいくつか作成する。一つは、比較的小さなファイル（例えば20MB未満）をアップロードする際に使うS3 Pre-Signed URLを生成するためのルートだ。ユーザーがファイルをアップロードしようとすると、このAPIが呼び出され、S3に直接アップロードするためのURLが発行される。もう一つは、大規模なファイル（例えば20MB以上）をMultipart Uploadsで処理するためのルートだ。このルートは、マルチパートアップロードの開始、ファイルチャンクごとのアップロードURLの取得、そして全てのチャンクがアップロードされた後の完了処理など、一連のMultipart Uploadsの各ステップに対応する。さらに、S3にアップロードされた動画ファイルのリストを取得し、ギャラリーに表示するためのAPIルートも作成する。このAPIは、S3からファイルの一覧を取得し、各動画ファイルのダウンロード用URLを一時的に生成してフロントエンドに返す。

これらのAPIルートと並行して、バックグラウンドで動作するWeb Workerも実装する。このWeb Workerは、大きなファイルが選択された際に起動し、ファイルを複数のチャンクに分割し、先ほど作成したAPIルート経由でS3から各チャンク用のアップロードURLを取得し、それぞれをS3に直接アップロードする処理を担当する。アップロードの進捗をメインUIに通知したり、途中でエラーが発生した場合には再試行したりするロジックもここに組み込まれる。

そして、ユーザーが直接触れるUI（ユーザーインターフェース）も作成する。ファイルを選択するボタンや、ファイルをドラッグ＆ドロップできる領域、アップロードの進捗を示すプログレスバーなどが含まれる「FileUpload」コンポーネントだ。このコンポーネントは、選択されたファイルのサイズに応じて、シンプルなPre-Signed URLを使ったアップロードと、Multipart UploadsをWeb Workerで実行するアップロードとを自動的に切り替える。アップロードされた動画を表示するための「VideoGallery」コンポーネントも作成し、先ほどのAPIルートから動画リストを取得してサムネイル表示したり、クリックで再生できるようにしたりする。

最後に、これらのコンポーネントを配置するWebページのレイアウトを作成し、アップロードが完了したら動画ギャラリーが自動的に更新されるように連携させる。

このシステムを構築する上で、もう一つ重要な設定がある。それが「CORS（Cross-Origin Resource Sharing）」の設定だ。Webブラウザはセキュリティのため、異なるドメイン（Webサイトのアドレス）間でのデータ送受信を制限している。今回の場合、Webアプリケーション（例: http://localhost:3000）から直接S3（https://s3.amazonaws.com/...）にファイルをアップロードしようとするため、この制限に引っかかる可能性がある。そこで、S3バケットのパーミッション設定で、Webアプリケーションが実行されているオリジン（例: http://localhost:3000や、公開後のドメイン）からのアップロードリクエストを許可するように設定する必要がある。これにより、S3とWebブラウザ間の安全なデータ交換が可能になる。

これらの手順を経て、完成したアプリケーションは、npm run devコマンドでローカル環境で実行できる。実際に動画ファイルをアップロードしてみて、その動作や、Chromeのデベロッパーツールを使ってネットワークリクエストがどのようにS3に直接行われているかを確認すると、より理解が深まるだろう。

このように、Amazon S3のPre-Signed URLとMultipart Uploadsという強力な機能を活用し、さらにWeb Workerで重い処理をバックグラウンドに分離することで、大規模なファイルアップロードも非常に効率的かつ安定して処理できるアプリケーションを構築できる。自分のサーバーの負担を大幅に減らし、ユーザーには快適な操作性を提供するこのアーキテクチャは、まさに「開発者が安心して眠れる」ような堅牢なシステムを実現するものだ。将来的には、複数のチャンクをさらに並列でアップロードしたり、ネットワークエラー時の再試行ロジックをより賢くしたり、動画を再生しながらダウンロードできるようにするプログレッシブストリーミングといった機能を追加していくことで、さらにシステムを強化することも可能である。