S3バケットの静的WEBサイトホスティングを有効化しSorryページを配置する

[Route53の検証](https://qiita.com/tonkatsu_oishi/items/cded18d47108fb04961d#route53)を行う中で、Route53PrivateHostedZoneの加重ルーティングの設定を行いました。
Route53のHostedZoneでは、加重ルーティングとRoute53HealthCheckを組み合わせて利用することで、Active-ActiveのDNSフェイルオーバーの設定ができます。
加重ルーティングポリシーを利用してレコードを複数追加すると、リージョン間でのフェイルオーバーやサーバーが全台ダウンした場合のSorryページ表示などの設定を行うことができます。
[参考：ヘルスチェックと加重ルーティング](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/routing-policy-weighted.html#routing-policy-weighted-healthchecks)

Sorryページの配置先としては、S3バケットなどが利用できます。
今回は、S3バケットの静的WEBサイトホスティング機能を利用して、Sorryページを表示できるよう設定を行っていきます。

### 静的WEBサイトホスティングについて
S3バケットの静的ウェブサイトホスティングを有効化すると、S3バケット内のコンテンツに対してウェブサイトエンドポイントからアクセスできるようになります。
[参考:ウェブサイトエンドポイント](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html#custom-domain-s3-endpoint)
#### 設定上の注意点
##### バケットポリシーを設定する
S3バケットで静的WEBサイトホスティングを有効化すると、バケット内のデータがインターネット上に公開された状態となります。
そのため、検証目的などで利用する場合は、バケットポリシーなどを必ず設定し、コンテンツが意図しない範囲にまで公開されることを防止しましょう。

##### バケット名とドメイン名を一致させる
Route53のHostedZoneを利用すると、エイリアスレコードで静的WEBサイトホスティングを有効化したS3バケットを登録することができます。
エイリアスレコードとしてS3バケットを登録する場合には、Route53のレコードとS3のバケット名が一致している必要があります。
例えば、「acme.example.com」というドメイン名のエイリアスレコードとしてS3バケットを登録する場合は、S3バケットのバケット名も「acme.example.com」として作成する必要があります。

今回は、「web-test.https-demo.com」というドメイン名のエイリアスレコードとしてS3バケットを登録します。そのため、S3バケットのバケット名は「web-test.https-demo.com」として作成します。
[参考：Amazon S3 バケットでホストされているウェブサイトへのトラフィックのルーティング](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/RoutingToS3Bucket.html#routing-to-s3-bucket-prereqs)

### 構築
#### S3バケットの作成
まずはS3バケットを作成します。
マネジメントコンソールにログイン後、S3のサービス画面へ移動します。
左メニューから「汎用バケット」を押下し、「バケットを作成」を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/6c66cacd-ce05-68c9-32db-d1ec1ec5fbb6.png)

バケットの作成画面が表示されます。
「バケットタイプ」は「汎用」を設定します。
今回はドメイン名を「web-test.https-demo.com」としたいため、「バケット名」には「web-test.https-demo.com」を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/2158397b-7e34-6a71-4b45-4bf87a7057ed.png)

今回は静的WEBサイトホスティングを利用し、Sorryページを表示させることが目的です。
バケットポリシーで許可しているIPアドレスから接続が来た場合は、ユーザー問わずSorryページを表示させたいため、「オブジェクト所有者」のACLは「ACL無効」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/012ea15c-9671-523f-585e-91f826e9b80f.png)

バケットのブロックパブリックアクセス設定です。
今回は静的WEBサイトホスティングを有効化するため、「パブリックアクセスをすべてブロック」のチェックを外しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/11a2710f-e665-4570-b6e5-3beac17c79ff.png)

バケットのバージョニングは「無効にする」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/2f5f09fb-5478-d0bc-c1e7-ca81ddd50fd7.png)
暗号化タイプには「AmazonS3マネージドキーを使用したサーバー側の暗号化」を選択し、「バケットを作成」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/a78b3321-3a31-e92c-8878-6f1cf886d073.png)

バケットが正常に作成され、一覧に表示されることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/dda93cea-c2d2-e51f-73eb-e91ee8c4b631.png)

#### バケットポリシーの設定
バケットポリシーを設定します。
バケット一覧からバケット名のリンクを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/dda93cea-c2d2-e51f-73eb-e91ee8c4b631.png)

バケットの詳細画面が表示されたら、「アクセス許可」タブへ移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/59d12e59-2439-58f1-ad02-c9fec2dba6a4.png)

ページ真ん中あたりまでスクロールし、バケットポリシーのセクションまで移動します。
「編集」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/c413397c-6bca-967b-483e-8707eb0c6c99.png)

バケットポリシーの編集画面が表示されます。
ここに、バケットポリシーを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/6d53be66-abd6-67ba-8d8b-f1a1c8856a40.png)


今回は、指定したパブリックIPアドレスのみindex.htmlを表示できるようにバケットポリシーを設定します。
具体的なバケットポリシーは下記内容となります。
「グローバルIP」の部分には、バケットへのアクセスを許可したいグローバルIPを指定してください。

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "AllowPublicIpAccess",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::web-test.https-demo.com/index.html",
                "Condition": {
                    "IpAddress": {
                        "aws:SourceIp": [
                            "グローバルIP",
                            "グローバルIP",
                            "グローバルIP",
                            "グローバルIP"
                        ]
                    }
                }
            }
        ]
    }

[参考：特定の VPC エンドポイントまたは IP アドレスのみが Amazon S3 バケットにアクセスできるようにする方法を教えてください。(AWS re:post)](https://repost.aws/ja/knowledge-center/block-s3-traffic-vpc-ip)

バケットポリシーを入力したら、「変更の保存」を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/f295e58e-62c9-41fb-c424-5975e3ff2231.png)

画面上部に「バケットポリシーが正常に編集されました」と表示されることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/a78d09c1-32c1-eed3-d0a0-f72f4833ed8b.png)

#### 静的WEBサイトホスティングの有効化
静的WEBサイトホスティングを有効化します。
「プロパティ」タブを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/a7e6d04d-d917-a68a-cf5e-1a8f1109d4ae.png)
画面最下部までスクロールし、「静的ウェブサイトホスティング」のセクションまで移動します。
「編集」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/1e02101a-083d-da6f-0c5d-897675d9846b.png)

静的WEBサイトホスティングの設定画面が表示されます。
静的WEBサイトホスティングを「有効にする」を選択します。
「ホスティングタイプ」には「静的ウェブサイトをホストする」を選択します。
「インデックスドキュメント」にはindex.htmlと入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/55789ba3-ca23-0808-212e-200fcc9d7234.png)

エラードキュメント・リダイレクトルールは入力せず、「変更の保存」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/c27c7408-e99f-5d41-8958-d4c7e027c6a3.png)

プロパティの画面に戻ります。
「静的ウェブサイトホスティングが正常に編集されました」と表示されることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/ae22f929-f155-14a3-5ae1-a82ee27d61b2.png)

#### index.htmlのアップロード
動作確認のため、index.htmlを配置してウェブサイトエンドポイントにアクセスしてみます。
index.htmlというファイルを作成し、ファイルには下記内容を記入しておきます。

<details><summary>index.html</summary>

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WEB1 - Red Theme</title>
      <style>
        body {
          font-family: Arial, sans-serif;
          margin: 20px;
          background-color: lightpink;
          color: red;
        }
        h1 {
          color: darkred;
        }
        p {
          color: red;
        }
        a {
          color: crimson;
          text-decoration: none;
        }
        a:hover {
          text-decoration: underline;
        }
      </style>
    </head>
    <body>
      <h1>Sorryページ</h1>
      <p>Sorryページ</p>
      <p>東京・大阪のサーバーが全台応答不能なのでSorryページにつながりました。</p>
    </body>
    </html>


</details>

index.htmをS3バケットにアップロードします。
「オブジェクト」タブを押下し、「アップロード」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/c0fde2b8-7ea5-3781-d8fc-b32d43cd4465.png)
アップロード画面が表示されます。
先程作成したindex.htmlを画面内の枠線にドラッグアンドドロップします。
「ファイルとフォルダ」にindex.htmlが表示されていることを確認し、「アップロード」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/5929662a-0e34-53f5-26e4-f1d05033d748.png)
画面上部に「アップロードに成功しました」と表示されるまで待機します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/3b9093c7-39c3-8423-1f89-bac8f1323bfa.png)

#### 接続確認
Sorryページの表示確認を行います。
「プロパティ」タブを表示し、画面最下部までスクロールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/0c246954-5cc3-cf47-56b9-34424e0504db.png)

「静的ウェブサイトホスティング」のセクションまで移動し、「バケットウェブサイトエンドポイント」の部分に表示されているURLを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/af674f67-6a29-2278-cd71-39566fb5bd4c.png)

バケットポリシーで許可されているグローバルIPで接続した場合は、画像のようなSorryページが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/74a1fc77-7821-9a2a-c620-9d1ee02a8f38.png)

バケットポリシーで許可したグローバルIP以外を利用して接続した場合は、「403 Forbidden」が表示されることを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2237429/8e767785-cbf4-555d-10e3-1429e0daa63d.png)

今回ご紹介する手順は以上となります。
ここまでお読みいただきありがとうございました。