まえがき
本記事では、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 体験記」
参考文献
この記事は以下の情報を参考にして執筆しました。