Amazon LightsailとAmazon CloudFrontを使ってSSL対応【#np2020】

前回の記事でAmazon Lightsailを設定しサイトを設置しました。

Amazon Lightsailを準備して静的サイトをデプロイする（Apache2.4+PHP7）【#np2020】 | mutter

今回はそれをSSL対応にしていこうという話です。超リーズナブルに。

コスト感

CloudFrontのコスト感の難しさは、コストが転送量に依って決まるという点。アクセス数が大きいサイトの場合には、割高になる可能性もあります。ただこのサイトのアクセス数はとても少なく、データ転送量（アウト）はピーク時で200kbpsぐらい。仮にその状態がずっと続いたとして1ヶ月の転送量は64.8GBになります。

200kb * 60 * 60 * 24 * 30 / 8 = 518.4Gb = 64.8GB

実際にはその半分にも満たないので30GBぐらいかな。

東京リージョンの場合CloudFrontの利用料金は1GBあたり$0.114なので、1ヶ月の利用料は$3.42（約380円）ということになります。年額では約4,500円。さくらで買った安いSSLは1年間で972円/年ですが、これサブドメイン含めドメイン1つだけの値段なので、サブドメインを使うとその数だけ買わないといけない。ところが、今回の方法で利用する「Certificate Manager」はマルチドメインでも無料です。

サブドメイン全部ひっくるめて複数ドメイン設定して月380円で済むなら安いなあ……しかももちろん、本来のCDNとしての機能もきちんと動いた上で。これは絶対お得です。

LightsailにSSL適用するには2つの方法があります

今回はCDN（CloudFront）を利用しましたが、SSLはロードバランサにインストールすることも出来ます。Lightsailには専用のロードバランサがあるのでそれを利用しても良いのですが、若干高いんですよね。月額$15。

AWSでWebサイトをHTTPS化その8：Lightsail(+証明書)編 | ナレコムAWSレシピ

ロードバランサとしては格安ですけどもともとのLightsailが格安のサービスなので、ここで無料のSSLをインストールするためだけに$15払うのはちょっと割に合わないかなと。負荷軽減のためにロードバランサを使うという人もいるかも知れませんが、負荷が大きい場合にはLightsailからEC2に移行することも出来るようになっているのでそっちの方がいいかな。

[速報] Amazon Lightsail が EC2 に移行できるようになりました！ #reinvent ｜ DevelopersIO

というわけで今回は、CloudFrontを使っています。

基本的な流れ

基本的な流れはこちらの記事に沿って行います。

AmazonのVPSサービス(Lightsail)を使い、独自ドメイン・SSL対応したWordPressを構築($3.50〜/月) ｜ DevelopersIO

記事上部に掲載した概念図もこの記事のものを参考に作り直したものです。記事はWordpressを対象にCDNの機能も持たせているのでいろいろと設定していますが、今回はCDNの機能は控えめでSSLのインストール対象としてCloudFrontを使うだけなので、設定はとてもシンプルになります。具体的には、

├ css/
├ image/
├ js/
└ index.html

となっているサイトのcss/image/jsだけキャッシュして、それ以外はスルーする感じで。つまりCloudFrontを主にSSL証明書のインストール場所として使うということですね。キャッシュの機能は必要ない（むしろキャッシュ無しでダイレクトに反応して欲しい）。キャッシュせずにCloudFrontを使う方法はこちらの記事が参考になります。

AWS CloudFrontで極力キャッシュさせたくない時の話 – Qiita
キャッシュさせないCloudFrontディストリビューションを設定してみた（CloudFormationテンプレート付）｜ DevelopersIO

簡単に言うと、キャッシュ関連のTTLを0秒（または1秒）にすることで、キャッシュ無しで後ろに配置されたリソースを配信するという感じでしょうか。例えば上の「css/image/jsだけキャッシュ」を実現するためには、デフォルトの設定をキャッシュなしに設定しておいて、その上でcss/image/jsディレクトリに対して別途キャッシュする設定を行えばOK。

実際どう動作しているかは、こちらのサイトをいろいろ検証してみてください。

The Weller's Club

Google Chromeの検証パネルを表示してチェックしてみると、画像についてはCDNのキャッシュが「Hit」となっているのに対し、ページファイルである「index.html」は「Miss」となっているのがわかると思います。これはすなわち、画像ファイルはキャッシュを返しているけれど、ページファイルはオリジナルのデータを返してるよ、ということです。画像なんて滅多に更新しないのでこれで十分ですね。SSLにも対応出来たし言うこと無し。