新元号までのカウントダウンページを作ってみた(S3 + CloudFront + Route53 + ACM:SSL対応)

2019年1月1日より新元号になる、との報道がありました。
[新元号は平成３１年元日から　皇室会議を経て閣議決定へ　法案提出は今年５月連休明け](http://www.sankei.com/politics/news/170110/plt1701100002-n1.html)

平成元年生まれの私としては、非常にインパクトのあるニュースです。
そこで、名残惜しい平成との別れを見守るため、新元号までのカウントダウンページを作ってみました。

<b>平成カウントダウン</b>
[https://heisei.today/](https://heisei.today/)

最近では静的ページでもSSL化することが一般化しつつあるので、
勉強がてらSSL対応のページをAWSをフル活用して作成してみました。
(AWSの各サービスを初めて利用したので、設定に誤り等あればご指摘ください。)

今回は **S3 + CloudFront + Route53 + ACM(AWS Cetificate Manager)** を利用しています。

手順としては

- S3に静的サイトを用意する
- 独自ドメインで公開する
- SSL対応させる
- リダイレクト設定しておく

です。

# S3に静的サイトを用意する
まずはこちらに記載されている手順に従って、静的サイトを作成していきます。
[独自ドメインを使用して静的ウェブサイトをセットアップする - Amazon Simple Storage Service](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html)

# SSL対応させる
静的サイトが用意できれば、今度はSSL対応化していきます。
ACM(AWS Cetificate Manager)でSSL証明書を発行し、それをCloudFrontを利用して紐付けます。
その後、Route53でS3のバケットを参照していたものを、CloudFrontを参照するよう変更します。
この手順に関しては、こちらの記事に詳細が書かれているので、この通りに進めます。
[AWS Certificate Manager 無料のサーバ証明書でCloudFrontをHTTPS化してみた](http://dev.classmethod.jp/cloud/aws/acm-cloudfront-ssl/)

これにて準備完了。

それではSSL化したページ( https://heisei.today )にアクセスしてみましょう。

![678340605_Screen Shot 2015-10-09 at 9.32.26 PM.png](https://qiita-image-store.s3.amazonaws.com/0/1689/364a80a6-8403-8224-72a6-79ffe5611c4b.png)
むむ、```Access Denied``` になってしまっています。
どうやらまだ設定することがあるようです。

# CloudFrontの設定変更

S3バケットに対して、CloudFrontからのアクセスのみ受け付けるように設定していきます。

[[CloudFront + S3]特定バケットに特定ディストリビューションのみからアクセスできるよう設定する](http://dev.classmethod.jp/cloud/aws/cloudfront-s3-origin-access-identity/)

作成したCloudFrontのディストリビューションの設定を変更します。
<b>Restric Bucket Access</b> が No になっていたので、こちらを Yes に変更します。

<img width="747" alt="ss 2017-01-14 19.21.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/1689/e4494c0a-9130-29e1-db50-f048aed2bc8c.png">


設定の反映には最大15分ほど時間がかかるようです。
反映されているかどうか、S3のバケットポリシーを確認します。

<img width="603" alt="ss 2017-01-14 18.30.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/1689/d39320e5-e97e-4648-eaf1-b9599b3e2d1f.png">


CloudFrontのオリジンアクセスアイデンティティ設定が付与されていれば設定完了です。

ついでに、リダイレクト設定もしておきます。

HTTPでアクセスされた時に、HTTPSにリダイレクトするよう設定変更します。
CloudFrontのディストリビューションを開き、Behaviosrのタブを選択します。
そして、```Viewer Protocol Policy```を```Redirect HTTP to HTTPS```にして保存すれば完了です。

<img width="676" alt="ss 2017-01-14 20.05.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/1689/5efd3a2a-0db6-5d7b-fdab-a0876419278a.png">

これで http://heisei.today にアクセスした時に、https://heisei.today にリダイレクトされていればOKです。

ちなみに、今回の <b>S3 + CloudFront + Route53</b> という構成は、[AWSにおける静的コンテンツ配信パターンカタログ（アンチパターン含む）](http://dev.classmethod.jp/cloud/aws/static-contents-delivery-patterns/)で最高の構成であると紹介されています。
アクセスが急増しても、cloudFrontを挟んでいるため、高いパフォーマンスが発揮でき、オリジンに負荷をかけることが無いから、だそうです。

# おわりに

新元号の発表が、2019年1月1日の当日であったり半年前であったりと、さまざまな情報が飛び交っているようなので、エンジニアとしては、新元号の行く末は継続して見守る必要がありますね。
[新元号は2019年1月1日の当日発表！→SEたちの悲痛な叫びが集っている「年明けからシステム屋さんが死ぬ未来しか見えない」 - Togetter](https://togetter.com/li/1069043)
[１９年元日に新天皇即位、元号は半年前までに - 読売新聞](http://www.yomiuri.co.jp/politics/20170110-OYT1T50130.html)

こちらの記事を参考にさせていただきました。

- [S3+CloudFront+ACM(AWS Certificate Manager)でHTTPS静的サイトを作ってみた](http://qiita.com/toshihirock/items/914f408cd565b66fe9f9)
- [CloudFrontでS3のウェブサイトをSSL化する](http://qiita.com/jasbulilit/items/73d70a01a5d3b520450f)
- [爆速でランディングページを公開する（S3×CloudFront×Route53×ACM）](http://qiita.com/uti/items/a890bca96319ecb4543e)