はじめに
この記事は、Amazon S3で作成した静的サイトを、お名前.com で取得した独自ドメインで公開し、無料で HTTPS 化する方法をご紹介します。
なぜ、HTTPS化で必要な SSL/TLS 証明書が無料で使用できるかというと、AWS Certificate Manager(ACS)で発行した SSL/TLS 証明書は、CloudFront などの ACM 組み込みのサービスで使用する場合は、追加料金なしで使用できるからです。
ACM 組み込みサービスに対する無料のプライベートパブリック証明書
AWS Certificate Manager では、 Elastic Load Balancing や API Gateway などの ACM 組み込みのサービス と共に使うパブリックまたはプライベート SSL/TLS 証明書のプロビジョニングには、追加料金はかかりません。
Amazon S3 で作成した静的サイトを独自ドメインで運用するには、CloudFront という CDN サービスを利用する必要があるため、無料で HTTPS サイトを作成できる訳ですね。
Amazon S3 の静的サイトを作成
まず、Amazon S3 でバケットを作成します。
バケット名は世界でユニークである必要があります。
また、公開するドメイン名とバケット名は一致している必要があります（サブドメイン含む）。
ここでは仮に、www.example.com というドメイン名で東京リージョンにバケットを作成します。
作成が完了したら、バケットのプロパティから「Static website hosting」を有効にします。インデックスドキュメントは「index.html」とします。
バケットポリシーエディタで、以下のように設定して保存します。www.example.com の部分は、ご自身のドメイン(サブドメイン含む、以降同様)に変更してください。
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"AddPerm",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::www.example.com/*"
]
}
]
}
以下の内容で index.htmlを作成しバケットにアップロードします。
<html> <body> <h1>Hello, world!</h1> </body> </html>
設定が済んだら、S3バケットの URL にアクセスして動作確認します。
ここでは問題なく表示されました。
Route 53 にドメインを登録する
Route 53 の管理画面から、DNS manangement で独自ドメインを登録します。
「Create Hosted Zone」から、以下の設定でゾーンを作成します。
- Domain Name : www.example.com
- Comment : 任意
- Type : Public Hosted Zone
すると、Type が NS の以下のレコードが表示されるのでこれをコピーします（人によって異なる）。
ns-588.awsdns-09.net. ns-1331.awsdns-38.org. ns-1705.awsdns-21.co.uk. ns-341.awsdns-42.com.
お名前.com で DNS の設定
お名前.com にログインして、ネームサーバーの変更＞他のネームサーバーを使用から www.example.com の DSN サーバーを上記のものに変更して保存します（末尾のドットは不要）。
反映には若干時間がかかります。
nslookup コマンドで以下のように応答が返ってくればお名前.comでの設定は完了です。
$ nslookup www.example.com Server: 192.168.11.1 Address: 192.168.11.1#53 Non-authoritative answer: Name: [ドメイン名] Address: [IP アドレス]
S3 の Web サイトを CloudFront に登録
CloudFront の管理画面から「Web」を選択して「Get Started」から設定を行います。
「Origin Setteings」の「Origin Domain Name」で HTTPS 化したい S3 バケットを選択します。すると「Origin ID」が自動設定されます。
「Default Cache Behavior Settings」の「Viewer Protocol Policy」で、今回は HTTP のアクセスを HTTPS にリダイレクトしたいので、「Redirect HTTP to HTTPS」を選択します。
「Distribution Settings」の「Alternate Domain Names(CNAMEs)」に使用したいドメイン名（サブドメイン含む）、ここでは「www.example.com」を設定します。
また、「Default Root Object」には、S3 の「インデックスドキュメント」と同じ、「index.html」を設定します。
設定を保存すると、しばらく時間がかかります。
Status が Deployed になったら、この作業は終了です。
ここで CloudFront のドメイン名 (xxxxx.cloudfront.net)を控えておきます。
Route 53 に CloudFront の設定を反映させる
Route 53 の管理画面の Hosted Zoneから、CloudFront に登録したドメイン名(xxxxx.cloudfront.net)をAレコードとして登録します。
Aレコードがあれば編集を、なければ新規レコード追加で、Aレコードに以下の内容で登録します。
- Name : www.example.com
- Type : A - IPv4 address
- Alias : Yes
- Alias Target : xxxxx.cloudfront.net (控えておいた CloudFront のドメイン名を指定)
これでブラウザで URL にアクセスすると、SSL/TLS 証明書の警告は表示されますが、サイトを表示することができるようになります。
SES の設定を行う
ACM で SSL/TLS 証明書を発行する際に、認証のために独自ドメインのメールアドレスにメールが送信されるため、SES (Simple Email Service)でメールを受信できるようにします。
SES の管理画面にアクセスすると、東京リージョンがないためバージニア北部リージョンで作業を行います。
Domains >> Verify a New Domain から Domain に www.example.com を入力します。DKIM のチェックもつけておきます。
「Use Route 53」をクリックし、Email Receiving Record にチェックを入れ、「Create Reacord Sets」をクリックします。
MX レコードが登録されるかと思いきや、登録されないので Route 53 で以下の MX レコードを追加します。
- Name : www.example.com
- Type : MX
- Value : 10 inbound-smtp.us-east-1.amazonaws.com
「Verification Status」と「DKIM Status」が「verified」になったら使用可能になっているので、今度はメールの受信設定を行います。
Email Receiveing > Rule Sets から「Create a Recipe Rule」をクリックします。
Recipient で www.example.com を入力して「Add Recipient」をクリックします。
Add action で S3 を選択し、S3 bucket で Create S3 Bucket を選択して、mail.example.com など世界で重複のない名前をつけて action を追加します。
ここで自分のメールから admin@www.example.com にメールを送信すると、設定が正しければ先ほど作成した S3 のバケットにメールが保存されています。
ACM で SSL/TLS 証明書を作成する
この作業は、必ず「米国東部（バージニア北部）」リージョンで行うよう注意してください。
ACM の管理画面にアクセスし、証明書のプロビジョニングで「今すぐ始める」をクリックします。
「パブリック証明書のリクエスト」を選択している状態で、「証明書のリクエスト」をクリックします。
ドメイン名に www.example.com を入力して、「Eメールの検証」を選択し「確認」、「確認とリクエスト」をクリックします。
以下のメールアドレスに確認メールが送信されるので、S3 のバケット確認し、メールのリンクをブラウザでして承認します。
- webmaster@www.example.com
- admin@www.example.com
- postmaster@www.example.com
- hostmaster@www.example.com
- proxy@whoisprotectservice.com
- administrator@www.example.com
すると、ドメインの検証状態が「成功」に変わるので、CloudFront の設定を行います。
CloudFront に SSL/TLS 証明書 の設定を行う
CloudFront の管理画面にアクセスし、先ほど登録した設定を開き、General タブにある「Edit」をクリックします。
Custom SSL Certificate を選択し、テキストボックスで www.example.com の証明書を選択して登録します。
ブラウザで www.example.com にアクセスすると、正しく証明書が設定されていることが分かります。
おわりに
設定には時間がかかるものの、無料で静的サイトが HTTPS化できるというのはうれしいですね。
SPA(Single Page Application)などでも使えるので、活用シーンは広がりそうです。
