【AWS入門】CloudFrontを使ってディストリビューション作成して、S3へアクセスする方法

hosts

aws
ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

今回は【AWS入門】CloudFrontを使ってディストリビューション作成して、S3へアクセスする方法の紹介です。

目次

CloudFrontとは？

CloudFrontは、AWSのコンテンツ配信ネットワーク（CDN）サービスです。
ウェブサイトやウェブアプリケーションのパフォーマンスを向上させ、コンテンツのセキュリティを強化し、負荷分散を実現するために利用されます。

次のような静的および動的なウェブコンテンツを、
ユーザーに配信するウェブサービスです。

  • HTML
  • CSS
  • JS
  • 動画
  • アプリケーション

CDN

CDNは、世界中のエッジロケーションに配置されたサーバー群を利用して、ウェブコンテンツや動画、アプリケーションなどの配信を高速化し、ユーザーに近い場所からコンテンツを提供します。

CloudFrontを起動

AWSコンソールからCloudFrontを検索して起動させます。

スポンサードサーチ

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

CloudFrontを開いたら、「CloudFront ディストリビューションを作成」を押下して作成に進みます。

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

ディストリビューションの作成の作成を行います。
作成するにあたって、次の内容を設定します。

スポンサードサーチ

オリジン

Origin domain

「オリジンドメイン」とは、ウェブサービスやコンテンツの元となるサーバーのドメイン名を指します。コンテンツが最初にホストされている場所や起点となる場所を示すものになります。

origin domainを押下するとセレクトボックスからオリジンドメインを選択します。
選択すると名前が自動で入力されます。

Origin path – optional

「オリジンパス」とは、パスを設定することで、そのパス以下に限定してキャッシュをすることができます。
オリジンパスをしない場合は、オリジン全体をキャッシュすることができます。

設定する際は「/」からで、末には「/」を入力しないでください。

名前

「名前」はそのままで、オリジン名になります。
ここは自動で入力されるので、手をつけなくてもいいです。

オリジンアクセス

icon

オリジンアクセスはOACの略でオリジンへのアクセスを制御します。

Public

「public」とはS3バケットがパブリックアクセスを許可する必要があることを指しています。
S3バケットのオブジェクトやデータに一般公開されたアクセスを可能にすることを意味します。
例えば、バケットポリシーやアクセス制御リスト（ACL）を使用して、バケット内のオブジェクトに対するパブリックな読み取りアクセスを許可することができます。
この設定をすることで、CloudFrontを介してアクセスできるようになります。

Origin access control settings (recommended)

「Origin access control settings」とはの項目は、S3バケットに対するアクセスを制御するための設定を行うことを推奨しています。
バケットポリシーやACLを使用して、CloudFrontからのアクセスのみを許可するようにバケットを設定することが望ましいです。
これにより、バケットへの直接アクセスを制限し、セキュリティを強化できます。

Legacy access identities

「Legacy access identities」という項目は、CloudFrontのレガシーアクセスアイデンティティ（Origin Access Identity、OAI）を使用してS3バケットにアクセスすることを指します。
この方法は過去の手法であり、CloudFrontがオリジンアクセスを制御するために使用されてきました。OAIを使用すると、S3バケットに対する一般的なパブリックアクセスを拒否し、CloudFrontを介したアクセスのみを許可します。

今回はオリジンアクセスは「Origin access control settings (recommended)」を選択します。

Create new OAC

「Origin access control settings (recommended)」を押下で何も表示されない場合は、「Create new OAC」を押下してOACを作成します。

カスタムヘッダーを追加

CloudFrontへオリジン送信するリクエストに対してカスタムすることができます。
「ヘッダー名」と「値」を追加することでカスタムできます。

Enable Origin Shield

「Enable Origin Shield」とは、CloudFrontにオリジンの負荷を軽減し、可用性を向上させ、運用コストを削減するのに役立つキャッシュインフラストラクチャの追加レイヤーです。

追加する場合は、「オリジンシールドリージョン」を選択してください。

追加設定

Connection attempts

「Connection attempts」とはCloudFrontがオリジンに接続を試みる回数です。
1から3までの範囲で指定します。

Connection timeout

「Connection timeout」とはCloudFrontがオリジンからの応答を待機する秒数です。
1から10までの範囲で指定できます。

Response timeout – only applicable to custom origins

「Response timeout – only applicable to custom origins」とはCloudFrontがオリジンからの応答を待機する秒数です。
1から60までの範囲で指定できます。

Keep-alive timeout – only applicable to custom origins

「Keep-alive timeout – only applicable to custom origins」とはCloudFrontがオリジンとのアイドル状態の接続を維持する秒数です。
1から60までの範囲で指定できます。

デフォルトのキャッシュビヘイビア


「デフォルトのキャッシュビヘイビア」とはデフォルトのキャッシュ動作になります。
CloudFrontのビヘイビア（Behavior）は、CloudFrontディストリビューションで設定されたリクエストの処理方法を指定する設定項目です。
CloudFrontディストリビューションにおいて、特定のパスパターンに関連付けられたキャッシュ設定のデフォルトのセットを指します。
CloudFrontでは、異なるパスパターンに対して異なるキャッシュ設定を適用することができます。
デフォルトのキャッシュ動作は、特定のパスパターンに対するカスタムキャッシュ設定が定義されていない場合に適用されます。

パスパターン

「パスパターン」とは、リクエストのURI パスに基づいて、キャッシュ動作に適用されるリクエストを決定します。
パスパターンはワイルドカードの一致に対応しています。
以下がパスパターンの例です。

  • 「/index.html」
  • 「img/hoge.png」
  • 「api/hoge.ts」

オブジェクトを自動的に圧縮

「オブジェクトを自動的に圧縮」とは、オリジンから受信した特定のファイルを、ビューワーに配信する前に自動的に圧縮できます。
CloudFront は、ビューワーリクエストの Accept-Encoding ヘッダーで指定されたとおり、ビューアがサポートする場合にのみファイルを圧縮します。

「オブジェクトを自動的に圧縮」は「Yes」を押下しておきましょう。

スポンサードサーチ

ビューワー

CloudFrontは、CDN（コンテンツデリバリーネットワーク）のサービスを提供しており、ユーザーがウェブページやその他のコンテンツをリクエストする際に、そのリクエストを処理します。
この場合、「ビューワー」とは、CloudFrontを介してウェブページやコンテンツをリクエストしているユーザーを指します。

ビューワープロトコルポリシー

「ビューワープロトコルポリシー」とは、ウェブサーバーやCDN（Content Delivery Network）などのウェブ関連のサービスで使用される用語です。これは、訪問者がサーバーとの通信に使用できるプロトコル（通信規約）に関する設定やポリシーのことです。

HTTP and HTTPS

  • CloudFrontのビューワーは、HTTPとHTTPSの両方のリクエストを受け入れます。
  • HTTPリクエストがCloudFrontに送信されると、ビューワーはそのままHTTPで処理し、HTTPSにリダイレクトすることはありません。
  • HTTPSリクエストがCloudFrontに送信されると、ビューワーはリクエストを暗号化されたまま処理し、サーバーに転送します。

Redirect HTTP to HTTPS

  • HTTPリクエストがCloudFrontに送信されると、ビューワーはHTTPからHTTPSへのリダイレクトを行います。
  • ユーザーがHTTP経由でアクセスしようとすると、CloudFrontビューワーは直ちにHTTPSにリダイレクトします。
  • リダイレクトが行われると、CloudFrontビューワーはHTTPSリクエストをサーバーに転送します。

HTTPS only

  • サイトまたはアプリケーションがHTTPSのみを許可する場合、CloudFrontのビューワーはHTTPリクエストを受信しません。
  • ユーザーがHTTPでアクセスしようとすると、CloudFrontビューワーは直ちにHTTPSにリダイレクトします。
  • サーバーにリクエストが転送される前に、すべての通信は暗号化されたHTTPS経由で行われます。

許可されたHTTPメソッド

GET, HEAD

GET, HEADを許可します。

  • GET: サーバーから情報を取得するためのリクエスト。例えば、ウェブページや画像などのデータを取得する際に使われます。
  • HEAD: サーバーからのレスポンスヘッダーを取得するリクエスト。実際のデータを取得せず、サーバーが返すメタデータ（サイズ、最終更新日など）を得ることができます。

GET, HEAD, OPTIONS

GET, HEAD, OPTIONSを許可します。

  • OPTIONS: サーバーがサポートしているメソッドやリソースに対する機能をクライアントに伝えるためのリクエスト。クライアントがサーバーにOPTIONSリクエストを送信すると、サーバーはそのリクエストに対応する許可されたメソッドなどの情報を返します。

GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEを許可します。

  • PUT: リソースをサーバーに送信して更新するためのメソッド。リクエストされたURIで新しいリソースを作成するか、既存のリソースを置き換えます。
  • POST: サーバーにデータを送信して処理するためのメソッド。主に、リソースの作成やアクションの実行に使用されます。例えば、フォームの送信やデータの保存に使用されます。
  • PATCH: リソースの一部を更新するためのメソッド。PUTはリソース全体を更新するのに対し、PATCHは一部のみを更新します。
  • DELETE: リソースをサーバーから削除するためのメソッド。リクエストされたURIのリソースを削除します。

ビューワーのアクセスを制限する

「ビューワーアクセスを制限する」とは、ウェブサイトやアプリケーションにアクセスするユーザーのグループを制御することを指します。これは、特定の条件を満たさないクライアントからのアクセスをブロックすることや、許可されたユーザーだけがコンテンツにアクセスできるようにすることを意味します。

キャッシュキーとオリジンリクエスト

「キャッシュキー」と「オリジンリクエスト」についてです。
「Cache policy and origin request policy (recommended)」と「Legacy cache settings」のどちらかを選択します。

Cache policy and origin request policy (recommended)

「Cache policy and origin request policy (recommended)」とは、CloudFrontで推奨される新しいキャッシュとオリジンリクエストの設定方法です。
このポリシーは、キャッシュの動作を指定し、オリジンサーバーへのリクエストの動作を指定します。
このポリシーを使用すると、カスタムのキャッシュポリシーやオリジンリクエストポリシーを簡単に作成できます。
例えば、オリジンリクエストポリシーを使用して、CloudFrontがオリジンサーバーに送信するヘッダーやメソッドを制御できます。
また、このポリシーを使用すると、より詳細なキャッシュの構成が可能になります。

Legacy cache settings

「Legacy cache settings」とは、CloudFrontで以前から使用されてきた古いキャッシュ設定方法です。
この設定では、単純なキャッシュ動作とキャッシュの時間を設定できますが、より高度な制御や設定は提供されません。
この設定を使用する場合、より細かい設定や柔軟性が必要な場合は、代わりに"Cache policy and origin request policy"を検討することが推奨されます。

一般的には、新しいプロジェクトや設定の場合は、「Cache policy and origin request policy」を使用することが推奨されます。
これにより、より柔軟性が高く、詳細な設定が可能になります。
一方で、既存のプロジェクトや設定の場合は、既存の 「Legacy cache settings」を使用し続けることもできますが、将来的には新しい設定に移行することが推奨されます。

特に何もなければ、「Cache policy and origin request policy (recommended)」のままにしておきましょう。

「キャッシュポリシー」と「オリジンリクエストポリシー – オプション」を設定できます。

キャッシュポリシー

  • Cache Policy (キャッシュポリシー):
    • キャッシュポリシーは、CloudFrontがリソースをキャッシュする方法を指定するものです。
    • キャッシュポリシーは、リクエストに基づいてキャッシュの動作を定義します。これには、どのリクエストをキャッシュするか、どのような条件でキャッシュを無効にするか、キャッシュの最大寿命などが含まれます。
    • キャッシュポリシーを使用することで、キャッシュの振る舞いを細かく制御し、パフォーマンスを最適化することができます。

Cloud Functionのレスポンスがキャッシュ可能であることが推測された場合にキャッシュされます。キャッシュされたデータが再利用されることで、レスポンス時間を短縮し、コストを削減できます。

CachingDisabled

「CachingDisabled」とは、キャッシュは無効化されます。
Cloud Functionの実行ごとに新しいレスポンスが生成され、キャッシュは使用されません。
データが頻繁に変更される場合やセキュリティ上の理由からキャッシュを利用したくない場合に適しています。

CachingOptimizedForUncompressedObjects

「CachingOptimizedForUncompressedObjects」とは、キャッシュされるオブジェクトが圧縮されていないことを前提としています。
圧縮されていないオブジェクトは、キャッシュされた状態で保持され、圧縮解除の必要がないため、レスポンス時間を短縮できます。

Elemental-MediaPackage

「Elemental MediaPackage」とは、MediaPackageを使用して動画のライブまたはビデオオンデマンド (VOD) ワークフローを構築する際にキャッシュを最適化するために利用されます。

Amplify

「Amplify」とはAmplifyであり、
Amplify Frameworkを使用してCloudFrontをセットアップし、そのキャッシュポリシーとリクエストポリシーを管理するための方法を指します。
Amplifyを介してCloudFrontの機能を利用することで、ウェブアプリケーションやモバイルアプリケーションのパフォーマンスやセキュリティを向上させることができます。

オリジンリクエストポリシー – オプション

Origin Request Policy (オリジンリクエストポリシー):

  • オリジンリクエストポリシーは、CloudFrontがオリジンサーバーにリクエストを送信する方法を指定するものです。
  • オリジンリクエストポリシーは、CloudFrontがオリジンサーバーに送信するヘッダーやクエリ文字列、リクエストメソッドなどを定義します。これにより、セキュリティやプライバシーの観点から不要な情報をフィルタリングすることができます。
  • オリジンリクエストポリシーを使用することで、オリジンサーバーへのリクエストを安全かつ効率的に制御し、不要な情報を排除することができます。

UseAgentRefereHeaders

「UseAgentRefereHeaders」とは、クライアントのユーザーエージェントとリファラーヘッダーを送信します。

AllViewer

「AllViewer」とは、すべてのビューアーに対してリクエストを許可します。

CORS-S3Origin

「CORS-S3Origin」とは、クロスオリジンリソース共有 (CORS) リクエストをS3オリジンから許可します。

CORS-CustomOrigin

「CORS-CustomOrigin」とは、CORSリクエストをカスタムオリジンから許可します。

Elemental-MediaTailor-PersonalizeManfests

「Elemental-MediaTailor-PersonalizeManfests」とは、Elemental MediaTailorとAmazon Personalizeのマニフェストに関連するリクエストを許可します。

AllViewerAndCloudFrontHeaders-2022-06

「AllViewerAndCloudFrontHeaders-2022-06」とは、すべてのビューアーに対してリクエストを許可し、2022年6月以降のCloudFrontヘッダーを使用します。

AllViewExcepHostHeader

「AllViewExcepHostHeader」とは、ホストヘッダーを除いて、すべてのビューアーに対してリクエストを許可します。

レスポンスヘッダーポリシー – オプション

「レスポンスヘッダーポリシー」とは、ウェブサーバーやCDN（コンテンツデリバリーネットワーク）などが返すHTTPレスポンスのヘッダーを制御するための設定や規則のことを指します。
ウェブアプリケーションやウェブサイトのセキュリティ、パフォーマンス、プライバシーなどが向上します。

SimpleCORS

「SimpleCORS」とは、ラウザが異なるオリジン（ドメイン、プロトコル、ポート）のリソースにアクセスするためのメカニズムです。
SimpleCORSでは、リクエストが単純なものである場合（例えば、GET、HEAD、POSTのいずれかで、特定のヘッダーが含まれていない場合）、ブラウザはプリフライトリクエストなしでリクエストを送信できます。

CORS-With-Preflight

「CORS-With-Preflight」とは、ブラウザがクロスオリジンリクエストを送信する前に、サーバーに事前フライトリクエストを送信する必要がある場合、これが使用されます。
事前フライトリクエストは、リクエストが安全であるかどうかを確認し、実際のリクエストを送信する前に許可を得るために行われます。

CORS-with-preflight-and-SecurityHeadersPolicy

「CORS-with-preflight-and-SecurityHeadersPolicy」とは、CORSプロトコルのセキュリティ強化とともに、特定のセキュリティヘッダーポリシーを実装することを示します。
これにより、クロスオリジンリクエストが行われる際に、より安全な状態が確保されます。

CORS-and-SecurityHeadersPolicy

「CORS-and-SecurityHeadersPolicy」とは、クロスオリジンリソース共有（CORS）とセキュリティヘッダーポリシーの両方がサーバーで実装されていることを指します。
これにより、ウェブアプリケーションのセキュリティが向上し、不正なアクセスや攻撃から保護されます。

SecurityHeadersPolicy

「SecurityHeadersPolicy」とは、CloudFrontは、コンテンツデリバリーネットワーク（CDN）サービスです。
レスポンスヘッダーポリシーは、CloudFrontが返すレスポンスヘッダーを制御するためのポリシーです。
これにより、セキュリティの強化やアクセス制御が行われます。
例えば、CloudFrontのレスポンスヘッダーポリシーを使用して、特定のヘッダーを追加したり、変更したり、削除したりすることができます。

関数の関連付け – オプション

「関数の関連付け – オプション」ではデフォルトのままで問題ありません。

ビューワーリクエスト

ビューワーリクエストとは、ユーザーがウェブサイトにアクセスするとき、ユーザーのブラウザ（ビューワー）がCloudFrontにリクエストを送信します。

ビューワーレスポンス

ビューワーレスポンスとは、CloudFrontがユーザーに対してレスポンスを返します。

  • キャッシュされたコンテンツがあれば、それを返します。
  • キャッシュにない場合は、オリジンサーバーにリクエストを送信します。

オリジンリクエスト

オリジンリクエストとは、CloudFrontがオリジンサーバー（S3バケットやEC2インスタンスなど）にリクエストを送信します。

関連付けなし(No association)

  • 特定の関数やスクリプトをこれらのイベントに関連付けない設定です。デフォルトで選択されています。

CloudFront Functions

  • 軽量なJavaScript関数を用いて、リクエストやレスポンスを処理するオプションです。主に高パフォーマンスが求められる場面で使用されます。

Lambda@Edge

  • AWS Lambdaを利用して、より複雑なロジックを実行できるオプションです。例えば、ユーザー認証や動的コンテンツ生成などが可能です。

オリジンレスポンス

オリジンレスポンスとは、オリジンサーバーがCloudFrontに対してレスポンスを返します。
CloudFrontはこのレスポンスをキャッシュし、ビューワーに返します。

オリジンレスポンスもオリジンリクエスト同様に関連付けなし、CloudFront Functions、Lambda@Edgeの3つから選択をします。

ウェブアプリケーションファイアウォール (WAF)

「ウェブアプリケーションファイアウォール (WAF)」では「セキュリティ保護を有効にしないでください」にチェックをしてください。

設定

料金クラス

代替えドメイン(CNAME) – オプション

代替ドメイン名（CNAME）オプションは、Amazon CloudFrontを通じてコンテンツを配信する際に、独自のカスタムドメイン名を使用するための設定です。

以下、設定についてです

  • Route53でドメインを追加
  • CloudFrontのドメイン名を指すCNAMEレコードを追加
  • Certificate Managerで証明書をリクエスト

カスタムSSL証明書 – オプション

Custom SSL certificate – optionalはCloudFrontディストリビューションで設定することで、HTTPS接続をすることができます。

サポートされているHTTPバージョン

AWS Certificate Managerで管理されている証明書から選択できます。
新規で作成する場合は、SSL証明書のリクエストになります。

  • HTTP/2: HTTP/2をサポートします。HTTP/2は高速なデータ転送と効率的なリソース利用を提供します。
  • HTTP/3: HTTP/3をサポートします。HTTP/3はさらに高速で、より安定した接続を提供します。両方チェックすると、HTTP/2とHTTP/3の両方をサポートすることができます。

デフォルトルートオブジェクト – オプション

デフォルトルートオブジェクト – オプションでは、ビューアが特定のオブジェクトをリクエストしない場合に返されるデフォルトのオブジェクト（ファイル名）を指定できます。

例）
index.htmlを指定すると、ユーザーがディレクトリ（例：www.example.com/）にアクセスしたときにindex.htmlが返されます。

標準ログ記録

標準ログ記録では、CloudFrontがビューアリクエストのログを記録するかの設定ができます。

  • オン: ビューアリクエストのログを記録し、指定したAmazon S3バケットに保存します。ログにはリクエストの詳細情報（リクエスト元IPアドレス、リクエスト時間、リクエストされたオブジェクトなど）が含まれます。
  • オフ: ビューアリクエストのログ記録を無効にします。

IPv6

IPv6では、IPv6プロトコルをサポートするかどうかを設定できます。

  • オン: IPv6アドレスを使用してCloudFrontディストリビューションにアクセスできるようにします。
  • オフ: IPv6サポートを無効にします。IPv4アドレスのみをサポートします。

説明 – オプション

説明 – オプションでは、CloudFrontディストリビューションに関する説明を入力します。

hosts

Posted by kami