S3+CloudFrontで爆速配信

この「山手線 3Dジオラマ」は、いわゆる静的サイト（Static Site）です。サーバーサイドでPHPやRubyが動いているわけではなく、ブラウザがHTML/CSS/JSを読み込んで動作しています。
このようなアプリを公開する場合、レンタルサーバーやVPSを借りるよりも、AWSの「S3」と「CloudFront」を組み合わせるのが、コスト・速度・管理の面で最強の選択肢だと感じています。

構成の概要

シンプルですが、非常に強力な構成です。

Amazon S3: 全てのファイル（HTML, 画像, 3Dモデル）を置くストレージ。
Amazon CloudFront: S3の前段に置くCDN（コンテンツ配信ネットワーク）。世界中のエッジサーバーから爆速で配信します。

3Dモデル（.glbファイル）やテクスチャ画像など、ファイルサイズが大きくなりがちなコンテンツも、CloudFrontを通すことで遅延なくユーザーに届けることができます。

CloudFrontを使うメリット

単にS3の「静的ウェブサイトホスティング」機能を使うだけでも公開はできますが、CloudFrontを挟むことには大きなメリットがあります。

1. 無料でHTTPS化できる

S3単体だと独自ドメインでのHTTPS化が面倒ですが、CloudFrontなら「AWS Certificate Manager (ACM)」で発行した無料のSSL証明書を簡単に紐付けられます。今のWeb標準ではHTTPSは必須ですよね。

2. 転送コストの削減

S3から直接データを送信するよりも、CloudFront経由の方がデータ転送量が安くなる場合があります。また、キャッシュが効けばS3へのアクセス自体が減るため、リクエスト料金も節約できます。

実装時のハマりポイント

非常に便利な構成ですが、いくつか落とし穴もありました。

キャッシュの削除（Invalidation）

CloudFrontは強力にキャッシュするため、S3のファイルを更新しても、ユーザー側には古いファイルが表示され続けることがあります。
開発中はキャッシュ時間（TTL）を短くするか、デプロイ時に明示的にキャッシュ削除（Invalidation）を行う必要があります。

# AWS CLIでキャッシュを削除するコマンド例
aws cloudfront create-invalidation --distribution-id XXXXXX --paths "/*"

CORS（クロスオリジンリソース共有）

3Dモデルやフォントファイルを読み込む際、CORSエラーで弾かれることがありました。S3のCORS設定だけでなく、CloudFront側でも適切なヘッダー（Originなど）をフォワードする設定が必要です。

まとめ

サーバーのOS管理やパッチ適用から解放され、コードを書くことだけに集中できるのがこの構成の最大の魅力です。
アクセスが急増しても勝手にスケールしてくれるため、「バズったらサーバーが落ちるかも」という心配も無用。個人開発のWebアプリには最適なインフラだと思います。