Help us understand the problem. What is going on with this article?

S3で静的ホスティングしているWebサイトをHTTPS化する

最近、AWSを少し触っていて、Amazon S3の静的ホスティング機能を使ってWebサイトを作ってCognitoでログイン機能を付けてみたりして遊んでいたのですが、
sakuzyo.png

これちょっと恥ずかしい!

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] に変更してください!!
image0.png

ACMで発行した証明書をCloudFrontで使用するには、 「米国東部 (バージニア北部)[us-east-1]」リージョンで証明書を発行する必要があるようです。

・実際に証明書を発行

AWSマネジメントコンソールで「Certificate Manager」を選択します。

・ACMが開いたら証明書のプロビジョニングの「今すぐ始める」をクリック
51a3bc7a2c584d1474d374c6c9bb892c.png

証明書のリクエストという画面になりますので、パブリック証明書のリクエストにチェックがついていることを確認して、証明書のリクエストをクリック。



・ドメイン名の追加でexample.comと*.example.comと入力して次へをクリック。
fb67b95880bfaa94b1c68f3e15be957f.png


・DNSの検証にチェックが入っていることを確認して次へをクリック
c3ad0225e187053f89d157aff6bdee13.png
タグを設定する方は設定していただいて、確定とリクエストをクリックします。



検証保留中になっていると思います。
Inkede84d2784f5c3ada575e6caa33e85f8e4_LI.jpg
次に、▶マークのドロップダウンボックスを選択して
「Route 53でのレコード作成」という青のボタンをクリックします。(両方のドメインでRoute 53のレコード作成を行ってください)
Inked4c4fccc1c0fd3027380aac62c147486b_LI.jpg

しばらくすると発行済みになるのでこれでSSL証明書の発行は完了です。
発光完了_LI.jpg

CloudFrontのディストリビューションに証明書を設定する

AWSマネジメントコンソールで「CloudFront」を選択します。


・「Distributions」タブの「Create Distribution」という青のボタンをクリック。
cf1.png

cf2.png
「Web」の「Get Started」をクリック。

・変更箇所のみ説明

以下は変更する欄のみを画像付きで説明しますので、説明していない欄はデフォルトで大丈夫です。



・「Origin Domain Name」欄をクリックするとプルダウンメニューがでるので、静的ホスティングに使っているエンドポイントのS3を選択。
Inkedcf設定2_LI.jpg

・「Viewer Protocol Policy」欄の「Redirect HTTP to HTTPS」をチェック
redirect-http-to-https.png
ここにチェックを入れておくとhttpへ接続しようとしても自動的にhttpsにリダイレクトしてくれます。
筆者は最初やった時にチェックを忘れていて直すのにRoute 53をいじったりしてしまってまあまあ時間がかかりました(汗)





・「Alternate Domain Names(CNAMEs)」欄にドメイン名を入力。
cf設定変更点.png



・「SSL Certificate」欄の「Custom SSL Certificate(example.com):」欄にチェックをつけてACMで発行したSSL証明書を選択。
Inked設定4_LI.jpg




・最後に、「Default Root Object」欄にS3で静的ホスティングを有効にする際にインデックスドキュメントとして設定したファイル名を入力します。
設定3.png


設定直後は「Status」が「In Progress」ですが、しばらくすると「Deployed」に変わります。
Inked5adc451b8d07ed627c41e75798d02fbd_LI.jpg
Inked3882116b8b3819c82c6df4d476a41331_LI.jpg

これでCloudFrontに証明書を設定することが出来ました。

Route 53のレコードを設定

ここまで来たら最後に、S3に向いているRoute 53のルーティング先をCloudFrontへ変更するだけです。

まずは、AWSマネジメントコンソールで「Route 53」を選択します。
ホストゾーンタブをクリックしてドメイン名を選択します。

Inked092d91522bceec9d3dc652da1fb3d1c0_LI.jpg
Aレコードにチェックボックスをつけて編集をクリック。


Inkedf33255cd2a707dc5cfd4870f269e71e9_LI.jpg
「値/トラフィックのルーティング先」欄を「CloudFrontディストリビューションへのエイリアス」「米国東部(バージニア北部)[us-east-1]」に変更し、ディストリビューションの選択から作成したディストリビューションを選択して「変更を保存」をクリックします。


これでACMで証明書を発行して、CloudFrontに設定、Route 53のルーティング先をCloudFrontに変更することができました!

動作確認

いざchromeにドメイン名を入力!
最後.jpg
えいちてぃーてぃーぴーえす!!!!
ついにあの忌々しい「保護されていない通信」の表記とおさらばです!!

おわりに

S3で静的ホスティングしているサイトをhttps化(SSL化)してみましたが、意外と簡単にできちゃうんですね。

最近SAA(AWS認定ソリューションアーキテクトアソシエイト)を受けて無事合格できました。
その合格体験記とかもいずれ書ければなと思っています。

SraSora
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away