安い、速い、うまいSSL対応ホームページの作り方

- まず初めに  
  - 動的なコンテンツを表示したいですか？ -> Yes（お問い合わせフォームが欲しい、ログイン機能が欲しい等）   
```残念ですが、この記事は参考になりません。静的ページのみ対象です。```  

- AWSを使用します。クレジットカードなどが必要になります。  


  
#速いとは  
CDNを利用しているから  
CDNとは？  
https://www.akamai.com/jp/ja/cdn/what-is-a-cdn.jsp

#安いとは？
CDNのお値段比較  
https://qiita.com/maru3/items/fa62f73e6476b8112787
AWSが最安とは言っていない。  
ただ、cloudfront <-> S3間の通信費が必要ない。  

#うまいとは？
＊

#手順
- まず、作りたいホームページのドメインを取得する。
Route53で購入しよう。  
"hasami.uk" というものを私は購入しました。実家がイギリスの鋏屋さんです。

- S3にバケットを作成しよう。

購入したドメインのS3と、www."購入したドメイン"　の２つを作成する。
私の場合
hasami.uk　　こっちはパブリックアクセスブロックしてよし。 ブラウザで直接　hasami.ukとアクセスされた時に　https://www.hasami.uk/にリダイレクトさせるために作成。
![FireShot Capture 009 - S3 Management Console - s3.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/a01b3fc9-01fe-8f22-a673-d0335969f9ff.png)

www.hasami.uk　こっちはパブリックアクセスのチェックを全部外す。注意のところはよく読んでチェックしよう。
![FireShot Capture 006 - S3 Management Console - s3.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/eca9d179-f23c-3824-f282-04a82cb595a5.png)

の２つのバケットを作成した。

hasami.ukの方のバケットには
S3＞プロパティ＞静的ウェブサイトホスティング
の編集を行う。　デフォが無効になっているので　有効にして・・
![FireShot Capture 015 - S3 Management Console - s3.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/4063b0db-cc13-a5e6-2d31-0df72a0ab904.png)
で　「オブジェクトのリクエストをリダイレクトする」
「ホスト名」に　wwwツキの方を書き込んでおく。 プロトコルはHTTPを選んでください。
![スクリーンショット 2021-03-20 19.18.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/0ece5e89-9187-a7f5-f48f-8c682f9267fc.png)

変更の保存。

www.hasami.ukの方に　 アクセス許可たぶ＞バケットポリシーを設定する。aws:Refererに　お好きな文字列（長めがいい）を設定しておく。

```
{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests originating1234567890",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.hasami.uk/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "himitsu_desu"
                }
            }
        }
    ]
}
```

![FireShot Capture 027 - S3 Management Console - s3.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/56c009ab-e669-0fed-2932-b63408425215.png)
変更を保存し、
ここでテストしよう。

![FireShot Capture 030 - S3 Management Console - s3.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/11fb37f9-0570-8b1a-05fb-7141283c9dc9.png)
バケットウェブサイトエンドポイントに対して、普通にcurlをするとアクセスdenied

```
katsura@iMac ~ % curl  http://www.hasami.uk.s3-website-ap-northeast-1.amazonaws.com/ 
<html>
<head><title>403 Forbidden</title></head>
<body>
<h1>403 Forbidden</h1>
<ul>
<li>Code: AccessDenied</li>
<li>Message: Access Denied</li>
<li>RequestId: 3HE75TKEW5ZH2N7X</li>
<li>HostId: OcM68kP+jYV3rPVbNp2ERb/xG75KdD1oLA+qFW3WK9ZiDUYMtZaMqJuz64gPyJ91eryU59mcno0=</li>
</ul>
<hr/>
</body>
</html>
```

バケットポリシーで設定したRefererヘッダを付与した場合、コンテンツが見られることをかくにん。

```
katsura@iMac ~ % curl -H 'Referer:himitsu_desu' http://www.hasami.uk.s3-website-ap-northeast-1.amazonaws.com/
<!doctype html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ハサミ</title>
    </head>
    <body>
        <h1>ハサミ</h1>
        <p>It works!</p>
    </body>
</html>%
```







Route53の方にも設定が必要だ。

![FireShot Capture 018 - Route 53 Console Hosted Zones - console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/e930dc5d-7a34-3e30-d728-5a7f72b229b2.png)


レコード名を　トップレベルのドメイン　つまり　レコード名　を空「から」で　レコードタイプを「A」
トラフィックのルーティング先　として　INFOスイッチをONにすると　S3ウェブサイトエンドポイントへのエイリアスが出てくる。
S3作ったリージョンを選ぶと　無事に　hasami.ukバケットがあるので　選択し、レコードを作成。

ここでテストしよう

```
katsura@iMac ~ % curl -D - hasami.uk   
HTTP/1.1 301 Moved Permanently
x-amz-id-2: MnaE3tDh6+ghBk6ZTPxcUR0bHSZdew6ebPuw4djzFOpyHmnc0wnFMQ8ZP5ALjaImxObfA+0CWwA=
x-amz-request-id: BBSB6G8KWDVGZVJE
Date: Sat, 20 Mar 2021 10:20:29 GMT
Location: http://www.hasami.uk/
Content-Length: 0
Server: AmazonS3
```

301と言われているのでOKだ。

次にwww.hasami.ukにコンテンツをアップロードする。　これがホームページの素材だ。
適当にindex.html (つまりトップページ)を書き込んでっと。
![スクリーンショット 2021-03-20 18.35.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/0e7c620b-b5af-2a27-ef95-7c061ba7ba13.png)

ホームページのコンテンツは完成した。

これをHTTPSで配信する。
www.hasami.uk のS3バケットも　静的ウェブサイトホスティングの有効化を行う。
今度は　「静的ウェブサイトをホストする」　ラジオボタンをONにして
インデックスドキュメントとして　index.htmlを指定する。
（エラーページも用意してもいいかもしれない。）
![FireShot Capture 021 - S3 Management Console - s3.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/d21b2a76-15ba-34a1-4bf7-e9880db7e791.png)

変更の保存を行う。


#やっとcloudfrontですね。
![スクリーンショット 2021-03-20 19.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/cc00f936-4f12-f68a-63e5-4b9fa1f30553.png)
ここ英語です。
create Distributionをクリック。　＞　Get　Started
先にACMで証明書を作っておきましょう。
今回はwww.hasami.ukの証明書。
![スクリーンショット 2021-03-20 19.45.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/4aea014d-d008-780a-ab6f-e3621c99f628.png)
（ここのフローを進めるとRoute53に自動でレコード作ってくれます。）
作成できたら
cloudfrontに戻って
![FireShot Capture 036 - AWS CloudFront Management Console - console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/e820dc74-0e23-35ad-a9ba-f4129e7be77f.png)

OK

オリジンの設定をする。　OriginDomainNameにS3バケットが選択できるので　wwwを選択する。

![スクリーンショット 2021-03-20 21.24.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/ed1d8be7-337a-ce28-c17b-5446d32ef3f8.png)



最後のOrigin Custom Headerに
Header Name 「Referer」、Value「S3のバケットポリシーで設定したやつ（himitsu_desu）」を入れる
あとはデフォでいいと思います。

最後にRoute53に
なんとか.cloudfront.com -> www.hasami.ukに名前解決させたいので
作成したcloudfront のgeneralタブに　DomainNameが書いてあるので
![スクリーンショット 2021-03-20 21.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/d30778c5-4d01-f584-6330-ce6154d0d405.png)


これをRoute53にCNAMEで登録する。
![スクリーンショット 2021-03-20 21.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1224758/11004bdd-5140-c9e4-0421-6904ea7b7df1.png)

完成だ。

最終確認

```
katsura@iMac ~ % curl -D - https://www.hasami.uk
HTTP/2 200 
content-type: text/html
content-length: 248
date: Sat, 20 Mar 2021 12:33:38 GMT
last-modified: Sat, 20 Mar 2021 12:15:07 GMT
etag: "7870ebfca42a75a820cd96e145cdb6b4"
accept-ranges: bytes
server: AmazonS3
x-cache: Hit from cloudfront
via: 1.1 853dab48fd1de187261c15f5b98cd2a0.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-C4
x-amz-cf-id: GyJDgpudMNhmxFjrIItzu2B0YnYv8nMusXpcn6aaRt0zjES1SAGz2Q==
age: 7

<!doctype html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ハサミ</title>
    </head>
    <body>
        <h1>ハサミ</h1>
        <p>It works!</p>
    </body>
</html>% 
```

```
katsura@iMac ~ % curl -D - hasami.uk  
HTTP/1.1 301 Moved Permanently
x-amz-id-2: ALlahY+LWzoFtb2CYm1cslzd1gnwo2Mor7H7lkFqWoVePY6iacczqOM+wtJyIKUi4jJJ0zzOXk8=
x-amz-request-id: V28H69F8RC1CANTP
Date: Sat, 20 Mar 2021 12:35:30 GMT
Location: http://www.hasami.uk/
Content-Length: 0
Server: AmazonS3
```

お疲れ様でした。
あとはS3にコンテンツを増やしていこう。