【AWS S3】静的ウェブサイトの設定方法

#はじめに
[Route53に登録されたカスタムドメインを使用した静的ウェブサイトの設定](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html)のサイトを元に、静的ウェブサイトを作成したい。（すでに作成したため、画像が一番はじめに作成したものと一部異なる場合がございますが、あらかじめご了承ください。）

#手順
##ドメイン購入
AWSでドメイン購入すると高いので（作成時点だと$9~だった）、基本的に1円〜購入可能であるお名前.comで購入する。取得方法は[こちら](https://tekito-style.me/columns/domain-onamae)。（サーバー購入はする必要なし。）

##バケット作成

ルートドメインバケットを今回は例として`hoge.work`とする。（実際は先ほど購入したドメイン名にして下さい。）
「S3」>「バケットを作成する」を選択。
<img width="1111" alt="スクリーンショット 2020-08-12 20.24.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/c8e20f8a-cdbd-6ad4-8f03-5de79eff8c96.png">
バケット名(`hoge.work`など先ほど購入したドメイン名に合わせると良い)を入力。
リージョンは日本に住んでいれば、「アジアパシフィック(東京)」を選択する。
後はデフォルトの設定のままで、作成を押す。
<img width="1075" alt="スクリーンショット 2020-08-12 20.26.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/2c990777-99ca-92e4-9be7-2cc7da860a9f.png">

##バケットの設定
先ほど作成したルートドメインバケットを選択する。
<img width="918" alt="スクリーンショット 2020-08-12 20.34.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/21e1aa5b-94a7-ebba-f13c-b6ef0bd3fc31.png">
「プロパティ」>「静的ホスティング」を選択。
<img width="1052" alt="スクリーンショット 2020-08-12 21.17.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/47c053da-2883-6746-c6d1-a058fbd31f1f.png">
「このバケットを使用してウェブサイトをホストする」を選択する。
インデックスドキュメント名`index.html`、エラードキュメント`error.html `と入力する。保存を選択する。
<img width="601" alt="スクリーンショット 2020-08-12 21.22.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/459f236a-59bf-3a22-919e-3de61b2c41b1.png">
##サーバーアクセスのログ記録を有効化
同じリージョンで、ログ記録用のバケットを作成。（名前の例：`logs.hoge.com`）(適宜自分の作成したドメイン名で変更する。一意でないとダメなので、すでに存在するようなら、一意になるような名前にする。)
<img width="1111" alt="スクリーンショット 2020-08-12 20.24.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/c8e20f8a-cdbd-6ad4-8f03-5de79eff8c96.png">
作成したバケットに入り「概要」>「フォルダの作成」でログファイル用のフォルダを作成。 (名前の例:`logs`）
<img width="1086" alt="スクリーンショット 2020-08-12 21.35.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/d2074a1f-14da-3d8b-2f23-05f1b5ac86c5.png">
ルートドメインバケットに入り、「プロパティ」>「Server access logging (サーバーアクセスのログ記録)」を選択。「ログの有効化」を選択する。ターゲットバケットで、下記項目を入力。
・ログファイル用に作成したバケット (`logs.example.com`など) 
・「ターゲットプレフィックス」 に、ログファイル用に作成したフォルダの名前に続けて区切り記号 (/) を入力(例:logs/)
「保存」を選択。
※ログは「概要」でみれる。
<img width="1055" alt="スクリーンショット 2020-08-12 21.41.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/ab9b0677-9c6c-898b-2154-24dd9a1b3ceb.png">
##アップロード
`index.html`を作成する。
ローカルのエディタで下記内容を入力し、`index.html`で保存する。（大文字ではなく。小文字で`index.html`とする。）

```
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>
```

「ルートドメインバケット」>「概要」>「アップロード」を選択。
<img width="1060" alt="スクリーンショット 2020-08-12 21.50.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/15e786d5-bc13-7758-5498-0b52791f4078.png">
先ほど作成した`index.html`を追加し、アップロードする。
<img width="1054" alt="スクリーンショット 2020-08-12 21.51.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/9d2d6371-37f8-7d0d-83be-9a6bcb3c9a81.png">
「ルートドメインバケット」のバケットを選択し、「パブリックアクセス設定を編集する」を選択する。
<img width="901" alt="スクリーンショット 2020-08-12 21.54.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/fcc139fd-fe9c-a8e4-4044-cf98221717ff.png">
「Block all public access (すべてのパブリックアクセスをブロックする)」のチェックをはずし、[保存] を選択。
<img width="1058" alt="スクリーンショット 2020-08-12 21.57.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/9e0094fb-1a65-d088-a789-351f1d8ea313.png">
`確認`を入力し、「確認」を選択する。
<img width="682" alt="スクリーンショット 2020-08-12 21.58.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/6304ab23-9b09-85d3-6be9-fbc9f2e73889.png">
「ルートドメインバケット」のバケットに入り、「アクセス権限」>「バケットポリシー」で以下のように入力する。
<img width="1033" alt="スクリーンショット 2020-08-12 21.59.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/4ad31a7f-4308-0484-e390-10ffeb33b18c.png">

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::hoge.work/*"
            ]
        }
    ]
}
```

`Resource`内の`example.work`は作成したバケット名に合わせる。
入力したら、「保存」を押す。

「プロパティ」>「静的ウェブサイトホスティング」で「エンドポイント」の横のURLを選択し、ブラウザに`index.html`ページが表示されれば、成功。
<img width="1052" alt="スクリーンショット 2020-08-12 21.17.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/47c053da-2883-6746-c6d1-a058fbd31f1f.png">
<img width="601" alt="スクリーンショット 2020-08-12 21.22.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/459f236a-59bf-3a22-919e-3de61b2c41b1.png">
<img width="481" alt="スクリーンショット 2020-08-12 22.07.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/8b82c830-78fd-ac28-a2e6-4edf8e691c16.png">

#エイリアスレコードを追加
「Route53」>「ホストゾーン」を選択。
<img width="1155" alt="スクリーンショット 2020-08-12 22.09.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/7a9a9830-bf14-9589-b05f-3dbf63804dcf.png">
「ホストゾーンの作成」を押し、「ドメイン名」で作成したドメインを入力。タイプは「パブリックホストゾーン」とする。「作成」を押す。
<img width="1136" alt="スクリーンショット 2020-08-12 22.10.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/ee46e42f-4efe-5ebe-9fba-d6c34cdaf1ca.png">
作成したドメインを選択し、「レコードセットの作成」を選択する。
下記の項目を確認・選択する。
名前　何も入力せず、そのままとする。

タイプ:「A – IPv4 アドレス」を選択。
エイリアス:「Yes」を選択。
エイリアス先:リストの「S3 website endpoints (S3 ウェブサイトエンドポイント)」セクションで、バケット名を選択。
ルーティングポリシー:デフォルト値の「Simple」をそのまま使用。
ターゲットの正常性の評価:デフォルト値の「No」をそのまま使用。

「作成」を選択する。
<img width="1136" alt="スクリーンショット 2020-08-12 22.10.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/6b9b4d57-c388-0042-e9b9-78e612bbd35e.png">

ネームサーバーがお名前.comのままになっているので、変更する。お名前.comのネームサーバの変更の仕方は[こちら](https://www.onamae.com/guide/p/67)
該当ドメインのNSレコードの値4つを「その他のネームサーバーを使う」に入力する。保存したら、変更されるまでしばらく待つ。

##ウェブサイトを確認
ブラウザで、URLを入力。ドメイン 例：`http://hoge.work`。
下記のように出れば成功。
<img width="481" alt="スクリーンショット 2020-08-12 22.07.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/8b82c830-78fd-ac28-a2e6-4edf8e691c16.png">