S3 + CloudFront + Route53 で独自ホスト名で静的ページを公開する

前書き

アフェリエイトなんかで稼ごうとしても独自ドメインじゃないとってことが多いですよね。 今回は静的ページ公開までやってみます

構成図

https 通信するために ACM で認証情報を使用します。S3に配置しているコンテンツをCloudFront 経由でアクセスできるようにします

静的ページ公開

まずは 静的コンテンツをブラウザで見れるようにしましょう

1. S3 に コンテンツを配置する
2. CloudFront の設定
   • とりあえず Webとして設定しましょう
   • Origin Domain Name に先ほど追加したS3バケット名を選びましょう。ほかの項目は一旦記載しなくてよいです
3. しばらくすると一覧に Enabled　として表示されるのでしばらく待ちます
4. CloudFront のアドレスで表示を確認する

赤枠のアドレスで表示できるのでしばらくしたのちに表示できるか確認しましょう

独自ドメインの取得と証明書の登録

1. Route53 でドメイン購入
   • ドメイン登録からほしいドメインを購入します
2. 証明書の登録
   • CloudFront の編集画面から ACM 登録画面に遷移します
   • ドメイン名を設定します。ひとまず「 www.購入ドメイン」でよいでしょう
   • 検証方法を DNS のままで進める
   • 発行がうまくいくと 「Route53 でのレコード作成」ボタンが出るので押下後、しばらく待機する

3. route53 の設定

独自ドメインで CloudFront にアクセスする設定

1. レコードを作成する
   • シンプルルーティング を選ぶ
   • ルーティング先に CloudFront ディストリビューションへのエイリアス を選ぶ
     • 一番最後のリソースは一度「シンプルなレコード定義」を押下すると出てくるようになる

SSL 接続設定

1. CloudFront の設定画面で Alternate Domain Names(CNAMEs) とSSL Certificate を設定する
2. 祝！作業終了

これにて独自ドメインで静的コンテンツを表示できるようになったはずです！