爆速でランディングページを公開する（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. 新しいバケットを作成

<img width="1110" alt="スクリーンショット_2016-07-16_1_45_32.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/43306519-9c7f-9fb2-8961-b2912e6b0066.png">

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

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

<img width="1432" alt="スクリーンショット_2016-07-16_1_47_11.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/1dc91d90-94bf-bd96-c7a2-4797f642bd3f.png">

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

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

[AWS Policy Generator](http://awspolicygen.s3.amazonaws.com/policygen.html)を使って、社内からのアクセスのみ許可するためのポリシーを作成します。

![fd0a2ce9-a289-52a8-eef1-da22c180bc9b.png](https://qiita-image-store.s3.amazonaws.com/0/26102/773cc343-48c0-ca9b-1acb-4bb1e3fd8061.png)

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. ポリシーを適用

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

<img width="1432" alt="スクリーンショット_2016-07-16_1_51_23.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/d47ad287-5e08-f749-ab6c-612cdf8ee2da.png">

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

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

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

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

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

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

<img width="1039" alt="スクリーンショット 2016-07-16 2.28.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/cf5ad3e9-f4ae-d2a7-32c2-93b2f9bb8847.png">

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

<img width="1405" alt="スクリーンショット_2016-07-16_2_35_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/413a0132-b11c-3465-65f8-c0e8d4b1a64e.png">

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

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

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

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

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

# 4-1. ドメインの取得

<img width="1156" alt　="スクリーンショット 2016-07-16 2.50.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/528a23bd-748f-ba85-5b45-b49a56bee12e.png">

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

<img width="1125" alt="スクリーンショット 2016-07-16 2.48.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/189cdce2-04e6-36db-7447-57bcb059e85e.png">

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

<img width="1129" alt="スクリーンショット 2016-07-16 2.49.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/ac74818c-cb5a-013c-c48d-94e32c0093c2.png">

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

# 4-2. DNSの設定

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

<img width="1022" alt="スクリーンショット_2016-07-16_13_24_08.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/5e27a1cd-904a-6b52-9edf-07eb00297583.png">

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

<img width="1208" alt="スクリーンショット_2016-07-16_13_24_28.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/298093d5-64c8-f2b8-41c2-57b920e8b66e.png">

* 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で

<img width="1381" alt="スクリーンショット 2016-07-16 2.53.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/56711169-ace2-d06c-1988-144f8ada057f.png">

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

<img width="1368" alt="スクリーンショット 2016-07-16 2.54.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/47fe83f2-db82-5e73-6625-645f4c3384f4.png">

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

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

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

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

<img width="1091" alt="スクリーンショット_2016-07-16_13_15_23.png" src="https://qiita-image-store.s3.amazonaws.com/0/26102/cfe9171f-bc01-8736-23d3-de8739f04e74.png">

* 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を獲得しましょう！