Route53 + CloudFront + S3でHTTPSするよ!! その2

img

今回は、実際に各サービスで設定をしていこうと思います!

希望するドメインを取得した後、まずはレジストラ側(xdomain)での設定をしていきます。
「ご契約一覧」を表示し、ドメイン欄のドメインパネルをクリック

img


登録者情報を代理公開してもらうには、[whois情報]欄から設定変更をクリック
弊社(XSERVER Inc.)名義で代理公開するにチェックを入れると、代理公開してもらえます。

ネームサーバー情報は、AWS Route53の設定したときに設定することになります。
とりあえずスルー。

img

続いてAWSのRoute53の設定に移動しましょう。

ホストゾーンの作成をクリックし、取得したドメイン名を入力して「作成」ボタンをクリック

img


img

タイプNSのレコードにチェックを入れると、右側になにやらでてきます。
※エイリアスの値が4つくらい。

img

この赤枠部分の値を、下図のxdomainのネームサーバーに設定します。

その他のサービスで利用するにチェックをいれ、ネームサーバーをコピペ。

各値の末尾のドット(.)を削除しないと、設定時に怒られるので注意。

img


続いてS3にバケットを作成し、設定していきます。


img

「バケットを作成」するを選ぶとバケット名もろもろを入力する画面になりますので、
ドメイン名・リージョンを選んで「次へ」ボタンをクリック。

img

デフォルト暗号化にチェックをいれ、AES-256を選択し「次へ」をクリック

img

パブリックアクセスを全てブロックからチェックをはずし「次へ」をクリック

img

バケットができたら、チェックをいれバケット名をクリックしバケットの中に入ります。

img

アップロードボタンを押下するとバケットにいろいろアップロードできます。

img

タブからプロパティを選択し、Static website hostingをクリック。

img

インデックスドキュメントにindex.htmlを指定。

img

タブからアクセス権限を選択し、バケットポリシーを設定します。

img

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hogehoge.org/*"
        }
    ]
}

hogehoge.orgの場所を、あなたのドメイン名に変更てください。

※httpのままでいいっていう方は、このままRoute53に移動し、レコードセットの作成からAレコードを作成し、[エイリアス]設定で「はい」を選び、S3エンドポイントを選べばRoute53→S3で表示されるようになります。


私は意地でもhttpsにしたいので、AWS Certificate Manager(ACM)で証明書を取得します。

下の図では東京リージョンになっておりますが、東京リージョンでは利用できないのでバージニア北部(us-east-1)に変更しましょう。

再度ACMの設定を確認しにきた際に、なにも表示されないときがありますが、リージョンが東京のままになっていたりするので、バージニアに変更すれば確認できます。

ここでもう1つ注意があります。
間違えてプライベート認証にすすんでしまうと、月額400ドル払うことになります。
4ドルじゃないです400ドル(43,705 円 11/12現在)です!

img

img

自分のドメイン名を入力し次へ

img

DNS検証を選択し次へ

img

img

証明書のリクエスト
検証保留中になっているので、[Route53でのレコードの作成]をクリックしてしばらく待つと、ステータスが成功にかわり、Route53のホストゾーンに追加されます。

[使用中?]の項目が[いいえ]になっています。

img

img

img


次にCloudFrontの設定にいきます。

[Create Distribution]を押下し、[web distribution]で[Get Started]を押下

img

img

[Origin Domain Name]を選択すると、プルダウンで選択できるようになるので、先ほど作成したS3バケットを指定します。
指定すると[Origin ID]も自動で入力されます。

httpsに対応させるため、[Default Chache Behavior Settings]の[Protocol Policy]でRedirectを選択します。

img

上の図で[Object Chaching]でCustomizeを選ぶと、TTL欄が入力できるようになります。

このTTLはキャッシュの有効期限らしいです。

CloudFrontはCDNなので、世界中のエッジサーバーにコピーがたくさん作られます。
それらがキャッシュサーバーの役割をし、画像などのリソースの読み込み時間を短縮化し高速なレスポンスを実現しています。

そのキャッシュ時間を設定するのが先に紹介したTTLです。
なんの略なんですかね、Time To Lostかな・・・。Time To Liveでした。

CDNを利用している環境下で運用開発を平行して行う場合、開発更新する際にここをいじらないと更新が反映されるまで時間がかかるので要注意。

あとから変更できるのでこの項目はとりあえずスルーします。

[Compress Objects Automatically]はYesを選択しておきましょう。

img

[Alternate Domain Names]には、アクセスさせるドメイン名を入力し、[SSL Certificate]でCustom SSL Certificateを選択します。

ボックスをクリックするとプルダウン状態になるので、先ほど作ったACM証明書を選択。

img

ここでもう1つ注意

[Custom SSL Client Support]では、[Clients that Support Server Name Indication (SNI)]を選びましょう!
[Legacy Clients Support]を選んでしまうと、月額600ドル払うことになります。
6ドルじゃないです600ドル(65,534 円 11/12現在)です!

[Default Root Object]には、index.htmlを入力します。
ドメイン名のみのルートURL(例:https:example.com)でリクエストした際に返すドキュメントを指します。

img

そのまま下のほうにいき、[Create Distribution]を押下し、作成されるのを待ちます。


最後に、 Route53に移動し、レコードセットの作成からAレコードを作成し、[エイリアス]設定で「はい」を選び、CloudFrontディストリビューションを選べばRoute53→CloudFront→S3で表示されるようになります。

無料期間中のひと・・月の請求はこんな感じ。

S3は、アップロードは無料ですが、データ転送は無料枠を越えると従量課金が適用されます。

AWS 無料利用枠
AWS 無料利用枠の一環として、Amazon CloudFront を無料で使用開始していただけます。サインアップしていただくと、AWS の新規お客様は、50 GB のデータ送信 (アウト) と 2,000,000 件の HTTP および HTTPS リクエスト>を毎月 1 年間利用できます。

動画ファイルなどをたくさん転送すると、クラウド破産まっしぐらになってしまうので、youtubeなどのプラットフォームを使い、リンクを張るなど対応を考えましょう。

Route53 ホストゾーン1つにつき50円。
ACMは無料。

気をつけるのは、CloudFrontとS3の使用量です。
ひとまず1年間は猶予があるので、コスト面や保守面などいろいろ調べながらやっていこうと思います。

img



本日の豆知識

無料期間中のひと・・月の請求はこんな感じ。

「ひと」の上にある「・・」、これなんて言うか知ってますか?
そう、ルビじゃないんですねー
htmlではルビタグで表しますが、傍点というみたいです。

<ruby>ひと<rp>(</rp><rt>・・</rt><rp>)</rp></ruby>

こんな感じ、勉強になりました!