爆速でランディングページを公開する（S3×CloudFront×Route53×ACM）

はじめに

会社で働いていると爆速でランディングページを公開しないといけなくなることが頻繁にありますよね。
そんな時にササッとランディングページを公開してドヤ顔するための手順をまとめました。

ランディングページって

• 広告とかから誘導することが多いので落ちてるとダメージでかい（どんなページでも落ちてるのは基本はダメですが・・・）
• 画像が大量にある場合が多い
• 離脱要因を減らすために爆速レスポンスが求められる
• 一定期間経ったら捨てることも多い
• フォームはページ内にあったりリンク先にあったり

みたいな要件の場合が多いと思うので、AWSを使って、全部の要件をバッチリ満たしたランディングページを公開しましょう。
ざっくり言うと、S3で静的Webページをホスティングして、CloudFront経由で配信するようにし、あとはRoute53でドメインを取得してACMを使ってHTTPSして配信する、という方法の説明です。

以下、マネジメントコンソールからの操作手順になります。が、本当に頻繁にあるなら自動化しましょう。ハハハ

大まかな流れ

今回は

1. S3にランディングページをホスティング（とりあえず社内アクセスのみ許可）
2. 責任者に内容を確認してもらって承認をもらう
3. CloudFront経由で配信できるようにする
4. Route53でドメインを取得して割り当てる
5. ACMで証明書を発行してHTTPS化する
6. 導線をセットする

という感じのフローで進めて行きます。

1.S3にランディングページをホスティング（とりあえず社内アクセスのみ許可）

新しいバケットを作成して、静的Webサイトのホスティングを有効化、社内からのアクセスのみ許可するようにした上で、ランディングページの素材一式をアップロードする、という流れで進めます。

1-1. 新しいバケットを作成

いい感じの名前で適当に新しいバケットを作成します。

1-2. 静的Webサイトのホスティングを有効化

先ほど作成したバケットのプロパティから静的Webサイトのホスティングを有効化して、ランディングページのindexページのパスを指定します。ついでにエンドポイントも確認しておきましょう。

1-3. 社内からのアクセスのみ許可するためのポリシーを作成

AWS Policy Generatorを使って、社内からのアクセスのみ許可するためのポリシーを作成します。

Step1
* select type　→　S3 Bucket Policy
Step2
* Effect　→　Allow
* Principal　→　*
* Actions　→　s3:GetObject
* Amazon Resource Name　→　arn:aws:s3:::${作成したバケット名}/*
→ Add Condition
* Condition　→　IpAddress
* key　→　aws:SourceIp
* value　→　${会社のIP}
→ Add Statement
Step3
→ Generate Policy
で、当該バケットに対して会社IPからのみアクセスを許可するポリシーが生成できます。

1-4. ポリシーを適用

マネジメントコンソールに戻って、生成したポリシーを追加します。

1-5. バケットにランディングページのファイル一式をアップロード

あとはバケットにランディングページの素材一式をアップロードすれば、1-2で確認したエンドポイントからランディングページを（社内のIPからアクセスした場合のみ）閲覧することが出来ます。
なお、root配下にfavicon.icoの設置などもお忘れなく。

2. 責任者に内容を確認してもらって承認をもらう

これはまぁ会社によって異なると思うのでよしなにやって下さい。
以下、Goサインが出た前提で進めます。

3. CloudFront経由で配信できるようにする

CloudFrontの管理画面を開いてweb distributionを選択します。

設定画面ではとりあえず、最低限は以下の設定をすればOK

• Origin Domain Name → 先ほどのS3バケット
• Origin ID → 自動でセットされます
• Default Root Object → index.html

他のパラメータはお好みでどうぞ。

処理が完了すれば hogehoge.cloudfront.net 経由でS3にホスティングしておいたランディングページにアクセス可能になります。

4. Route53でドメインを取得して割り当てる

通常は既存のドメインのサブドメインを切るなり、どこかのディレクトリ配下なりにランディングページを置くことが多いかと思うのですが、今回はRoute53でドメインを取得してみましょう。

4-1. ドメインの取得

Register Domainを選択してドメインを購入します。

イケてるドメインを検索して

あとは必要情報を入力すればドメインの購入が完了です。

4-2. DNSの設定

Route53の画面を表示し、Hosted zonesの中から先ほど取得したドメインを選択します。

次にCreate Record Setを選択し、Aレコード(alias)を登録します。

• Type → A - IPv4 address
• Alias → Yes
• Alias Target → hogehoge.cloudfront.net

でOK。これで取得したドメイン名でランディングページへのアクセスが可能になります。

5. ACMで証明書を発行してHTTPS化する

最後の仕上げに、AWS Certificate Manager で証明書を発行して、 CloudFrontに証明書をセットしてHTTPS対応をします。

5-1. Certificate ManagerでSSL証明書を発行する

Certificate Managerで

先ほど購入したドメインの証明書をリクエスト

Confirm and requestを押下すると、Validationのためのメールが飛んで来ます。メール中のリンクを押下することで認証が完了し、証明書が発行されます。

ここで要注意なのが、現状、各リージョンでACMで証明書の発行が可能な状況とはなっているのですが、US East (N. Virginia)以外のリージョンで発行した証明書は、ELBでしか使えないので、CloudFrontで使うにはUS East (N. Virginia)で証明書を発行する必要があります。

5-2. CloudFrontに証明書をセット

CloudFrontの設定を変更して証明書をセットします。

• Alternate Domain Names → 取得したドメインをセット
• Custom SSL Certificate (example.com) → チェック
• Custom SSL Client Support　→ Only Clients that Support Server Name Indication (SNI)

以上で、Route53で取得したドメイン名でCloudFrontを経由しつつHTTPSでS3にホスティングしておいたランディングページが閲覧可能となります。

6. 導線をセットする

あとは、ランディングページへの導線をセットしてじゃんじゃんトラフィックを流してCVを獲得しましょう！