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

2019年5月1日より新元号になる、との正式報道がありました。
http://news.tbs.co.jp/newseye/tbs_newseye3234010.html

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

平成カウントダウン
https://heisei.today/

f:id:tky_bpp:20171208162520p:plain:w300

ただただカウントダウンするだけですが、最近では静的ページでもSSL化することが一般化しつつあるので、勉強がてらSSL対応のページをAWSをフル活用して作成してみました。

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

手順としては

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

となります。

S3に静的サイトを用意する

静的ページは、ここに書かれている手順で進めればセットアップできます。
docs.aws.amazon.com

手順は5ステップです。

ステップ 1: ドメインを作成する

ステップ 2: バケットを作成および設定し、データをアップロードする

ステップ 3: Amazon Route 53 ホストゾーンを作成、設定する

ステップ 4: DNS プロバイダを Amazon Route 53 に切り替える

ステップ 5: テストする

ステップ 1: ドメインを作成する

今回はお名前.comで作成しました。
Route53から作成もできるので好きなところで用意しましょう。

ステップ 2: バケットを作成および設定し、データをアップロードする

バケット名はアクセスする際のドメイン名と同じ設定にする必要があります。

バケット名：heisei.today

リージョン：Tokyo

としました。

次に、静的ファイルをバケット直下にアップロードします。
アップロードが完了すると、このバケットのオブジェクトに誰でもアクセスできるよう、アクセス許可を設定します。

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

ウェブサイトのホスティングを有効にし、インデックスページを設定します。

f:id:tky_bpp:20170114184106p:plain

ステップ 3: Amazon Route 53 ホストゾーンを作成、設定する

ホストゾーンを作成し、ネームサーバ情報をメモしておきます。

f:id:tky_bpp:20170114185300p:plain

作成したS3バケットに対応するエイリアスレコードを作成します。
Create Record Set からエイリアス(Aレコード)を作成します。
この時、Alias Target に、作成したS3のエンドポイントが表示されるのでそれを選択します。

f:id:tky_bpp:20170114185348p:plain

ステップ 4: DNS プロバイダを Amazon Route 53 に切り替える
私はお名前.comでドメインを取得したので、管理画面にログインし、ネームサーバを変更します。
さきほどメモしておいたネームサーバ情報を入力します。

f:id:tky_bpp:20170114190555p:plain

作成したドメインにアクセスし、アップロードしたファイルが表示できれば準備完了です。

http://heisei.today

SSL対応する

続いて、上記で公開したサイトをSSL化していきます。
ACM(AWS Cetificate Manager)でSSL証明書を発行し、それをCloudFrontを利用して紐付けます。
その後、Route53でS3のバケットを参照していたものを、CloudFrontを参照するよう変更します。
この手順に関しては、こちらの記事に詳細が書かれているので、この通りに進めます。

dev.classmethod.jp

これにて準備完了。

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

f:id:tky_bpp:20170114191727p:plain

むむ、Access Denied になってしまっています。

CloudFrontの設定を変更する

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

参考：[CloudFront + S3]特定バケットに特定ディストリビューションのみからアクセスできるよう設定する｜ DevelopersIO

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

f:id:tky_bpp:20170114192327p:plain

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

f:id:tky_bpp:20170114200109p:plain

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

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

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

f:id:tky_bpp:20170114200542p:plain

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

ちなみに、今回の S3 + CloudFront + Route53 という構成は、「AWSにおける静的コンテンツ配信パターンカタログ（アンチパターン含む）」で最高の構成であると紹介されています。
アクセスが急増しても、cloudFrontを挟んでいるため、高いパフォーマンスが発揮でき、オリジンに負荷をかけることが無いから、だそうです。