こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。
以前、CloudFront + S3を使って静的なWebホスティング環境を構築しました。
今回はRoute53とACM(AWS Certificate Manager)を使って、この環境を独自ドメイン化したいと思います。
※尚独自ドメインはお名前.comで取得しています。
環境イメージ
今回の構築イメージは以下となります。
ACMを使ってお名前.comから払い出したohtsuka-aws.xyzを認証する証明書を払い出します。それをRoute53に作成しているPublic Hosted Zoneに紐づけます。またCloudFront用の独自ドメインのAレコードを登録します。
ユーザは独自ドメインを使ってCloudFrontに接続することが出来るようになります。
環境構築
ACMでの証明書払い出し
ACMの管理画面に移動します。この時リージョンは必ず米国東部（バージニア北部）としてください。
CloudFrontをSSL化する時はこちらのリージョンであることがマストになります。
証明書をリクエストのボタンを押下します。
デフォルトでパブリック証明書をリクエストが選択されている状態かと思います。
このまま次に進みます。
ドメイン名のところにお名前.comで取得したドメインであるohtsuka-aws.xyzと*.ohtsuka-aws.xyzを入力します。アルゴリズムはDNSを選択します。
設定できましたらリクエストを押下します。
作成が完了しました。但しステータスが保留中の検証となっているかと思います。これを解消する為、ドメイン欄のRoute53にレコードを作成ボタンがありますのでこれを押下していきます。
先程登録した2つのドメインが自動で選択される状態で画面に表示されておりますので、そのままレコードを作成を押下します。
Route53のホストゾーンにCNAMEで登録されていることが確認できます。
ACMの管理画面でもステータスが発行済みになっていることを確認します。
CloudFront ディストリビューションを作成する
CloudFrontの管理画面に移動して新しいディストリビューションを作成します。
Origin DomainはS3のバケットを選択します。これは以前掲載した通りで問題ありません。
ビューワープロトコルポリシーはRedirect HTTP to HTTPSを選択します。
代替ドメインは、あとから作成するRoute53のAレコードと併せる必要があるので注意です。私は"https://s3.ohtsuka-aws.xyz"と入力したら、S3にデプロイしている静的Webサイトにアクセスしたいと思っているので、ここでもs3.ohtsuka-aws.xyzと記載をしております。
Custom SSL certificate 欄ではACMで払い出している証明書を指定します。
デフォルトルートオブジェクトにはindex.htmlと入力しておきます。
この状態でディストリビューションをデプロイします。
デプロイ直後の画面が以下となります。
Route53にAレコードを登録する
ホストゾーン画面を開いて、レコードを作成ボタンを押下します。
レコード名はs3.ohtsuka-aws.xyzとしました。
タイプはAレコードでOKです。
エイリアスを有効化してCloudFrontディストリビューションのエイリアスにして、先ほど作成したものを選択します。この状態でレコードを作成します。
※若干挙動が微妙でもしかするとディストリビューションのエイリアスを選択しても候補が表示されないことがあるかもしれません。その時は一旦レコード名を空白してみたあとに改めて確認するといいかもしれません。
レコード一覧に表示されていることを確認します。
接続確認
Aレコード登録後10分ほど待機すると登録したドメイン、今回はs3.ohtsuka-aws.xyzの名前解決が出来るようになり、Webブラウジングが可能となります。
実際にアクセスした図が以下となります。
S3に格納したindex.htmlやerror.htmlが表示されることが確認できると思います。
証明書の内容を確認するとCNに私の独自ドメインが表示されています。ACMで払い出した証明書が使われていますね。
ちなみに独自ドメインを使わないでディストリビューション名を使ってアクセスした際は以下のように表示されます。
【備忘録】私が確認したトラブル
忘れないようにするために、この環境を構築する前に確認したエラー内容を備忘録的な感じで雑に吐き出しておきたいと思います。
CloudFrontのディストリビューションの代替ドメイン名とRoute53のAレコードで内容が一致していないと10分経過しても以下のようなエラーが表示され、いつまでもアクセスできるようになりません。
このサイトは安全に接続できません
s3.ohtsuka-aws.xyz ではサポートされていないプロトコルが使用されています。
ERR_SSL_VERSION_OR_CIPHER_MISMATCH