まえがき

本記事では、Amazon S3, Route53, CloudFront を利用して SSL化した LP をホスティングする方法についてご紹介します。
実際に、最近この方法で LP を公開したので、備忘録も兼ねて以下に大まかな流れを記載します。

⓪ AWS の利用

・まず、AWS にて、アカウントを作成します。
・アカウント情報, 連絡先情報, お支払い情報を登録して、SMS等でのアカウント認証を行います。
・その後、サポートプランの選択を済ませれば、アカウント作成完了。AWSコンソールにログインできる様になります。

① S3 に LP をデプロイする

・まず、サービスのストレージから S3 を選択します。
・S3 にて、バケットを作成するを選択し、バケット名(プロジェクト名, ドメイン名等)、
リージョン(アジアパシフィック(東京)) を入力します。
・作成したバケットに LP のディレクトリをデプロイします。
・アクセス権限からブロックパブリックアクセスをオフにします。
・プロパティから Static website hosting のウェブサイトをホストするを選択し、
インデックスドキュメントを設定します。
・エンドポイント (http://[バケット名].s3-website-[region].amazonaws.com/~) からアクセスできればデプロイ完了です。

② Route53 にてネームサーバーの設定を行う

・まず、サービスのネットワーキングとコンテンツ配信から Route53 を選択します。
・ホストゾーンから、ホストゾーンの作成を選択し、ドメイン名を入力します。
・作成したホストゾーンの NSレコードに割り当てられた、 4つのネームサーバーをコピーします。
・ドメインを取得したサイトの管理画面から、対象ドメインのネームサーバー設定を、上記のネームサーバ情報に変更すれば完了です。

③ Certificate Manager にて SSL の設定を行う

・まず、サービスのセキュリティ、ID、およびコンプライアンスから Certificate Manager を選択します。
・証明書のプロビジョニングを選択し、パブリック証明書のリクエストを選択します。
・CloudFront との兼ね合いにより、画面右上のリージョンを「米国東部 (バージニア北部)」に変更します。
・ドメイン名を追加し、DNSの検証を選択後、任意でタグを入力し、確定とリクエストを選択します。
・検証保留中の証明書のリクエストが作成されるので、詳細から Route53でのレコードの作成を選択します。
・検証が進行するので、状況欄が発行済みになれば完了です。

④ CloudFront にて SSL の設定を行う

・まず、サービスのネットワーキングとコンテンツ配信から CloudFront を選択します。
・Create Distribution を選択し、Web の Get Started を選択します。
・Origin Domain Name に S3 のバケット名を入力します。
・Viewew Protocol Policy にて Redirect HTTP to HTTPS を選択します。
・SSL Certificate にて Certificate Manager にて作成した証明書を選択します。
・Alternate Domain Name にてドメイン名を入力します。
・Default Root Object にて S3 のインデックスドキュメントを入力します。
・設定内容を保存するとデプロイが始まるので、Status欄が Deployed になれば完了です。

⑤ Route53 にて Aレコードの追加設定を行う

・まず、対象ホストゾーンからレコードを作成を選択し、タイプ(Aレコード)、エイリアス(はい)、エイリアス先（CloudFrontディストリビューションから選択)という内容で作成します。
・指定ドメインでアクセスできればデプロイ完了です。

⑥ CloudFront にてポリシーの設定を行う

・まず、対象Distribution の Origins and Origin Groups から、表示されている S3 Origin の編集を選択し、Restrict Bucket Access(Yes)、 Origin Access Identity(Create a New Identity)、 Grant Read Permissions on Bucket(Yes, Update Bucket Policy) という内容で更新します。
・S3 の対象バケットのバケットポリシーにて、ステートメントが追加されていれば完了です。

⑦ CloudFront にてキャッシュの管理を行う

・まず、対象Distribution から Create Invalidation を選択し、 Object Paths にて削除したいオブジェクトのキャッシュを入力します。(全選択の場合は、 /* と入力)
・Invalidate を選択すると、キャッシュ削除が始まるので、Status欄が Completed になれば完了です。

まとめ

今回、社内のプロジェクトで急遽 LP を制作する流れになったため、ホスティングの方法等いろいろ悩んだのですが、初の S3 でのデプロイにもかかわらず、思っていたよりスムーズ(約１~2時間)だったので、軽く感動しました。
もし、LP をアップロードすることがあれば、参考にしていただければ幸いです。

-次回 (8/31)
「GAOGAO 社内 OOUI WorkShop 体験記」

参考文献

この記事は以下の情報を参考にして執筆しました。