あいさつ
こんにちは、皆さん！今回は、AWSのCloudFrontとS3を使って静的ファイルの描写速度を劇的に改善した経験について共有したいと思います。一般的な内容かもしれませんがはじめて使用して感動しました！！
背景
私のプロジェクトでは、静的ファイルの描写に約5秒もかかっていました。ユーザー体験を向上させるために、この描写速度を1秒以内に短縮することを目指しました。
手順
1. S3バケットの作成
まず、Amazon S3に新しいバケットを作成し、静的ファイルをアップロードしました。
2. CloudFrontディストリビューションの設定
次に、CloudFrontディストリビューションを作成し、S3バケットをオリジンとして設定しました。
- AWSマネジメントコンソールにログイン
- CloudFrontのサービスページに移動
- 「Create Distribution」をクリック
- オリジンに先ほど作成したS3バケットを指定
- デフォルトのキャッシュ動作を設定
3. キャッシュポリシーの最適化
CloudFrontのキャッシュポリシーを最適化することで、描写速度をさらに向上させました。
- TTL（Time to Live）: 静的ファイルの更新頻度に応じて適切なTTLを設定
- 圧縮: CloudFrontの圧縮機能を有効化
4. DNS設定の更新
最後に、ドメインのDNS設定を更新し、CloudFrontディストリビューションを指すようにしました。
結果
これらの手順を実施した結果、静的ファイルの描写速度が約5秒から1秒以内に短縮されました。ユーザーからのフィードバックも非常に良好で、ページの読み込みが速くなったと好評でした。
まとめ
CloudFrontとS3を組み合わせることで、静的ファイルの描写速度を劇的に改善することができました。もし同じような課題を抱えている方がいれば、ぜひ試してみてください。
参考にした記事
https://qiita.com/wtod/items/8d96b18464bb011fc363
https://qiita.com/ushi_osushi/items/a32d7b710567c2313faa
https://qiita.com/sugurutakahashi12345/items/bd99e6b32e4f5f0e8096