無料ドメインでAWS Route53 + CloudFront + アプリケーション or S3（静的サイト)を構築する 

## はじめに

- アプリケーションサーバーはAWS内で構築済みの前提
- S3の静的サイトを作る場合の設定は以下に書きました
 
Amazon S3 での静的ウェブサイトのホスティング方法 
 https://qiita.com/mekappi/items/1354e20b275906f31e10

- 最終ゴールはインターネット経由で→CloudFront→ アプリケーション or S3(静的サイト)にアクセスできるようにすること
- この記事の設定例はアプリケーションの静的コンテンツをCloudFront経由で配信できるようにしていくものですが、静的サイトの運用の場合にも応用できると思います。

## ドメイン取得
まずはドメインを取る
無料でドメイン取得ができるmlドメインとかを使う

Freenom
https://my.freenom.com/

好きなドメインを検索して登録します。
（この時点では何も設定しなくて良い）
今回はこの記事用に「champ-dev.ml」というドメインを取って構築していきます。

![aa.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/f8251049-b952-b31b-083f-4a263856e980.jpeg)


## ドメイン名設定 

Route53を使ってDNSサーバーを設定していきます。

ホストゾーンの作成→ドメイン名に取得したドメインを入力します。

![a6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/0513d0ba-c4c6-ab68-348a-1dd2d5a9df4e.jpeg)

作成したホストゾーンにはNSレコードが自動作成されているのでその値をコピーしておきます。
![a7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/0891fc0e-51ae-8b99-5400-7856873baaba.jpeg)

Freenomに戻ります。

MyDomains
![a3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/0ee5969b-ff35-6743-a92b-856a0606c123.jpeg)

ManageDomains
![a5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/1cc5cd8f-98fb-dc5d-16be-22333e3cd858.jpeg)

Mabnagement Tools → Nameservers Route53でコピーした４つのNSレコードの値を
それぞれに貼り付けて登録します。

![a8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/d92a5bf7-597b-5374-882f-74068534a86b.jpeg)

これでFreenom→Route53の設定が完了です

## SSL

AWSのCertificate Managerを開きます。
ここで注意なのはCloudFrontで使う証明書はリージョンがus-east1（バージニア北部）でなくてはいけません。（何故か）
なのでリージョンの切り替えを忘れずに。

パブリック証明書のリクエスト
![a10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/a0f55714-5254-31a7-a9f3-48da42e15503.jpeg)

証明書を発行したいドメインを入力します。
XXX.mlとサブドメイン分の*.XXX.mlを登録しておきましょう
![a11.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/17fc6214-18d1-12d6-15f9-bd53292a41fa.jpeg)

DNSの検証
![a12.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/8145c72e-bbc3-bad7-78a3-bcb3ea120f49.jpeg)

▶をクリックして証明書のエクスポートを押下、DNS_Configuration.csvというファイルがダウンロードされます。
![a13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/723b325c-f165-7227-d632-14f02516272d.jpeg)

ファイルにrecordNameとRecordValueが記載されています。
DNS検証を完了するためにRoute53にこの値を登録する必要があります。

![a15.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/9f1b1880-85fd-c61f-86f5-798d8481c40f.jpeg)

Route53に戻ります。
レコードセットの作成→名前にcsvのrecordName、値にRecordValueを入力してCNAMEレコードを作成します。
![a14.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/94097f17-a872-fc64-c4d0-fffe163061bd.jpeg)

しばらくしてCertificate Managerに戻ると状態が発行済になります。

## S3バケットを作る
バケットを作り、
静的サイトの場合はhtmlファイル等をアップロードします。
アプリケーションの静的リソースをCloudFront + S3で配信したい場合もファイル作成してアップロードしておきましょう

## CloudFrontを作る

ディストリビューションとオリジンとbehaviorを作ります
それぞれはこんなイメージ
 - ディストリビューション : 全体設定
 - オリジン ： 個別のサービスの設定
 - behavior : オリジンのルーティングルール

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

作成済みのキャプチャですが、新規作成時はディストリビューションとオリジンを同時に作成する画面になります。

- **Altername Doiman Names** 独自ドメインを使用する場合に設定
- **SSL Certificate** SSLでアクセスする場合、証明書を設定する独自ドメインを利用する場合は「Custom SSL Certificate」を選択し、独自ドメインの証明書を指定する
- **Default Root Object** デフォルトのルートオブジェクトを設定 デフォルトはindex.html
- **Logging** ログを取得するかを選択、S3バケットにリクエストログを出力してくれる。有料だが本番環境やデバッグの時はONにしたほうがよい
- **Bucket for Logs** ログを配置するS3のバケットを選択
- **Log prefix** ログファイル名の先頭に付ける文字列を指定
- **Cookie Logging** ログにCookieも記録するか選択
- **Distribution State** Distributionの使用準備が整った後、自動的に有効にするかを選択

ちなみにログはこんな感じ（このサンプルではcookieは出力していない）

```
#Version: 1.0
#Fields: date time x-edge-location sc-bytes c-ip cs-method cs(Host) cs-uri-stem sc-status cs(Referer) cs(User-Agent) cs-uri-query cs(Cookie) x-edge-result-type x-edge-request-id x-host-header cs-protocol cs-bytes time-taken x-forwarded-for ssl-protocol ssl-cipher x-edge-response-result-type cs-protocol-version fle-status fle-encrypted-fields
2019-05-21	06:29:14	NRT12-C3	333	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/css/loading.css	304	http://champ-dev.ml/	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Hit	L5QfLg4DgAfaKnpgpRZPHaS_JyP8ThrcfHACWu5fyd4VLSaJ2yY0EQ==	champ-dev.ml	http	467	0.001	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/	200	-	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Miss	g0Tk2y7e_nOCihKH-XOeCPhJzRKH4DAYj8Tn4ztBR3YNawhpL_qXmQ==	champ-dev.ml	http	442	0.335	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/	200	-	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Miss	UR6HFZku3uxcY9nGa7gHKRJVB9WUaWMpvnBC3A7SQbfWurt3REncdA==	champ-dev.ml	http	423	0.154	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	333	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/css/loading.css	304	http://champ-dev.ml/	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Hit	RZCyKJrRemWJVl_nlTg7D2JG8i4KdFyjXpZbReUgaiq-VD5R6m-__w==	champ-dev.ml	http	448	0.001	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:14	NRT12-C3	333	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/images/logo-jhipster.png	304	http://champ-dev.ml/content/css/loading.css	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	-	-	Hit	5b6CMCNfUCSL_wtbXW5jKch_WrkjUfGxwjWIUtzday7CG6FzB9BG2A==	champ-dev.ml	http	501	0.000	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:16	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/api/scoreboards	200	http://champ-dev.ml/	Mozilla/5.0%2520(Windows%2520NT%252010.0;%2520Win64;%2520x64)%2520AppleWebKit/537.36%2520(KHTML,%2520like%2520Gecko)%2520Chrome/74.0.3729.157%2520Safari/537.36	gameGroupId=1&page=0&size=20	-	Miss	AA1nM01jaGRfOCsrxt_MPCkIbPaDuAIcmuDsDTP7uvdqgKvXqPYmXg==	champ-dev.ml	http	383	0.344	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:27	NRT12-C3	2885	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/	200	-	Mozilla/5.0%2520(iPhone;%2520CPU%2520iPhone%2520OS%252010_3_1%2520like%2520Mac%2520OS%2520X)%2520AppleWebKit/603.1.30%2520(KHTML,%2520like%2520Gecko)%2520Version/10.0%2520Mobile/14E304%2520Safari/602.1	-	-	Miss	i99Bzkx76Z9EpTGceIwh5W4qlAWQz8MjNDeLHsTn0vSfrAj68RWIKg==	champ-dev.ml	http	488	0.312	-	-	-	Miss	HTTP/1.1	-	-
2019-05-21	06:29:27	NRT12-C3	4066	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/content/css/loading.css	200	http://champ-dev.ml/	Mozilla/5.0%2520(iPhone;%2520CPU%2520iPhone%2520OS%252010_3_1%2520like%2520Mac%2520OS%2520X)%2520AppleWebKit/603.1.30%2520(KHTML,%2520like%2520Gecko)%2520Version/10.0%2520Mobile/14E304%2520Safari/602.1	-	-	Hit	u5gXWVHEh_Rs7j-RvopmIl_5OdaOxBgwzU1-7CC3p8zP25S8BMbZSg==	champ-dev.ml	http	412	0.001	-	-	-	Hit	HTTP/1.1	-	-
2019-05-21	06:29:27	NRT12-C3	127664	124.146.227.61	GET	dd108ihzlobta.cloudfront.net	/app/polyfills.bundle.js	200	http://champ-dev.ml/	Mozilla/5.0%2520(iPhone;%2520CPU%2520iPhone%2520OS%252010_3_1%2520like%2520Mac%2520OS%2520X)%2520AppleWebKit/603.1.30%2520(KHTML,%2520like%2520Gecko)%2520Version/10.0%2520Mobile/14E304%2520Safari/602.1	-	-	Hit	JwvBqo2wVdt6X0OMfe63Sx-ywm6fZyMgRJs6ntz6ZE4ngQRwIeEe5g==	champ-dev.ml	http	397	0.001	-	-	-	Hit	HTTP/1.1	-	-

```


![d1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/1e9aa10f-d314-79b5-c0a0-06adb24933c4.jpeg)

![d2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/6ddee59f-d308-c49c-0a84-2465d6455ab5.jpeg)

### オリジン作成

**※オリジンはパブリックアクセスできるものである必要があります。**
ALBがパブリックなので、設定してもcloudFront経由でアクセスも、ALBに直接アクセスも可能になります。
ALBの直接アクセスを封じたい場合は以下を参照

CloudFrontのELBオリジンへ直接アクセスする通信を制限する方法
https://dev.classmethod.jp/cloud/aws/how-to-restrict-elb-origin/

- **origin domain name** オリジンを指定、ここではS3 
- **origin path**  cloudFrontへのリクエストをオリジンサーバーの特定のパスにルーティングしたい場合に設定。 「/foo/index.html」に誘導したい場合は「/foo/index.html」と入力する。 |
- **origin path**  このディストリビューションを区別するための名前を設定（好きなものでOK）  |
- **Restrict Bucket Access** オリジンがS3の場合のみ有効 S3バケットのコンテンツへのアクセスをCloudFrontからのみに制限する場合は「Yes」を選択。S3のエンドポイントへ直接アクセスした場合もコンテンツを表示できるようにしておく場合は「No」を選択  |

まずはS3側
![a1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/72bf67f3-1639-a642-d78d-f19777455d6d.jpeg)

次にアプリケーション側
今回はECSでクラスター組んでいてALBが入り口になっているのでそれを指定します。
![a2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/ccd20455-3bc7-f9a3-1cce-11d77ed38a0b.jpeg)
![aaaa.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/ccd7930d-b438-7af1-ea0a-9350a6a6d3b9.jpeg)


### behavior作成

- **Path Pattern** このオリジンを有効にするリクエストのパスパターンを指定
- **Allowed HTTP Methods** エンドユーザに許可するHTTPメソッドを選択 
- **Cached HTTP Methods** CloudFrontでのキャッシュが有効になるHTTPメソッドを選択
- **Forward Headers** CloudFrontがオリジンサーバーに転送するリクエストヘッダーの指定と、ヘッダー値に基づいてオブジェクトをキャッシュするかの設定を行う。「Whitelist」を選択すると、ヘッダー値によってキャッシュする内容をコントロールすることが可能になる。
- **Object Caching** Cloud Frontがキャッシュを保持する時間の設定。オリジンサーバーで追加したCache-Controlの時間に応じてキャッシュを保存する場合は、今回の値を設定する。ヘッダーに依存せずに時間を決める場合は「Customize」を選択し、Minimum TTLを設定する
- **Forward Cookies**  CloudFrontからオリジンサーバーに転送するCookieを指定。動的に作成されたコンテンツでもCookieの値が同じであればCloudFrontでキャッシュすることができる。効果的に使えばアクセスが速くなり、オリジンサーバーの負荷も下がる。なお、S3はCookieを処理できないため、オリジンサーバがS3の場合はこの機能は無効
- **Forward Query String** クエリ文字列をオリジンサーバーに転送するか選択、「Yes」にすることでクエリ文字列が一致した場合はキャッシュを返すことが可能になる
- **Smooth Streaming** Microsoftスムーズストリーミング形式のメディアファイルを配信する場合はYes
- **Restrict Viewer Access** 署名付きURLを利用するかの選択。例えば認証されたユーザーのみにコンテンツを配信する場合等に「Yes」を選択する 



S3側の値


![b1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/7ed246d8-0e19-6de6-1fde-ab1f86ac2591.jpeg)
![b2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/7845264a-ea20-403c-f7e7-3f606a718a2e.jpeg)

アプリケーション側
![bb1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/710d3fd6-8b82-ec57-7458-7b4c5348cd26.jpeg)
![bb2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/1879979a-92d2-6a00-8339-9bb8426e1f1f.jpeg)

これでCloudFront → App or S3ができました

# Route53→CloudFront

Route53でAレコードを作ります。
ドメインと値を紐づけていく

![r1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112584/606b3343-434b-1eec-5840-834fb2f1d776.jpeg)


これでインターネットからアクセスできました。
完了です。