Route53でドメイン購入

登録済みドメイン > ドメインの登録
ドメイン名： sample-mypage.com で購入&登録

Certificate Manager(ACM) でSSL証明書発行

httpsにする場合、SSL証明書が必要なので、今回はACMで発行します。

※CloudFrontでACMで取得した証明書を利用する場合、
米国東部 (バージニア北部) us-east-1 で取得しないといけません。

CloudFrontとACM連携でハマった話。

証明書のリクエスト > パブリック証明書のリクエスト を選択
ドメイン名の追加で*.sample-mypage.comと入力
検証方法の選択でDNSの検証を選択
CNAME レコードを作成を要求されますが、ここでは続行をクリック
以下の画面が表示されるので、Route53でのレコードの作成

発行済み、になれば成功です。

S3バケットの作成

バケット名：sample.mypage.com

各項目を以下のように設定します。

項目	内容
ブロックパブリックアクセス	全てのチェックボックスを外す
CROS設定	以下のように設定

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Cloud Frontの作成

Create Distribution > WebのGet Started をクリック
以下のように設定して作成

項目	内容
Origin Domain Name	sample.mypage.com (先ほど作成したS3バケットを選択)
Restrict Bucket Access	Yes
Origin Access Identity	Create a New Identity
Grant Read Permissions on Bucket	Yes, Update Bucket Policy
Viewer Protocol Policy	Redirect HTTP to HTTPS
Compress Objects Automatically	Yes
Alternate Domain Names	sample-mypage.com
SSL Certificate	Custom SSL Certificate を選択し、 *.sample-mypage.com(先ほど作成したSSL証明書)を選択
Default Root Object	/index.html

作成したDistributionをクリックすると、詳細が確認できます。

Generalタブを選択し、Editをクリック
Alternate Domain Names (CNAMEs) に www.sample-mypage.com と設定

また、SPAサイトを作成する場合、以下の設定をします。

Error Pageタブを選択し、Create Custom Error Responseをクリック
HTTP Error Code の 403, 404で、それぞれ以下のように設定して作成

項目	内容
Customize Error Response	Yes
Response Page Path	/index.html
HTTP Response Code	200:OK

Route53でエイリアスを作成

ホストゾーン > sample-mypage.com(購入したドメイン名)　> レコードセットの登録
以下のように設定して作成

項目	内容
名前	www.sample-mypage.com
タイプ	A-IPv4アドレス
エイリアス	はい
エイリアス先	xxx.cloudfront.net

※エイリアス先はCloud Frontで確認

ドメインの反映にはしばらく時間がかかります。

S3バケットにindex.htmlをアップロードし、https://www.sample-mypage.comにアクセスすると、静的サイトが表示されるのが確認できます。