こんにちは、hidesanです。
今回は、以前ご紹介したS3の静的Webサイトに、CloudFrontを組み合わせ、WebサイトをSSL化する方法をご紹介致します。
昨今ではHTTPS通信できるWebサイトが当たり前となりました。
前回こちらの記事でご紹介したS3の静的Webサイトだけでは、残念ながらSSL化はできない、つまりHTTPS通信できないんですね。
※まだご覧になっていない方は↓こちらをどうぞ！
しかし、CloudFrontを使うことでSSL化できてしまうということなんです。
ぜひこの方法を使ってWebサイトを簡単に安く構築してみてください。
CloudFrontとは？
そもそも、CloudFrontとは何？ということからご説明したいと思います。
一言でいうとCloudFrontとは、
世界中にあるAWSのコンテンツ配信用サーバー(エッジロケーションとも言います)を使って、効率よくWebサイト等のコンテンツを端末に届けるAWSのサービスです。
CloudFrontを使うメリット
上記でもお伝えしたように、CloudFrontは効率よくコンテンツをクライアントに届けることができるサービスです。
そのため以下のようなメリットがあります。
- Webサイトのネットワーク遅延が少なくすむ（特に海外からのアクセス）
- 多くのアクセスが集中しても遅延が少なくすむ
さらに、S3をWebサイトとして使う場合、CloudFrontを組み合わせることで「SSL化できる」というメリットもあるのです。
S3静的WebサイトにCloudFrontをあてる方法
では、静的Webサイト化したS3をもとに、CloudFrontを組み合わせる方法をご紹介したいと思います。
※S3を静的Webサイト化する方法はこちらの記事をご参照ください
(1) まずは静的Webサイト化したS3のエンドポイントURLをどこかに書き留めておきます。
※下図の場合、赤枠で囲んだ部分です。
(2) CloudFrontコンソールへ移動します
(3) [Create Distribution]ボタンをクリックします
(4) Web側の[Get Started]ボタンをクリックします
(5) Create DistributionにてOrigin Domain Name欄へ先ほど書き留めたエンドポイントを入力します。
ただし、“http://”は除き、以降の文字列を入力してください。
(例)
× http://hidesan-web-test.s3-website-ap-northeast-1.amazonaws.com
○ hidesan-web-test.s3-website-ap-northeast-1.amazonaws.com
※Origin Domain Name欄を入力すると自動的に[Origin ID]欄も補完されます
(6) ページの一番下にある[Create Distribution]ボタンをクリックします
(7) CloudFrontが作成されますので、[Domain Name]を書き留めましょう。
下図ですと、”d2p4t4n9m3zxes.cloudfront.net”となります。
(8) ブラウザで書き留めたDomain Nameにhttpsでアクセスできるか確認します。
問題なくHTTPSで表示されましたね。
※URLの左側に鍵マークがついているのでHTTPSでアクセスできているということです
まとめ
いかがでしたでしょうか？
今回は静的Webサイト化したS3にCloudFrontを組み合わせ、SSL化する方法をご紹介しました。
今回の方法では、URLは「XXXX.cloudfront.net」というものになりますが、
Route53等のDNSサービスを使うことで独自ドメインで運用することも可能です。
その方法はまた後日記事にアップしたいと思いますのでお楽しみにしていてくださいね。
以上、hidesanでした！