AWS S3 で静的サイトを公開する(SSL化まで)

使うサービス
* S3
* AWS　Certificate Manager（以下ACM)
* CloudFront
* Route53
* ドメインレジストラ（ドメイン管理会社のこと。今回はお名前.com）

静的なサイトならこれらだけでSSL化まで出来る

## 独自ドメインを取得し，Route53に設定
今回は私がお名前ドットコムで取得した"suamagaumai.com"というドメインを使う
手順通りで大丈夫なのでここの説明は省略

Route53に新規でホストゾーンを作成し，
NSレコードをお名前.comのネームサーバーに登録してあげる

![スクリーンショット 2022-03-10 18.44.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/618bf21d-4111-8ec2-c54f-9961ada711b0.png)
↓
![スクリーンショット 2022-03-10 18.44.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/999a5abb-4c6d-9d4d-42ad-7660d8d0821e.png)


## S3でバケットを作成
※バケット名は，独自ドメインの名前にすること

下記の画像の通り設定し，バケットを作成

![スクリーンショット 2022-03-10 18.47.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/b4a44a52-c165-2df4-0ab6-f92bcee7b30b.png)

![スクリーンショット 2022-03-10 18.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/4a442689-440b-019c-4be3-0017e0af21fa.png)
![スクリーンショット 2022-03-10 18.56.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/74daae66-3aaa-a9ed-de0f-b58504a8a3c6.png)

![スクリーンショット 2022-03-10 18.56.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/5dcfe05a-c1f4-b02c-bf2f-2090d4a32a7f.png)

作成したバケットにアクセスし，"アクセス許可"タブからバケットポリシーを編集
下記のように設定する

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::{バケット名}/*"
            ]
        }
    ]
}
```
なので，私の場合は，下記の通り
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::suamagaumai.com/*"
            ]
        }
    ]
}
```

その後用意したindex.htmlをアップロードする

![スクリーンショット 2022-03-10 21.03.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/14493c60-90f4-fa22-1517-21c8f108fb99.png)

今回はこのようなHTMLファイルを用意しました

![スクリーンショット 2022-03-10 21.03.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/05b4bc11-24ff-307d-cc53-a246d2909a87.png)


設定が完了していれば，プロパティタブの最下部のここのURLで，アップロードしたHTMLファイルが見れるようになる


## SSL証明書の取得
HTTPS化するため，SSLの証明書を取得する
ACMで、証明書をリクエスト
※必ず米国東部 (バージニア北部)　us-east-1　で取得する

![スクリーンショット 2022-03-10 20.19.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/f845700c-6a2f-9a86-f4c9-3a9b27081d73.png)

パブリック証明書を作成→

![スクリーンショット 2022-03-10 20.22.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/ce33ee7f-dd28-e272-ee01-1c6e731020c1.png)

発行した証明書にアクセスすると保留中となっているので，これをRoute53で解決
CNAMEの値を，レコードに追加

![スクリーンショット 2022-03-10 20.23.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/e4346efa-80a5-fa80-8d49-3ad1032fe0e0.png)

![スクリーンショット 2022-03-10 20.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/f85bca14-6108-4aef-f567-9fea4b6328d5.png)

しばらく（私の場合は5分くらい）すると"保留中の検証"から"発行済み"に変わる
これでSSL証明書は取得完了

## CloudFrontの設定
CloudFrontにアクセスし，ディストリビューションを作成

![スクリーンショット 2022-03-10 20.38.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/70fb4e59-428e-0f7b-ca41-1abd68e1d666.png)
このオリジンドメインをクリックすると，サジェストでS3のバケットが出てくるが，これは選択せず，

![スクリーンショット 2022-03-10 19.03.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/89e6e90c-24d4-9b8a-2c2b-392e11cdeefe.png)
S3のここのエンドポイントを貼付！

HTTPにアクセスされた際，HTTPSにリダイレクトするよう下記の通り設定
![スクリーンショット 2022-03-10 20.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/e3019e3a-8127-6ba6-3fdc-f1100d221fab.png)

"代替ドメイン名"にドメイン名，
"カスタムSSL証明書"に先ほど取得したACMの証明書を設定

![スクリーンショット 2022-03-10 20.45.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/039ede0e-7c2f-6df3-f023-9df41f78609e.png)

その他の箇所はデフォルトの設定で。

## Route53でCloudFrontのディストリビューションを設定
Route53に戻って，Aレコードを追加する

![スクリーンショット 2022-03-10 20.57.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/3464afaa-9dee-286b-30a0-50835ad72bbb.png)

ここでの注意は，値の箇所はエイリアスをオンにして，
CloudFrontディストリビューションを設定すること

![スクリーンショット 2022-03-10 20.57.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/26c2055c-1162-d279-1dbc-e94829bd59e3.png)


![スクリーンショット 2022-03-10 21.00.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869250/2d06ae5c-7ce3-624d-c174-3ce4538988ed.png)

ドメイン名でアクセスできるようになりました

Route53でのCloudFrontのディストリビューションの設定は反映までに結構時間かかります10分以上かかりました