LoginSignup
3

More than 5 years have passed since last update.

AWS S3静的ウェブホスティング ~ HTTPS化 ~

Last updated at Posted at 2019-01-27

前回やってみた、S3静的ウェブホスティングにHTTPSでアクセスできるようにします。
簡単に出来るかと思いましたが、所々でつまずきました。

[つまづいた点]
1. SESの設定は不要 (Route 53でHosted Zone作成済みならDNS検証が使える)
2. ACMでの証明書発行は米国東部(バージニア北部)で行うこと
3. Cloud Frontのオリジンには、S3の静的ウェブホスティングのエンドポイントを設定する

[前回] AWS S3で独自ドメインの静的Webサイトを公開してみた

何のためにHTTPS化

HTTPだとメッセージが平文のまま通信されるのでセキュリティ的によろしくありません。
HTTPSではTTLで、サーバ認証→鍵交換→暗号化通信を行うため、HTTPに比べて安全です。
ユーザーが安全にWebサイト閲覧・通信するための仕組みです。

概要

AWSのサービスを使用して、サーバ証明書の発行からHTTPSの設定までを行います。

ネットワーク構成

使用するAWSサービス

ACM(AWS Certificate Manager)

AWSがサーバ証明書を発行してくれるサービス。プライベート認証局でなければ無料です。
ELBやCould Frontで使用することが可能です。

AWS Certificate Manager(SSL/TLS 証明書を無料で作成) | AWS

Cloud Front

ACMで発行した証明書を使えるようにするためだけに利用します。
配信を高速化するためのサービスで、S3の前段に設置するのが一般的なようです。

Amazon CloudFront(高速コンテンツ配信ネットワーク - CDN) | AWS

Route 53, S3

前回も使用したので割愛します。

手順

[0]ドメイン取得〜S3バケット作成まで

前回投稿をご参照ください。

[1]ACMで証明書発行

[1-1] リージョンの選択

米国東部(バージニア北部)を選択します。
他のリージョンでも証明書は発行できますが、Cloud Frontと紐づけることが出来るのは米国東部(バージニア北部)のみです。

[1-2] 証明書の発行

  • [パブリック証明書のリクエスト]を選択します。
  • ドメイン名に「s3-route53-test.ga」「*.s3-route53-test.ga」を追加します。
  • [DNSの検証]を選択します

※ 以前はEメールの検証のみだったため、SESによるメール受信が必要でしたが、今回は不要です。

1-2-1.証明書のリクエスト.png
1-2-2.ドメイン名の追加(モザイク).png
1-2-3.検証方法の選択.png
1-2-4.確認(モザイク).png

  • "検証保留中"になっていますが問題ありません。ドロップダウンを選択すると[Route 53でのレコードの作成]が表示されますので、Route 53との紐付けを行います。
  • 作成後、数分経つと"発行済み"に変わります。

1-2-5.Route53でのレコード作成1(モザイク).png
1-2-5.Route53でのレコード作成2(モザイク).png
1-2-6.発行済み(モザイク).png

[2]Cloud Frontの設定

[2-1] 配信メソッドの選択

  • 「Web」を選択します。

2-1.ディストリビューションの作成.png
2-2.配信メソッドの選択.png

[2-2] オリジンの設定

Origin Domain NameはS3の静的ウェブホスティングのエンドポイントを設定します。
入力候補で出てくるのは「s3-route53-test.ga.s3.amazonaws.com」の方ですが、
静的ウェブホスティングのエンドポイント「s3-route53-test.ga.s3-website-ap-northeast-1.amazonaws.com」の方を設定します。
そうしておかないと、いざWebサイトにアクセスした際に"Access Denied"になります。
詳細はこちらを参照ください。

Origin IDはオリジンを区別するためのIDです。今回はオリジンが1つだけですので自動入力されたものをそのまま使用しました。

2-3.ディストリビューションの設定1(モザイク).png

[2-3]ドメインと証明書の設定

  • Alternate Domain Namesに「s3-route53-test.ga」「www.s3-route53-test.ga」を入力します。
  • SSL Certificateで[Custom SSL Certificate)]を選択し、下の入力欄にてACMで作成した証明書を選択します。
  • 残りの項目はデフォルトのまま作成を完了します。 2-3.ディストリビューションの設定2(モザイク).png

[2-4]作成直後

Statusが"In Progress"になっています。
準備が終了すると"Deplyoed"になります。数十分かかりました。

2-4.作成直後(モザイク).png

[3]Route 53の設定

[3-1]レコードの登録

ドメインとCloudFrontの紐付けを行います。
「s3-route53-test.ga」「www.s3-route53-test.ga」へのアクセスを、Cloud Frontの方へ流すようにします。
前回はS3と直接紐付けていましたが、今回は間にCloud Frontが入ることになります。

  • Alias TargetにCloud Frontのドメイン名を入力します(自動候補が出てきます)
  • 「www.s3-route53-test.ga」も同様に設定します。

[4]動作確認

httpsでアクセスできることが確認できました。
証明書もAmazon発行のものが利用されていることを確認できました。
4-1.動作確認(モザイク).png

参考

無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた | DevelopersIO

備忘録

以降は、備忘のためのメモです。

SES(Amazon Simple Email Service)

メール送受信のサービスです。
ACMで証明書を発行する際にDNS検証が使えなかった頃はEメール検証のみでした。
確認メールが下記アドレスに送られるのですが、メールサーバを行っていないのと受信できません。
メールを受信できるように、SES(Amazon Simple Email Service)を使います。

  • administrator@ドメイン名
  • postmaster@ドメイン名
  • admin@ドメイン名
  • hostmaster@ドメイン名
  • webmaster@ドメイン名

Amazon SES(高信頼性で安価なEメールサービス - Amazon Simple Email Service)| AWS

手順は以下のサイトを参考にさせていただきました。
[ACM] SSL証明書発行時のドメイン認証メールをSESで受け取ってみた | DevelopersIO

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3