目標
S3内に静的ホスティングしたコンテンツをCloudFront（※）へキャッシングする。
※CloudFrontとは
S3、EC2等に存在するWEBコンテンツ（html、css、javascript等）を
世界中に無数に存在するエッジサーバ内にキャッシングさせ、
WEBアクセス（特に地理的に遠い場所からの）を高速化するAWSサービスです。
全世界に大規模なウェブコンテンツを配信したい際に有用となります。
前提
パブリックアクセス許可、及び静的ウェブサイトホスティングを有効化したS3バケットが作成済みであること。
※参考
【S3】静的WEBサイトホスティング
https://qiita.com/aWdfcfG2jLr73pe/items/d5be466d7dcb156649ae
完成図
用語集
エッジロケーション
世界中に無数に存在するAWSネットワークのこと。
CloudFrontの実体であるサーバ（エッジサーバ）は各エッジロケーション内に存在しています。
オリジン
CloudFrontがコンテンツをキャッシングする際のコンテンツ元となるマシンのこと。
オリジンとして指定されるマシンは基本的にS3やEC2、ELBとなります。
ディストリビューション
CloudFront設定の呼称（単位）
参考AWSドキュメント
Amazon CloudFront とは
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
簡単な CloudFront ディストリビューションの使用を開始する
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.SimpleDistribution.html
作業の流れ
| 項番 | タイトル |
|---|---|
| 1 | CloudFront ディストリビューションの作成 |
| 2 | CloudFrontへのアクセスをテスト |
手順
1. CloudFront ディストリビューションの作成
①AWS マネジメントコンソールにサインインし、CloudFront コンソールhttps://console.aws.amazon.com/cloudfront/ を開きます。
②**Create distributionをクリック**
③WEBセクションのGet Startedをクリック
③**Origin Domain Nameにキャッシング対象としたいS3バケットのドメイン名を入力**
プルダウンで選択できます。Origin IDは自動で入力されます。
記載が終わったら、画面下部にあるCreate Distributionをクリック
④作成したディストリビューションStatusがDeployedになるまで待つ
数分待つ必要があります。
2. CloudFrontへのアクセスをテスト
①オリジン（S3）に検証用画像コンテンツをアップロード
（dice.pngという画像をアップロードしました。）
②アクセス検証用HTMLファイル作成）
ローカルマシン上にアクセス検証用のHTMLファイルを作成します。
拡張子が.htmlであればファイル名は任意です。
中身を以下コードに記載します。
<html>
<head>My CloudFront Test</head>
<body>
<p>My text content goes here.</p>
<p><img src="https://<domain name>/<object name>" alt="my test image"/>
</body>
</html>
<domain name> は、作成したCloudFront ディストリビューションのドメイン名（※）に置き換えます。
<object name> は、Amazon S3 バケット内のファイル名（手順①の画像ファイル名）に置き換えます。
※ ディストリビューション一覧画面赤枠内の値です。
③アクセス検証実施
作成したHTMLファイルをブラウザに読み込ませます。
以下のようにオリジン（S3）にアップロードした画像が表示されれば、
CLoudFrontへのオリジンデータのキャッシュ及び疎通が正常のためOKです。
=================================================================
補足. CloudFrontのレイテンシー解消性能を検証しました
以降興味本位の補足です。
CloudFrontでどれだけレイテンシーが解消されるのか確認したく、
pingを利用して以下の疎通パターンを検証してみました。
① EC2(ロンドンリージョン) ⇒ オリジン（S3）（東京リージョン）
…平均ping応答時間は209ms
[root@ip-172-31-46-31 ~]# ping -c 3 test-web-hosting-ryosuke.s3-ap-northeast-1.amazonaws.com
PING s3-r-w.ap-northeast-1.amazonaws.com (52.219.136.91) 56(84) bytes of data.
64 bytes from s3-ap-northeast-1-r-w.amazonaws.com (52.219.136.91): icmp_seq=1 ttl=31 time=209 ms
64 bytes from s3-ap-northeast-1-r-w.amazonaws.com (52.219.136.91): icmp_seq=2 ttl=31 time=209 ms
64 bytes from s3-ap-northeast-1-r-w.amazonaws.com (52.219.136.91): icmp_seq=3 ttl=31 time=209 ms
--- s3-r-w.ap-northeast-1.amazonaws.com ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2002ms
rtt min/avg/max/mdev = 209.536/209.632/209.812/0.543 ms
② EC2(ロンドンリージョン) ⇒ CloudFront
…平均ping応答時間は2.4ms
80～90倍レスポンス時間が短縮されています。
[root@ip-172-31-46-31 ~]# ping -c 3 dp2ogcse3zj4.cloudfront.net
PING dp2ogcse3zj4.cloudfront.net (13.227.171.216) 56(84) bytes of data.
64 bytes from server-13-227-171-216.lhr52.r.cloudfront.net (13.227.171.216): icmp_seq=1 ttl=237 time=2.71 ms
64 bytes from server-13-227-171-216.lhr52.r.cloudfront.net (13.227.171.216): icmp_seq=2 ttl=237 time=2.33 ms
64 bytes from server-13-227-171-216.lhr52.r.cloudfront.net (13.227.171.216): icmp_seq=3 ttl=237 time=2.32 ms
--- dp2ogcse3zj4.cloudfront.net ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2002ms
rtt min/avg/max/mdev = 2.329/2.458/2.713/0.188 ms
上記単純なpingでの検証ではありますが、全世界規模に公開するWEBサイトを利用したい場合、
CloudFrontを利用すると大幅に性能が向上するといえるかと思います。