はじめに

今更ながら、以下の構成で静的Webサイトを構築しました。

基本的にはすんなり進んだのですが、S3に対するオリジンアクセスを制限するときに、若干躓きましたねー。
あと、間違ってS3のリダイレクトをONにして、リダイレクトをやめたくなり、バケットを消しても、新しいバケットでもリダイレクトが止まらない現象が起こり、それも躓いたポイントでした。

ひとまず詳細を自分用メモも兼ねて記述していきます。（何度か作ったことある構成なのに・・・）

内容

一から構築の流れを記述して、躓いたときの内容を書きますので、躓きだけ見たい方は「躓いた話」まで飛ばしてください。

【構築の流れ】

1. ドメインの取得

ドメインは各々適当に取得する感じで。
自分は、freenom使って取得しました。そこまでの手順は以下を参考にという感じで。

2. Route53でネームサーバ設定

「1. ドメインの取得」で取得したいドメインをRoute53のホストゾーンで作成し、そこで生成されたNSレコードを「1. ドメインの取得」のNameserverで登録。

2-1. コンソール検索から「Route53」を選択

2-2. 「ホストゾーンの作成」

取得したいドメインを入力して作成

2-3. 生成されたNSレコードを各社ドメイン取得サービスで登録

freenomで言うところの

で書かれているnameserverに4つ登録すればいけます。

3. S3の準備

3-1. コンソール検索から「S3」を選択

3-2. 「バケットを作成する」を選択

3-3. 作成したバケットを選択し、公開するファイルをアップロード#（index.html）

3-4. 「アクセス権限」→「パブリックアクセス設定の編集」→「パブリックアクセスをすべてブロック」をオフ

WAFを導入するとこれをする必要なくなるが、今はひとまず設定

3-5. 「アクセス権限」→「バケットポリシー」を追加

「example.com」はバケット名

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

3-6. 「プロパティ」→「Static website hosting」→「このバケットを使用してウェブサイトをホストする」にチェックでindex.htmlやらerror.htmlやら記述

別にerror.htmlを実際に配置しなくてもいける

3-7. 「エンドポイント」のURLからアクセスできるか確認する

4. WAFでアクセス制限

4-1. コンソール検索から「WAF」を選択

後は、以下を参考にしながら入力

リンク先だとデザインが古いので、

4-2. 自分はひとまず、ルールとかの作成は無視して「Web ACLs」だけ作った形に

4-3. 「IP sets」でアクセスを許可したいIPを入力して、ルールを作成

4-4. 作った「Web ACLs」のルールに追加

・「Rules」タブから「Add rules」を選択して、「Add my own rules and rule group」を選択
・「IP set」を選択して、「5-3」で作成したルールを適応し、ひとまずそのままで「Add rule」
・そのあと「Default web ACL action for requests that don't match any rules」で「Block」に変更する

5. CloudFront設定

5-1. コンソール検索から「CloudFront」を選択

5-2. 「Create Distribution」でWebの「Get Start」を選択

後は、以下を参考にしながら入力

5-3. 状態が「Enabled」まで待機（スクワットしながら待て）

6. ACMでSSL化設定

6-1. コンソール検索から「Certificate Manager」を選択

6-2. リージョンを「米国東部 (バージニア北部)」に変更

6-3. 「証明書のリクエスト」→「パブリック証明書のリクエスト」を選択、作成したドメインを入力して、DNS認証を選択

6-4. 「Route53でのレコードの作成」をクリックし、CNAMEレコードを自動追加する

6-5. 状態が「発行済み」になるまで待機（コーヒーを飲みながらまて）

自分はここでずっと発行済みにならなく、何度か作りなおした。

7. S3再度設定

S3側でアクセス制限でブロックするのをすべて解放していたので、すべてブロックに変更

8. IP制限されているか確認

接続しているIPを変更したりして、うまく言っていることを確認

【躓いたこと】

1. S3のリダイレクトを変更した際に躓いたこと（S3リダイレクト機能はブラウザに依存しているところがあるかもしれない）

・S3でリダイレクトをONにした状態で、Aレコードを登録しようとした際に、うまくいかず
・S3リダイレクトを消して、バケットも消して一からやろうとした
・再度違う名前でバケットを作った
・S3リダイレクトをOFFの状態で静的ホスティングをONにした
・S3のURLにアクセス
・なぜかリダイレクトされる

ここで謎で、考えていた際に、理由はわからないが、Google Chrome以外のブラウザだったらどんな挙動になるんだろうと思い調査。

すると、見事にリダイレクトせずに遷移してくれた。

どうやら、このS3のリダイレクトブラウザのキャッシュに依存しているところがあるみたいで注意が必要です。

調べても出てこないので、たまたま見つけました。

2. CloudFrontの「Origin Domain Name」にS3のWebホスティングのエンドポイントのカスタムオリジンに指定したままにしてると、「Restrict Bucket Access」が設定できないので、S3オリジンを指定するべき（S3のアクセス制限をかけたければ）

タイトル通り、CloudFrontの「Origin Domain Name」にS3のWebホスティングのエンドポイントのカスタムオリジンに指定して、一旦CloudFrontを作成して、後程S3へのアクセス制限をかけたいとなった時

・変更設定項目に、「Restrict Bucket Access」がない・・・
もう一度「CloudFront Distributions」を作り直す
・「Origin Domain Name」をクリックした際に出てくるS3バケットを選択
・すると「Restrict Bucket Access」が出てきた

ということで、S3のアクセス制限をかけたければ、CloudFrontの「Origin Domain Name」は、「S3のWebホスティングのエンドポイントのカスタムオリジン」ではなく「S3オリジン」を指定するべきです。

所感

知っている人からしたら、当たり前だろという感じかもしれませんが、S3のリダイレクト機能がブラウザに依存しているとか知りませんでしたし、CloudFrontの「Origin Domain Name」に「S3のWebホスティングのエンドポイントのカスタムオリジン」を指定するとS3のアクセス制限ができないのだ、と初めて知りました。

まだまだですね・・・自分。何度か作ったことある構成なのに、知らないことばかりです。