【AWS CloudFront】WEBページアクセスを高速化

##目標
S3内に静的ホスティングしたコンテンツをCloudFront（※）へキャッシングする。

※CloudFrontとは
S3、EC2等に存在するWEBコンテンツ（html、css、javascript等）を
世界中に無数に存在するエッジサーバ内にキャッシングさせ、
WEBアクセス（特に地理的に遠い場所からの）を高速化するAWSサービスです。
全世界に大規模なウェブコンテンツを配信したい際に有用となります。

##前提
パブリックアクセス許可、及び静的ウェブサイトホスティングを有効化したS3バケットが作成済みであること。

※参考
【S3】静的WEBサイトホスティング
https://qiita.com/aWdfcfG2jLr73pe/items/d5be466d7dcb156649ae

##完成図
![cloudfront (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/ffd1b868-2795-6a61-04b3-02152e8c58c0.png)

##用語集
**エッジロケーション**
世界中に無数に存在する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`をクリック**
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/687fa82f-2574-8085-20f9-5caf43823de3.png)

③**WEBセクションの`Get Started`をクリック**
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/d180199e-15ef-c46f-5976-3bccea0e24e4.png)

③**`Origin Domain Name`にキャッシング対象としたいS3バケットのドメイン名を入力**
プルダウンで選択できます。Origin IDは自動で入力されます。
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/711831b2-21bc-d26f-e52b-19ca1a889b29.png)

記載が終わったら、画面下部にある`Create Distribution`をクリック
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/d3a133b7-0b73-bde2-717f-6cff1b591749.png)

④**作成したディストリビューションStatusが`Deployed`になるまで待つ**
数分待つ必要があります。
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/123223dd-bad9-422c-8335-8906dbed5258.png)

###2. CloudFrontへのアクセスをテスト
①オリジン（S3）に検証用画像コンテンツをアップロード
（dice.pngという画像をアップロードしました。）
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/05de7535-2dc8-edd7-87ce-2c1d54f051ed.png)


②**アクセス検証用HTMLファイル作成）**
ローカルマシン上にアクセス検証用の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 バケット内のファイル名（手順①の画像ファイル名）に置き換えます。


※　ディストリビューション一覧画面赤枠内の値です。
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/1702912e-e3f0-9b8f-63e5-45f8d3a83682.png)

③**アクセス検証実施**
作成したHTMLファイルをブラウザに読み込ませます。
以下のようにオリジン（S3）にアップロードした画像が表示されれば、
CLoudFrontへのオリジンデータのキャッシュ及び疎通が正常のためOKです。

<img width="459" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647616/875f026f-4f84-df74-8366-38d7062d580a.png">

=================================================================

###補足. CloudFrontのレイテンシー解消性能を検証しました
以降興味本位の補足です。
CloudFrontでどれだけレイテンシーが解消されるのか確認したく、
pingを利用して以下の疎通パターンを検証してみました。

①　EC2(ロンドンリージョン)　⇒　オリジン（S3）（東京リージョン）
…平均ping応答時間は**209ms**

```bash
[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倍レスポンス時間が短縮されています。

```bash
[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を利用すると大幅に性能が向上するといえるかと思います。