<AWS>S3にHTTPS(SSL通信)の静的サイトを立ち上げた時の話

#TL;DR
<font color="LightGray">too long didn't read</font>
はじめに、キャプチャ多めで、全文が長いので、作業工程の要約をここにまとめたいと思いますー

1. ドメインを無料で取得。（[freenom][1]）
2. `Amazon S3`に静的ホスティング用の対象ファイル(index.htmlとか)をアップロード
3. `Route53`でドメインを名前解決する。
    1.  Route53でホストゾーンを作成
    2.  ドメイン取得したサイト([freenom][1])のネームサーバー設定にRoute53ホストゾーンの`NS`ドメインを設定
4. `AWS Certificate Manager`で取得ドメインに対して証明書を発行
    1. CNAME作成 
5. `CloudFront`でS3バケットの静的サイトに対して、アクセス可能にする。
    1. CloudFontでディストリビューションを作成
    2. Route53で、CloutFrontのドメイン用のAレコードを作成
    3. S3バケットで、パブリックアクセス設定を変更し、バケットポリシーをJSONで書き換え

(※ちなみに、ちょいちょい個人情報的なのは消してます。お見苦しかったらお許しを☆)
[1]:https://www.freenom.com/ja/index.html

#Amazon S3静的サイトホスティングのアーキテクチャ
今回のアーキテクチャは以下のようになっています。
![静的サイトアーキテクチャ2021-02-08 10.11.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/ed139bb7-3045-c87e-bc08-4ddfe9ee0f7d.png)


#ドメインを取得

AWSのRoute53で取得するとお金がかかるので、
今回は、**[freenom][1]で無料でドメインを取得**しちゃいます。

1. freenomのサイトはこんな感じです。(2021-02-08現在)
トップのヘッダー画像はアクセスごとに変わるみたいです〜。(世界観がすごい)
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/828b9a42-2f58-6fd8-02ab-2ee807735404.png)


2. `Services`タブから「`Register a New Domain`」を選択して、任意のドメイン利用状況をチェック
使われてないといいな〜
**「$0」：プライスレスに感動**
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/8fde7430-ba6d-6770-e243-751028d0ddd7.png)
※ちなみに、`.tk`はオーストララシアにあるニュージーランドの領土であるトケラウのドメイン。（日本は`.jp`ですね〜〜・・・国ごと売ったのか、、、売国主義www）


3. 「`Get it now!`」から好きなドメインを選択して、「`Checkout`」
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/db872737-6fbe-25d5-ff97-9c6ed7609cd9.png)


4. カートページに飛び、内容を確認。
`Period`のところで、期間を選択。**最大で12ヶ月無料も指定できちゃいます。**
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/753ccdb8-bc71-82ce-8f67-c7775dd03ae1.png)
※**後でネームサーバーの設定をする**ので、「`Forward this domain`」or「`Use DNS`」は、一旦飛ばす。


5. 明細を確認。利用規約に同意して、「`Complete Order`」
確かに$0(0円)。マックのスマイルと同じプライス、タダですねえ！！
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/d69f51f3-4aa3-a864-4de0-5fb96cd597e7.png)

6. 注文が完了しました！
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/06f39ef4-1db8-8017-0743-ec099a2404a7.png)

7. ちなみに、「`Services`」タブの「`My Domains`」を選択すると一覧が出るので、「`Manage Domain`」を押すと
![8-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/73dffa09-c1c7-0bd2-fab1-6f4643071ae6.png)
それぞれのドメインに関連する色々な設定画面に飛べます。
`NameServer`なんかの設定もここで出来ます。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/8bbf6d31-810a-eeae-cbf6-34ceec2c5a90.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/bfbad2af-de70-196f-4d14-9e6ceb7b0b05.png)





#Amazon S3に静的サイト用のindex.htmlアップ
（キャプチャがちょいちょい細切れになっていますm(_ _)m）

1. 静的サイトをホストするためのバケットを作成します。
<font color="DarkOrange">オレンジ</font>のボタン「**バケット作成**」をクリック
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/2feba3dd-5aeb-e46e-86a9-924cfcce7690.png)
バケット名を任意の名前で作成（**※静的ファイルを配信したいドメイン名にするのが、オススメ**）
一旦全て、**デフォルト設定**で作成しちゃいます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/e349437e-8272-6a0f-fc45-7473df695d85.png)
**CloudFrontとの結びつけの際に、このパブリックアクセス設定が重要に**なってきます。(※後述予定)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/ee2b9f7c-a8e5-bcf9-1644-db380e185772.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/bb79e3ea-72cf-c442-240a-c102711fb580.png)

2. 静的ウェブサイトホスティング設定を有効にする
インデックスドキュメントに`index.html`と記入
![2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/c3c87893-b613-73d8-1e13-70d65305e205.png)


3. ファイルをアップロード
「ファイルを追加」から好きなファイルをアップロードしましょう〜
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/6a48e4c3-0c6b-4910-b582-5f1942ead5d5.png)
アップするとこんな感じなります。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/82f86ebd-3ad9-57f7-8a6f-c6d481f60e0f.png)
これまで、レンタルサーバーとかに`FTP`でファイル転送してアップしてたけど、
そういった手間とソフトウェアも要らないし、**めっちゃくちゃ楽!!**





#Route５３でホストゾーンを作成

1. Route53のダッシュボードはこんな感じです。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/f7840e15-447b-7eb9-a646-91219e1f0622.png)
左のサイドバーから**ホストゾーン**を押します。

2. ホストゾーンのページはこんな感じです。一覧が表示される
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/03131a5f-aa83-a5a9-9f8a-9f3f2bfbaeaf.png)
「ホストゾーンの作成」を押すと〜

3. ホストゾーン作成ページ
ドメイン名に取得した任意のドメインを入れましょう
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/b1a439b0-188f-4eae-9019-a422b453bcca.png)
（キャプチャでは写ってないですが、）右下に、オレンジ色の作成ボタンがあるので、
そのボタンをクリックすると作成できます！
上述の`1.`のキャプチャの通り、ホストゾーンの一覧に表示されます。

4. ちなみに、ホストゾーンだけを作成すると、最初に`NS`と`SOA`のタイプのドメインが発行されます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/b62f8f24-e153-a92c-aa57-83dda0504643.png)
**NSの4つのものは、ドメインを取得したサイト（[freenom][1]）で、ネームサーバーとして設定する**

5. [freenom][1]のネームサーバーに、`NS`のタイプのドメイン4つを設定する。
※ネームサーバーは、そのドメイン(`test-https-static-hosting.tk`)に訪れた時に、ルーティング先のドメインを解決してくれるサーバーの役割を果たすやつ
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/146cb206-c827-4f39-ee6e-8aa7cae88ee0.png)





#`AWS Certificate Manager`で証明書を取得しましょう
「証明書のリクエスト」をクリック!!

1. `Certificate Manager`のトップページはこんな感じです。
証明書発行のリージョン設定は、**バージニア北部(us-east-1)じゃないと、CloudFrontディストリビューション設定ができないので、注意**が必要です。
**※必ず、バージニア北部(us-east-1)指定してください。
※ちなみに、証明書を別リージョンに移すこともできません。**
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/06e026e1-8786-761a-df58-4172834a3b58.png)


2. 証明書のリクエストを開始します。
ドメイン名に、
`test-https-static-hosting.tk`と`*.test-https-static-hosting.tk`
の２種類を登録するといいでしょう〜。
S3の設定も必要ですが、
もしサイトに`www.test-https~`みたいな形でアクセスしたい時には、
`*`のワイルドカードを使用しましょう。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/d68a3755-3b92-dec9-1e8b-7b5c62d99bbe.png)
次へ。


3. 「検証方法の選択」ですが、DNSの検証の方が、公式でもオススメされているので、こちらを使います。
**のちのち、ドメイン取得サイト([freenom][1])のネームサーバー設定の部分に、Route53で発行されるNS(NameServer)ドメインを登録します。**
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/60ba9090-3009-b3c4-6cd8-b18b1d28ee28.png)
次へ。

4. タグは管理のための物でしかないので、一旦何も記入せず。
TPOによって、設定ください〜
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/6ba5ee91-6ec3-990e-1aef-c69338623297.png)
確認。

5. 先ほど証明書を発行したいドメインが表示されていますね〜
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/02e4caf5-7045-c2dd-745f-32e1aa8c99df.png)
確定とリクエスト。


6. 進行中のリクエストと表示されて、証明書のリクエストがなされました。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/12d197be-fee0-19df-c264-a3ebea031df9.png)
※続行はリロードボタンみたいなもんです。


7. ドメインのドロップダウンを開いてみると、`詳細`を確認できる
「`Route53でのレコードの作成`」を押す
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/2d1f9713-9232-1f80-318d-938c7549b7e7.png)

8. ポップアップが表示されるので、`作成`を押す
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/ef89dd74-3474-c497-e7eb-be1368968659.png)

9. `Route53`にいくと、自動で`CNAME`が作成されていたああ！！(お見事)
※`NS`と`SOA`のタイプのレコードはホストゾーンを作成した時に自動で生成されるやつです。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/383a91e6-fd71-bfb6-a8ad-b9c3b578ded2.png)


#AWS CloudFrontのディストリビューション設定をする

1. `CloudFront`のディストリビューション設定ページはこんな感じです。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/021a9a80-89d6-296c-e170-dc91f7b5c41a.png)
「`Create Distribution`」を押す。


2.  とりあえず「`Get Started`」で開始
説明事項が書かれている。
内容としては、こんな時にDistribution作ってね って言う説明が書かれている。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/668f8701-65cd-08c1-532a-ccfc3ce07cb3.png)


3. ディストリビューション作成ページに
`Origin Domain Name`:先ほど作ったS3バケットを選択。
**※Origin IDは自動で入る。**
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/76476a3d-9edb-63da-179f-2bbe2c547699.png)
今回は、**`HTTPS Only`を選ぶ。(`Redirect HTTP to HTTPS`でもいいですね。)**
基本はデフォルト設定のままでOK。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/51390651-bab8-c34b-680e-2b7b708b0307.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/f47d1890-309d-b68d-fc37-9e14128a475b.png)
`Distribution Settings`で、
`Alternate Domain Names(Cnames)`にドメイン名`test-https-static-hosting.tk`を記入する。
`SSL Certificate`で`Custom SSL Certificate`を選び、先ほど`Certificate Manager`で作った証明書を選択する。
※ドロップダウンに出てきます。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/4a680a81-ce4e-eae8-eb5c-4c2d8ae4cc8a.png)
あとは、デフォルトのままの設定で「`Create Distribution`」を押す。
`Default Root Object`にサイトのページトップである`index.html`を設定する。
（`S3`にアップロードした`index.html`を指している。）
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/3ae2207c-2bd1-645b-e28e-aab2d78a9f38.png)

4. `CloudFront Distributions`の一覧に「`In Progress`」状態で作成される。
**ちょっと経つと「`Deployed`」状態になり、準備完了**になります。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/8917b28c-36e8-1189-011f-32a1a9df5e4a.png)

###Route53にCouldFrontのアドレスとAレコードで設定

1.  `CloudFront`で生成された「`Domain Name`」を使って、`Route53`に**Aレコードを作成**します。
ホストゾーンの一覧をみるとお分かりかと思いますが、作成すると一覧の一番上みたいに、Aレコードが作られます。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/6b21a685-c4de-53fd-d59b-db566989fb83.png)


2.  「レコードを作成」を押す。
`ルーティングポリシー`は**シンプルルーティング**
レコード名は空白でOKです。
`エイリアス`を**ON**にして
`レコートタイプ`を`A- Ipv4アドレスと一部の・・・`を選択
`トラフィック`のルーティング先を`S3ウェブサイトエンドポイントへのエイリアス`を指定
リージョンを適切に指定　※この例では、**アジアパシフィック東京**です。
**S3の対象のバケットを指定。**
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/5e8dc01f-760f-a158-58f6-1987538aa823.png)




###S３のアクセスポリシーを修正する

1. パブリックアクセスのブロック（バケット設定）を編集する
`新しいアクセスコントロールリスト（ACL）を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする`にチェック
`任意のアクセスコントロールリスト（ACL）を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする`にチェック
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/93360632-2eb4-2478-e1a5-8f29d418679e.png)


2. バケットポリシーにJSONでポリシーを定義
下記のキャプチャのように、バケットポリシーを**JSON形式で指定**します。
意味としては、最新のポリシー言語のバージョン` 2012-10-17`を使用して、記述しています。
ステートメントのIDは`1`。ID:XXXXXのCloudFrontが`test-https-static-hosting.tk`のS3バケットに対して、`Get`を許可するよ。
ということです。
※**ステートメントは複数記述することもある**ので、**識別子としてのID**があります
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/6a79465e-1304-6304-922a-17ee921e9f40.png)

3. `Principal`の`cloudfront ~~ XXXXX`の`XXXX`の部分に適切なIDを設定する。
その`ID`は、`Origin Access Identity`の箇所に記載されています。
![13-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/7917aebb-e484-e290-793c-d2bef8f114c8.png)


下記はJSONです。

```json
#バケットポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::test-https-static-hosting.tk/*"
        }
    ]
}
```


####<解説>
| 要素 | 説明 |
|:--|:--|
| Version | 使用するポリシー言語のバージョンを指定。<br>ベストプラクティスとして、最新の 2012-10-17 バージョン使用 |
| Statement | ポリシーのメイン要素。複数のステートメントを含められる。  |
| Sid | 複数のステートメントを区別するためのステートメント ID |
| Effect | Allow または Deny を使用してポリシーで付与または拒否するアクセス許可を指定 |
| Principal | アクセス許可/拒否するアカウント、ユーザー、ロール、またはフェデレーティッドユーザーを指定 |
| Action | ポリシーで許可または拒否するアクション |
| Resource | アクションが適用されるリソース |







#Ta-dah!！！！！（ジャジャーン！！！）
サイトが表示されました！！！！
![static-site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/11aaada7-85d1-e67d-90f2-70fd929a3df2.png)
いやあああ、頑張った甲斐がありました。
めちゃめちゃ勉強になったし、
**「たかが静的サイト、されど静的サイト」**
AWSのサービスを使い倒したような感覚です(｀・ω・´)

ちなみに、こちらの`js`を引用させていただきました。
参考ソース：[Github](https://github.com/ttencate/tis)

###試しに、直接S3バケットのURLにアクセスしてみる
S3バケットのURLhaこんな感じですねえ
`http://xxxxxxxxxxxx.s3-website-ap-region-1.amazonaws.com/`
![access_denied.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075243/a35279df-78ef-148d-9bf7-1d16a1e61a40.png)

ちゃんと`Access Denied`が表示されましたー！！
**つまり、CloudFront経由からじゃないとこのS3バケットにはアクセスできなくなった**ということですね

#まとめ：ハマったポイント
- s3のバケット名は、**ドメイン名**に
    - 通常は`www.example.com`と`example.com`の2つを用意したりして、`www`からリダイレクトさせるそうです。
- 「`パブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする`」を**オフにしないと、そもそもバケットポリシーを保存できなかった**
- `CloudFront`の`DefaultRootObject`に`index.html`と記載しないと`access denied`で怒られる
- `Alternate Domain Names (CNAMEs)`に、`test-https-static-hosting.tk` を設定しないといけない。（名前解決）
- `CloudFront`で証明書を使用する場合は、**必ず「米国東部（バージニア北部）」リージョンで証明書を登録する**
- ドメイン取得は[freenom][1], DNSサーバーは`Route53`という関係。つまり、[freeom][1]の**NameServer設定部分に登録する必要あり
- 証明書が`検証保留中`になり、あわてふためいたが、`15分`もすればに`発行済`になった。
- **ドメイン名の追加セクション**に「`*.test-https-static-hosting.tk`」と「`test-https-static-hosting.tk`」の２つを入れると便利
- `CNAME`には、**頭にアンダースコア付きのものを入れないといけない**(※**route53ならボタン１つ**)
    - 例) `Name: _8e9a64e3864xxxxxxxxxxxxxxxxxxxx.test-https-static-hosting.tk.`
    - 例) `Value: _3e8628f11a5adxxxxxxxxxxxxxxxxxxxxx.jfrzftwwjs.acm-validations.aws`
- **証明書なし**でCloudFrontディストリビューションを作ったときは、`SSL Certificate`で`custom`は選べなかったが、発行済になってからは、選択できるようになり、編集すると、再度`in progress`となって、更新がかかる



以上、
ありがとうございました！！