💨

AWSを触ってみる【CloudFront】

に公開
AWS
CloudFront
インフラ
tech

はじめに

AWSが提供する学習プラットフォームAWS Skill Builderの学習プランが11/2まで無料で急ぎでやってみたので学んだことをまとめます。
https://aws.amazon.com/jp/blogs/news/begin-your-aws-journey-with-new-free-aws-builder-labs-learning-plan-on-aws-skill-builder/
実際にAWSコンソールを開きながら進められるのでおすすめです。
※自分はAWSを業務で若干しか触ったことないレベルなのでほぼ初心者です。

CloudFrontとは

Amazon CloudFront は、AWS が提供する コンテンツ配信ネットワーク（CDN）サービス です。
世界中のエッジロケーション（キャッシュサーバー）を利用して、ウェブサイトや動画、画像、APIレスポンスなどのコンテンツを高速かつ安全に配信 することができます。

類似サービス

CDNサービス

  • Fastly
  • Cloudflare CDN
  • Google Cloud CDN

CloudFrontの特徴

高速なコンテンツ配信 レイテンシーを削減

ユーザーに最も近いエッジロケーションから配信するため、表示が高速になります。
キャッシュされたコンテンツはオリジンサーバー（例:S3）へアクセスせずに配信 され、負荷も軽減できます。

セキュリティを向上させる

  • HTTPS 対応
  • AWS Shield / WAF と連携可能
  • OAC（Origin Access Control）で S3 を非公開にし、CloudFront 経由のみ許可

これにより、安全にコンテンツを公開できます。

配信をカスタマイズ

URL ルール、キャッシュ動作、ヘッダ制御、署名付き URL など用途に応じて 配信ルールを細かくカスタマイズ できます。

CloudFrontの用途

  • 静的コンテンツを高速配信（S3 + HTML / CSS / JS / 画像）
  • 画像・動画などの大きなファイルをスムーズに配信（ストリーミング配信など）
  • API・動的コンテンツを高速化（REST API / GraphQL / SSR のキャッシュ・ルーティング）
  • セキュリティ強化した配信（HTTPS / WAF / OAC で S3 を非公開に）

ディストリビューションとは

CloudFrontでコンテンツを配信する際の設定単位のことを「ディストリビューション」と呼びます。
「どのオリジン（配信元）から、どんなルールで、どんなURLで配信するか」を定義したもの
です。

CloudFront に対して、次のような情報をまとめて登録します。

  • オリジン（配信元） … どこから取得する？（例：S3 バケット、Web サーバー）
  • キャッシュ設定 … どれくらいの期間キャッシュする？
  • ドメイン / URL … どんな URL で配信する？（例：xxxx.cloudfront.net）

CloudFront ディストリビューションを使用して、画像ファイルを配信する

実際にCloudFrontを触ってみます。
今回はS3にアップロードした画像をClourFront経由で配信します。

あらかじめS3でバケットを作成し、画像をアップロードしておきます。

ディストリビューションを作成する

CloudFront に S3 バケットをオリジン（配信元）として登録し、配信用の URL（xxxxx.cloudfront.net）を発行します。

  1. マネジメントコンソールから「CloudFront」を開く>CloudFrontディストリビューションを作成

  2. ディストリビューション名を指定>Next

  3. S3 originに作成したバケットを選択>Next

  4. 今回は「セキュリティ保護を有効にしないでください」を選択>Next>「Create distributiion」

ディストリビューションが作成されました。
CloudFront に S3 の場所が登録され、配信 URL（例：d1msb9u56r7wfu.cloudfront.net） が発行されます。

オブジェクトへのリンクを作成する

次に、発行された CloudFront ドメインを使って画像を表示してみます。

  1. sample.htmlファイルを作成
<html>
<head>My CloudFront Test</head>
<body>
<p>My text content goes here.</p>
<p><img src="http://<ディストリビューションドメイン名>/<S3 バケットにアップロードしたキー名>" alt="my test image" /></p>
</body>
</html>
オブジェクトへのリンク

ディストリビューションドメイン名
例：d1msb9u56r7wfu.cloudfront.net

Amazon S3 バケットにアップロードしたファイルの名前 (キー)
例：674706180d1851c0b6e9eff7_118-min.png

配信されるURL：http://d1msb9u56r7wfu.cloudfront.net/674706180d1851c0b6e9eff7_118-min.png

  1. 作成したhtmlファイルをブラウザで開く

ブラウザで HTML を開くと、CloudFront が最適なエッジロケーションから画像を配信し、画面に表示されます。

まとめ

CloudFront+S3で画像配信できました！

Discussion