Web制作小物ツールは自宅サーバーで運用していたんだけど、パスワードジェネレータとかあることを考えると SSL にしたいなぁと思っていて、折角だから一度やって見たかった S3 + CloudFront + 独自ドメイン SSL (AWS Certificate Manager) (+ 一部機能に Amazon API Gateway) にしてみました。
以下、作業のメモです。
S3 + 独自ドメインでホスティングするまで
下記の公式ページが参考になりました。
例: 独自ドメインを使用して静的ウェブサイトをセットアップする – Amazon Simple Storage Service
ドメインはバリュードメインで管理していて、 DNS は Amazon Route 53 を使わずにバリュードメインの DNS を使いたいので、バリュードメイン側で下記のように設定をしました。
cname webtools {バケット名}.s3-website-ap-northeast-1.amazonaws.com.ここまでで、 S3 + 独自ドメインでの運用ができるようになりました。
AWS Certificate Manager + Amazon CloudFront
AWS Certificate Manager と Amazon CloudFront の設定は下記サイトが詳しいです。
[ACM] AWS Certificate Manager 無料のサーバ証明書でCloudFrontをHTTPS化してみた ｜ Developers.IO
今回は http へのアクセスは https へリダイレクトさせたいので「Redirect HTTP to HTTPS」を選択しました。
また、「Origin Domain Name」には S3 の Static website hosting のエンドポイント（「{バケット名}.s3-website-ap-northeast-1.amazonaws.com」）を入力し、「Alternate Domain Names
(CNAMEs)」には CNAME を入力し、「Price Class」は「Use All Edge Locations」を選択し、「Default Root Object」は「index.html」を指定しました。それ以外は基本、初期値を利用しました。
注意点としては、 AWS Certificate Manager は「米国東部 (バージニア北部)」で作成しないと Amazon CloudFront では使えないので注意。（私は初め「アジアパシフィック (東京)」で作ってしまって、ちょっとハマった。）
もう一つ注意点としては、「Origin Domain Name」を「{バケット名}.s3.amazonaws.com」ではなく「{バケット名}.s3-website-ap-northeast-1.amazonaws.com」としないと https://webtools.dounokouno.com/dummytext/ のような URL で https://webtools.dounokouno.com/dummytext/index.html を表示してくれないので注意。（私はこれで約1日、 https://webtools.dounokouno.com/dummytext/ でアクセスできなくなりました…。）
参考: CloudFront に S3 bucket のサブディレクトリパスのコンテンツを参照させる – Qiita
再度、バリュードメインの設定
「S3 + 独自ドメイン」でバリュードメインの設定をしちゃったので、ここで再度、 DNS の設定を変更します。設定内容は下記の通り。
cname webtools {ランダムな英数字}.cloudfront.net.（ここで末尾の . を入れてなくて一時的にサイトをダウンさせちゃった…orz）
AWS の利用料金はいくらになるか
現在、無料枠の期間内なので、正確な料金はわからない気がします。
とりあえず、来月の一ヶ月が無料枠で収まるかはここに追記したいと思います。
2017年4月2日 追記
今日確認したら、3月の利用料は無料でした。
それぞれのサービスの利用状況を見ると、すべて無料枠内で収まっているようです。
ちなみに、 Web制作小物ツールの2017年3月のセッション数は「9,020」、ページビュー数は「10,231」でした。
また来年の今頃に、無料枠がなくなったタイミングで利用料金がいくらになるか確認をしたいと思います。
追記ここまで。
2018年5月1日 追記
今日確認したら、4月の利用料は1.51ドルでした。日本円で約166円。うん、安いです。
料金の内訳は下記の通り。
ちなみに、 Web制作小物ツールの2018年4月のセッション数は「9,710」、ページビュー数は「11,060」でした。
追記ここまで。
Web制作小物ツールの対応ブラウザの変更
今回のサーバー移転にあわせて、コードもいくつか修正しました。
まず、 jQuery を v3 にアップデートした関係で、 IE 8 以下はサポート対象外になりました。
また、一部機能で Ajax の CORS (Cross-Origin Resource Sharing) を利用するようになったので、 IE 10 以下はサポート対象外になりました。
参考: CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 ｜ Developers.IO
CORS のほうは、 jQuery プラグインを使えば IE 8 、 IE 9 にも対応できるようですが、Web制作小物ツールの利用者に IE 9 以下のユーザーは少ないので、サポートしなくてもいいかなと判断をしました。
上記はWeb制作小物ツールの直近30日のアクセスの、 Internet Explorer のバージョン毎の内訳。 86% 以上が IE11 。
まとめ
静的サイトなら S3 で十分ですし、 CloudFront を使えば独自ドメイン SSL の認証書が無料なのがうれしいです。
自宅サーバー + 安価な SSL 認証書の場合と、 S3 + CloudFront の構成の場合のどちらが安いかは、 AWS の無料枠が終わった段階で見極めたいと思います。