最近、AWSを少し触っていて、Amazon S3の静的ホスティング機能を使ってWebサイトを作ってCognitoでログイン機能を付けてみたりして遊んでいたのですが、
これちょっと恥ずかしい！
Chromeだとわざわざ保護されていないことを晒上げてくれます！やったー！（笑）
でも、今時SSL化されてないWebページの方が珍しいですし、S3でホストしているWebサイトをhttps化(SSL化)してみることにしました。
はじめに
この記事では、AWS Certificate Manager(以下「ACM」)とAmazon CloudFrontを利用してSSL証明書を発行・設定して、https接続できるようにしてみます。
Amazon S3で静的ホスティングをしていて、Amazon Route 53で独自ドメインを管理してルーティングしている事を前提にしています。（説明のためにドメイン名はexample.comとして書いていきます。）
まずはACMでSSL証明書を発行する
・注意点
いきなりですが注意点です！
ACMで証明書を発行する前にAWSマネジメントコンソールの右上からリージョンを [米国東部 (バージニア北部)us-east-1] に変更してください！！
ACMで発行した証明書をCloudFrontで使用するには、 「米国東部 (バージニア北部)[us-east-1]」リージョンで証明書を発行する必要があるようです。
・実際に証明書を発行
AWSマネジメントコンソールで「Certificate Manager」を選択します。
・ACMが開いたら証明書のプロビジョニングの「今すぐ始める」をクリック
証明書のリクエストという画面になりますので、パブリック証明書のリクエストにチェックがついていることを確認して、証明書のリクエストをクリック。
・ドメイン名の追加でexample.comと*.example.comと入力して次へをクリック。
・DNSの検証にチェックが入っていることを確認して次へをクリック
タグを設定する方は設定していただいて、確定とリクエストをクリックします。
検証保留中になっていると思います。
次に、▶マークのドロップダウンボックスを選択して
「Route 53でのレコード作成」という青のボタンをクリックします。(両方のドメインでRoute 53のレコード作成を行ってください)
しばらくすると発行済みになるのでこれでSSL証明書の発行は完了です。
CloudFrontのディストリビューションに証明書を設定する
AWSマネジメントコンソールで「CloudFront」を選択します。
・「Distributions」タブの「Create Distribution」という青のボタンをクリック。
「Web」の「Get Started」をクリック。
・変更箇所のみ説明
以下は変更する欄のみを画像付きで説明しますので、説明していない欄はデフォルトで大丈夫です。
・「Origin Domain Name」欄をクリックするとプルダウンメニューがでるので、静的ホスティングに使っているエンドポイントのS3を選択。
・「Viewer Protocol Policy」欄の「Redirect HTTP to HTTPS」をチェック
ここにチェックを入れておくとhttpへ接続しようとしても自動的にhttpsにリダイレクトしてくれます。
筆者は最初やった時にチェックを忘れていて直すのにRoute 53をいじったりしてしまってまあまあ時間がかかりました（汗）
・「Alternate Domain Names(CNAMEs)」欄にドメイン名を入力。
・「SSL Certificate」欄の「Custom SSL Certificate(example.com):」欄にチェックをつけてACMで発行したSSL証明書を選択。
・最後に、「Default Root Object」欄にS3で静的ホスティングを有効にする際にインデックスドキュメントとして設定したファイル名を入力します。
設定直後は「Status」が「In Progress」ですが、しばらくすると「Deployed」に変わります。
これでCloudFrontに証明書を設定することが出来ました。
Route 53のレコードを設定
ここまで来たら最後に、S3に向いているRoute 53のルーティング先をCloudFrontへ変更するだけです。
まずは、AWSマネジメントコンソールで「Route 53」を選択します。
ホストゾーンタブをクリックしてドメイン名を選択します。
Aレコードにチェックボックスをつけて編集をクリック。
「値/トラフィックのルーティング先」欄を「CloudFrontディストリビューションへのエイリアス」「米国東部(バージニア北部)[us-east-1]」に変更し、ディストリビューションの選択から作成したディストリビューションを選択して「変更を保存」をクリックします。
これでACMで証明書を発行して、CloudFrontに設定、Route 53のルーティング先をCloudFrontに変更することができました！
動作確認
いざchromeにドメイン名を入力！
えいちてぃーてぃーぴーえす！！！！
ついにあの忌々しい「保護されていない通信」の表記とおさらばです！！
おわりに
S3で静的ホスティングしているサイトをhttps化(SSL化)してみましたが、意外と簡単にできちゃうんですね。
最近SAA(AWS認定ソリューションアーキテクトアソシエイト）を受けて無事合格できました。
その合格体験記とかもいずれ書ければなと思っています。