はじめに
会社で働いていると爆速でランディングページを公開しないといけなくなることが頻繁にありますよね。
そんな時にササッとランディングページを公開してドヤ顔するための手順をまとめました。
ランディングページって
- 広告とかから誘導することが多いので落ちてるとダメージでかい（どんなページでも落ちてるのは基本はダメですが・・・）
- 画像が大量にある場合が多い
- 離脱要因を減らすために爆速レスポンスが求められる
- 一定期間経ったら捨てることも多い
- フォームはページ内にあったりリンク先にあったり
みたいな要件の場合が多いと思うので、AWSを使って、全部の要件をバッチリ満たしたランディングページを公開しましょう。
ざっくり言うと、S3で静的Webページをホスティングして、CloudFront経由で配信するようにし、あとはRoute53でドメインを取得してACMを使ってHTTPSして配信する、という方法の説明です。
以下、マネジメントコンソールからの操作手順になります。が、本当に頻繁にあるなら自動化しましょう。ハハハ
大まかな流れ
今回は
- S3にランディングページをホスティング（とりあえず社内アクセスのみ許可）
- 責任者に内容を確認してもらって承認をもらう
- CloudFront経由で配信できるようにする
- Route53でドメインを取得して割り当てる
- ACMで証明書を発行してHTTPS化する
- 導線をセットする
という感じのフローで進めて行きます。
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を獲得しましょう！