Route 53 + CloudFront + ACM + S3でCDN＆SSL付き静的サイト公開ハンズオン

このハンズオンを最後まで進めるとCDN付きhttps静的サイトが公開できます。
Route 53 + S3で静的サイトが公開できている前提として進めますので
まだの方は以下の記事を参考にしてみて下さい。
お名前ドットコム+AWS Route 53+S3でhttp静的サイト公開ハンズオン

CloudFrontを設定する

１．https://console.aws.amazon.com/cloudfront/v3/home#/welcome ←を開きます。
２．[Create a CloudFront distribution]をクリックします。以下書かれていない項目はデフォルトでOKですので飛ばしてお進み下さい。
３．Origin domainにS3のエンドポイント（ドメイン名で作ったバケットが候補で出てくるはずですがない場合はS3バケットを確認してなければ作成して下さい。参考：S3バケットの作成）を入力します。
４．S3 bucket accessで[Yes use OAI][Yes,update the bucket policy]にチェックを入れ[Create new OAI]ボタンをクリックします。するとOrigin access identityに作られたOAIが設定されます。ここで何をやっているかの詳細はcloudfrontの設定項目
５．Viewer protocol policyで[Redirect HTTP to HTTPS]を選択
６．Alternate domain nameの[Add item]を押して[*.example.com]と入力します。
７．[Request certificate]のリンクをクリックします。ここで一度ACMの設定に移ります。

ACMの設定

８．ACMの管理画面が開きます。
９．ドメイン名に[*.example.com]と入力し[次へボタン]を押します。
１０．DNSの検証にチェックを入れます。
１１．後から管理しやすいタグと値を追加します。ここではタグ名に[Installation location]。値に[CloudFront]としてこの証明書がCloudFrontで使われていることがわかるようにします。入力したら[確認ボタン]を押します。
１２．設定した内容の確認を求められますので正しかったら[確認とリクエストボタン]を押します。
１３．ドメイン名の横の▶をクリックすると[Route 53でのレコードの作成]というボタンが表示されるのでクリックし小ウィンドウの[作成]ボタンを押します。これを押すことでSSL更新用時確認用のCNAMEレコードを設定してくれます。
１４．少ウィンドウが消えたら最後に[続行]ボタンを押します。管理画面上の状況が[発行済み]検証状態が[成功]と緑の文字で表示されたら設定完了です。※場合によってはここまでの手順を終えた後３０分くらい待つ必要があるかもしれません。
１５．CloudFrontの管理画面に戻ってCustom SSL certificateのプルダウンを開くと前述の証明書が出てくるので選択します。出てこない場合は矢印が円になった[再読み込みボタン]を押します。
※ブラウザの再読み込みボタンではないのでご注意下さい。ブラウザの再読み込みを押すとここまでの設定が消えてしまいます。
１６．Default root objectに[index.html]と入力します。これはルートにアクセスがあった際に返すファイルを指定しています。もしS3にroot.htmlなどとしてファイルを置いている場合はそれを指定します。
１７．Standard loggingでCloudFrontのログファイルをS３に保存することができます。ログを取りたい場合はS3でバケットを一つ作成しS3 bucketの欄に設定しましょう。ここではwww.example.comのバケットを選択しLog Prefixで[CloudFrontLogs]というディレクトリを作ってCookie loggingを[on]に設定して保存するようにしました。
１８．最後に[Create distribution]を押します。

S3の設定を変更

ここからはCloudFront経由でのみアクセスを許可しS3のエンドポイントには直接アクセスができないように設定します。
１．ブロックパブリックアクセスを確認します。[パブリックアクセスをすべてブロック]にチェックを入れ[変更の保存]を押します。
２．バケットポリシーの[編集]を押します。Statementの中を確認していただいて以下のようにポリシーが一つだけの状態にします。つまりarn:aws:iam::cloudfront:user/CloudFrontを持っている波括弧だけ残します。これは前述の手順4で自動生成されたものです。もう一つ波括弧があるとすればCloudFrontを挟む前の状態でS3でウェブサイトホスティングを設定していたときのものが残っているのでこの手順ではそれを削除しています。

s3.yaml

{
    "Version": "2012-10-17",
    "Id": "Policyxxxxxxxxxxx",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity xxxxxxxxxxxxxx"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example.com/*"
        }
    ]
}

Route53設定

１．Route53の管理画面にログインします。
２．レコード名がwww.example.comのAタイプのものにチェックを入れ[編集]を押します。
３．トラフィックのルーティング先を[CloudFrontディストリビューションへのエイリアス]を選択します。
４．ここで一旦CloudFrontの管理画面を開きます。ディストリビューションのIDをクリックします。するとディストリビューションドメイン名というものが表示されるのでコピーします。
５．Route 53のトラフィックのルーティング先のところにある入力欄（ディストリビューションを選択とグレーアウトで表示されている）にペーストし[保存ボタン]を押します。

これで設定は完了です。
https://www.example.com
にアクセスしてみてS3のindex.htmlが表示されれば成功です。

今回はCDNの導入、HTTPSの導入＆HTTPのリダイレクト設定を行いました。またS3のパブリック・アクセスをさせない設定を行ったことで一つセキュリティレベルも上げられより実践的なサイト公開ができるようになりました。ユースケースとしてTVなどの強力な認知度アップ施策で大量にアクセスが予想されるキャンペーンサイトやブランディングサイトなどはある程度のアクセス量までなら使えるのではないでしょうか。またCDNによってサイト表示の速度も上がると思いますしデータ通信量も減ると思います。

注意

htmlファイルを編集しても反映されない場合はCloudFrontのキャッシュ削除を参考にCloudFrontサーバ内のキャッシュを削除し、合わせてブラウザ側のキャッシュも削除して試してみて下さい。

参考情報

お名前ドットコム+AWS Route 53+S3でhttp静的サイト公開ハンズオン
Amazon S3 からすでにコンテンツを配信しているときに CloudFront を追加する
Amazon S3 と CloudFront を使用して、別の URI パスまたは HTTP から HTTPS にリダイレクトする
cloudfrontの設定項目