AWSの部屋

AWS学習者向けのブログです

CloudFront を使用して S3 に格納された画像ファイルにアクセスしてみる

はじめに

筆者はAWS認定ソリューションアーキテクト-プロフェッショナル合格に向けて勉強中ですが、座学はあまり性に合わずできるだけ手を動かして勉強したいため、本ブログを通じて AWS の様々なサービスを使ってみようと思っています。今回は Cloudfront を使用して S3 に格納された画像ファイルにアクセスしてみようと思います。

Amazon CloudFront とは

Amazon CloudFront は、ユーザーへの静的および動的なウェブコンテンツ (.html、.css、.js、イメージファイルなど) の配信を高速化するウェブサービスです。CloudFront では、エッジロケーションというデータセンターの世界的ネットワークを経由してコンテンツを配信します。CloudFront でサービスを提供しているコンテンツをユーザーがリクエストすると、リクエストはエッジロケーションにルーティングされ、レイテンシー (遅延時間) が最小になります。これにより、コンテンツは可能な限り最高のパフォーマンスで配信されます。(出典:Amazon CloudFront とは何ですか?

今回のゴール

  • CloudFront 経由で S3 に格納された画像ファイルにアクセスする
  • 以下のように、S3への直接アクセスはせずに、CloudFront経由でのみ画像へのアクセスを許可する

[イメージ]

使用する画像

こちらのはねぴょんの画像を使用します。

手順

  1. S3 にバケットを作成
  2. S3 に画像ファイルをアップロードする
  3. 画像ファイルへの直接アクセスを確認
  4. CloudFrontディストリビューションを構築する
  5. 動作確認

1. S3 にバケットを作成

以下のバケットを作成します。

「パブリックアクセスをすべてブロック」のチェックを入れてバケットを作成してください。

2. S3 に画像ファイルをアップロードする

作成した S3 バケットを選択し、「アップロード」をクリックします。

ファイルを追加して「アップロード」をクリックします。

3. 画像ファイルへの直接アクセスを確認

オブジェクト URL にブラウザでアクセスします。

バケットのパブリックアクセスがブロックされていることが確認できます。

4. CloudFrontディストリビューションを構築する

以下のように設定しディストリビューションを作成します。

  • オリジナルドメイン・・・フィールドにフォーカスを当てると作成したバケットに対するドメインが選択できます。
  • 名前・・・オリジナルドメインを入力すると自動的に入力されます。
  • S3バケットアクセス・・・「はい、OAIを使用します」を選択します。
  • オリジナルアクセスアイデンティティ・・・新しいOAIボタンからOAIを作成します。
  • バケットポリシー・・・「はい、バケットポリシーを自動で更新します」を選択します。

このように CloudFrontディストリビューションが作成されます。

5. 動作確認

CloudFront経由で画像ににアクセスします。URLは以下のように設定します。今回の設定だと"https://d34ct53yaxe9lx.cloudfront.net/hanepyon.png"になります。

"CloudfrontDomainName"/"S3のファイル名"

このように画像にアクセスすることができました。

さいごに

AWS認定試験でも頻繁に出題される CrontFront ですが、実際に手を動かしてみると座学をするよりもイメージが湧きますね。今度は Route53 を使って独自ドメインからのアクセスにも挑戦してみようと思います。