BppLOG

Berlin → Tokyo

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


ビットコイン取引高日本一の仮想通貨取引所 coincheck bitcoin


2019年1月1日より新元号になる、との報道がありました。

www.sankei.com

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


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

f:id:tky_bpp:20170114180552p: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]特定バケットに特定ディストリビューションのみからアクセスできるよう設定する | Developers.IO

作成した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を挟んでいるため、高いパフォーマンスが発揮でき、オリジンに負荷をかけることが無いから、だそうです。

おわりに

記事中に紹介したページ以外にも下記サイトも参考にさせていただきました。

新元号の発表が2019年1月1日の当日という報道もあるようなので、エンジニアとしては、新元号の行く末は継続して見守る必要がありますね。

togetter.com

カウントダウンと言えば、ジャニーズのライブが有名だったりしますが、
平成にちなんで名付けられた「Hey! Say! JUMP」はどうなってしまうのでしょうね。



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

f:id:tky_bpp:20170114180552p:plain:w300


『 Hey! Say! JUMP 』2017年カレンダー (講談社カレンダー)

『 Hey! Say! JUMP 』2017年カレンダー (講談社カレンダー)

Amazon Web Services完全ソリューションガイド

Amazon Web Services完全ソリューションガイド

Amazon Web Services実践入門 (WEB+DB PRESS plus)

Amazon Web Services実践入門 (WEB+DB PRESS plus)

Amazon Web Services パターン別構築・運用ガイド

Amazon Web Services パターン別構築・運用ガイド