Amazon Cloud Front・Route53・ACMを使って静的ウェブサイトを独自ドメイン・HTTPS化してみた

こんにちわ、アイシーティーリンクの藤井です。
前回（Amazon S3を使って静的Webサイトを構築してみよう！）の続きになります。

前回はAmazon S3の静的ウェブサイトホスティング機能を利用して、テストページを構築しました。しかし、この静的ウェブサイトホスティングのエンドポイントURLは、今現在、HTTPS通信をサポートしておりません。※REST APIエンドポイントへのアクセスはHTTPSです

インターネット上において様々なセキュリティリスクが高まっている昨今、パブリックに公開するウェブサイトはHTTPSにするのが主流です。HTTPとHTTPSの違いについては下記URLもご参照ください。
参考：httpとhttpsの違いとは? 知っておきたいウェブセキュリティの常識と今後

そのため、今回は、S3の静的ウェブサイトをHTTPSでアクセスできるようにするのと、前回適当につけたバケット名 fujii-bucket-test がそのままエンドポイントのURLになっているので、独自で取得したドメインのURLになるように、Amazon Cloud Front、Route53、ACM（Amazon Certificate Maneger）を利用した静的ウェブサイトの独自ドメイン・HTTPS化を試してみたいと思います。以下のようなイメージになります。

参考：
Amazon CloudFront 概要
Amazon Route 53
AWS Certificate Managerを使って無料でSSL証明書を発行する

Cloud Front経由でS3にアクセスできるようにする

まずは、Cloud Front の Distributions から「Create distribution」をクリック。

下記のように設定。

Distribution が作成される。

Distribution domain name にあるドメイン名をコピーしてブラウザでアクセスしてみる。

Cloud Front経由でテストページが表示できた。

S3バケットへの直接アクセスを制限する

まずは、ブロックパブリックアクセスをオンにするため、S3 のバケット画面にある「アクセス許可」からブロックパブリックアクセスの「編集」クリック。

「パブリックアクセスをすべてブロック」にチェックを入れ「変更の保存」をクリック。

フィールドに確認と入力し「確認」をクリック。

続いて、S3のバケットポリシーを編集するため、バケットポリシーの「編集」をクリック。

以下のように編集し、「変更の保存」をクリック。

（変更後）

以上で、Cloud Front経由でバケットにアクセスするポリシー設定が完了。試しに、静的ウェブサイトホスティングのエンドポイントURLからアクセスすると拒否されました。

独自ドメインをRoute53に設定する

今回は、お名前.comで無料で取得したテスト用ドメイン nanjakorya.net をRoute53にDNS設定してみます。
まずは、Route53のホストゾーン画面から「ホストゾーンの作成」をクリック。

ドメイン名を入力し「ホストゾーンの作成」をクリック。

ホストゾーンが作成されます。最初は4つのNSレコードとSOAレコードのみ作成されます。

続いて、上記で作成されたNSレコードの情報をもとに、お名前.comのDNSに設定をおこないます。お名前.comのドメイン設定画面の「ネームサーバーの変更」をクリック。

次の画面で、ドメインにチェック、「その他」タブから「その他のネームサーバーを使う」を選択し、前述のRoute53で作成された4つのNSレコードを入力して「確認」をクリック。

確認画面が出るので「OK」をクリック。

ACMでSSL証明書を発行する

続いて、ACMでCloud Front用のSSL証明書を発行します。Cloud Front に紐づけるSSL証明書は、米国東部（バージニア北部）us-east-1リージョンのACMで作成された証明書である必要があるので、us-east-1リージョンのACM画面から「今すぐ始める」をクリック。
参考：CloudFront で SSL/TLS 証明書を使用するための要件

「パブリック証明書のリクエスト」を選択し「証明書のリクエスト」をクリック。

ドメイン名に取得したいSSL証明書のドメイン名を入力します。今回は「 *.nanjakorya.net 」のようにワイルドカードの証明書を発行する設定にして、「次へ」をクリック。

「DNSの検証」が選択されていることを確認し「次へ」をクリック。

タグは空欄で問題ないので「確認」をクリック。

ドメイン名と検証方法を確認して「確定とリクエスト」をクリック。

検証画面で「検証保留中」と表示されますので、ドメイン名の左にある小さな▼ボタンをクリックし「Route53でのレコードの設定」をクリック。

確認画面が出るので「作成」をクリック。

Route53でのレコード作成が「成功」し、しばらくすると検証状態も「成功」に変わるので「続行」をクリック。

これでSSL証明書の発行が完了しました。

Cloud FrontへSSL証明書を設定する

Cloud Front のDistributions画面から、今回作成したDistributionをクリック。

「General」タブにある「Edit」をクリック。

Alternate domain name(CNAME)の「Add item」をクリックします。今回はhttps://www.nanjakorya.net でアクセスできるように「www.nanjakorya.net」と入力します。Custom SSL certificateは、今回ACMで発行したSSL証明書を選択し、一番下にある「Save changes」をクリック。

今回設定した内容が反映されました。これでCloud FrontにSSL証明書を紐づけ出来ました。

Route53にCloud Frontのドメインを設定

さいごに、Cloud Front に設定したドメイン「www.nanjakorya.net」のAレコードを設定します。Route53→ホストゾーン画面からドメイン名をクリックして「レコードを作成」をクリック。

レコード名「www」、レコードタイプ「A」、トラフィックのルーティング先は「エイリアス」をオンにして「Cloud Frontディストリビューションへのエイリアス」を選択、今回作成したディストリビューション名を指定し「レコードを作成」をクリック。

Aレコードが作成されました。以上でRoute53でのCloud Frontドメイン設定は完了です。

独自ドメインでブラウザからアクセス

今回 Cloud Front に設定した独自ドメイン 「www.nanjakorya.net」でブラウザからHTTPSアクセスしてみます。

テストページを表示できました！

接続もちゃんと保護されてます！

さいごに

ちょっと長くなってしまいましたが、今回は、Amazon Cloud Front、Route53、ACMを利用して、S3静的ウェブサイトの独自ドメイン・HTTPS化を試してみました。他の方々がやっているサイトを参考にしながら見よう見まねでやってみましたが、裏側の仕組みを知ることができたり、はじめて触れるサービスもあったり、とてもいい経験になりました。今後は、テストページじゃなく中身のあるページにしていこうかと思います。それでは、また次回お会いしましょう。