HerokuアプリにAWS Route53 で取った独自ドメインを割り当て、 Certificate Manager + Cloudfront を使ってhttps化する

## はじめに
この記事では、herokuアプリを公開するために

- AWS Route53で独自ドメインを取得しherokuアプリにわりあてる
- AWS Certificate Managerで無料のサーバ証明書を取得してCloudFrontに登録しアプリのhttps化を行う
 
という２つの作業手順を紹介します。
[https://blog.heroku.com/ssl-is-now-included-on-all-paid-dynos#feedback](https://blog.heroku.com/ssl-is-now-included-on-all-paid-dynos#feedback)
herokuでも無料で証明書を登録できるようになった（これ以前は2000円/月くらいかかっていた）のですが証明書は自分でよういしないといけないのが面倒くさいのでAWSを利用しています。

## 独自ドメイン取得
### 1.Route53にてドメインを取得する
#### 1-1.コンソールにサインインして、「Route53」を選択します。
![スクリーンショット 2017-02-10 12.52.07 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/b5db484c-dddf-ee00-6120-1695799538ee.jpeg)
####1-2 DashBoard -> Register Domain を選択

![スクリーンショット 2017-02-10 12.54.03 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/e7fc8fc1-cb03-2e6b-a42c-3d9a24840baf.jpeg)
ここでドメインを検索。購入します。
**aiueo.com**がここで取得できたとします。

### 2.herokuアプリへ独自ドメインを紐付け(Route53)
#### 2-1 Create Hosted Zoneを登録
Created HosteZoneのボタンを押します。その後フォームが出現します。
![スクリーンショット 2017-02-10 12.58.23 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/8f00e0b7-fc48-821d-0929-3b5e3af73603.jpeg)

DomainNameのフィールドに取得したドメインを入力します。
![スクリーンショット 2017-02-10 1.01.38 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/fbcbd70e-72ff-fb18-2194-f984f3ab822f.jpeg)

#### 2-2 レコードの登録
Hosted Zoneの登録がおわると、一覧でてくるのでクリックします。
![スクリーンショット 2017-02-10 1.05.01 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/b404b524-7469-bc33-f4f1-7b07cbf212a5.jpeg)

次の画面にいくと Created Record Sed という青いボタンがあるのでクリックします。右側にフォームが出現するので、
**Name**には**www**
**Type** は**CNAME**を選択
**Value** は**あなたのherokuアプリの名前**を選択(例: sampleapp.herokuapp.com)
を入力して確定します。
![スクリーンショット 2017-02-10 1.14.11 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/5122ac2e-0c69-949a-6284-ab9219498730.jpeg)

### 3.herokuアプリへ独自ドメインを紐付け(Heroku側の設定)
herokuの方も設定が必要です。
[注意！！] この設定自体は無料ですが、クレジットカードが登録されている必要があります。
以下のコマンドを実行するだけでOKです

```shell-session
$ heroku domains:add aiueo.com
$ heroku domains:add www.aiueo.com
```

反映にはしばらくかかりますが、www.aiueo.comにアクセスするとherokuアプリが観れます。


## https 設定
### 1.AWS Certificate Managerで証明書の取得
AWSコンソールにサインインして、[セキュリティ、アイデンティティ]の下のCertificateManagerをクリックします。
![スクリーンショット 2017-02-10 1.35.38 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/c0a9903a-7fc1-afeb-0fef-913cfafcced9.jpeg)

#### 1-1. 超重要！！！！！！ リージョンを変更する
この画面にきたらまずすること、それはリージョンの変更です。
リージョンの変更をしなくても証明書はとれるのですが、cloudfrontがわから選択できません。これで大ハマりしました。
必ず米国東部(バージニア北部)に変更してください！
![スクリーンショット 2017-02-10 1.42.07 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/263b4320-7157-161c-9e38-009f25addf1c.jpeg)

#### 1-2. 証明書リクエストを開始する
以下のボタンを押します。
![acm_cloudfront_ssl_03-640x427.png](https://qiita-image-store.s3.amazonaws.com/0/105028/a57f1272-0322-6eff-1dc5-0b7bfa106864.png)

#### 1-3. 情報の入力
以下のように入力します。
![スクリーンショット 2017-02-10 1.44.05 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/d70ba6bc-37df-479d-aa72-d703143d4ea7.jpeg)



#### 1-4. リクエストの承認がメールで届くので承認する
メールが届き、記載されたリンクを踏むと以下のような内容の画面にいくので、approveを選択します。
![スクリーンショット 2017-02-10 1.46.41 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/eb9eb53d-cd2b-d3ec-83dd-fee5bd55cca7.jpeg)

approveをおした次の画面で、発行すみとなっていればOKです。
タイムラグで承認中のステータスの場合もありますが、しばらく待っていれば更新されます。
もし更新なければ、下記にしめしたアクション→「検証Eメールの際送信」から再度リクエストをおこなってください。
![スクリーンショット 2017-02-10 1.51.13 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/61953f70-4369-5c95-ba1e-10658388ddba.jpeg)

### 2 CroudFlontディストリビューションの作成と証明書の登録
以下からCloudFrontへアクセスします。
![スクリーンショット 2017-02-10 1.55.11 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/cd13551d-6ec6-2fb4-722b-1e5d56ccdd8f.jpeg)

#### 2-1.ディストリビューション作成
CreateDistributionを選択
![スクリーンショット 2017-02-10 1.56.54 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/777ba59a-5d04-669a-48f4-7dba683ce552.jpeg)

WebのGetStartedを選択
![スクリーンショット 2017-02-10 1.58.38 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/12b165c6-15e4-d7b9-9470-d1bf96d7ed3e.jpeg)

#### 2-2.ディストリビューション設定内容を入力
##### Origin Settings
Origin Domain NameにHerokuアプリを書きます.ここはこれだけでOK
(aiueo.herokuapp.com)
![スクリーンショット 2017-02-10 2.01.26 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/775bb4af-84b4-d744-3b9c-f1f82e1a59c1.jpeg)

##### Default Cache Behavior Settings
Viewer Protocol Policy はRedirect HTTP to HTTPSを選択（これでhttpアクセスしてもhttpsにリダイレクトさせます。）
![スクリーンショット 2017-02-10 2.04.20 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/61a99326-b2e0-79d2-8379-5beed3f49b0c.jpeg)

##### Distribution Settings
３箇所修正します。まずは
**Alternate Domain Names(CNAMEs)** に取得したドメインを入力

**SSL Certificate**はCustom SSL Certificate (example.com):をチェック

**そうすると**下のセレクトボックスにACMで取得した証明書がでてくるので選択
![スクリーンショット 2017-02-10 2.06.11 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/7f3a249f-1996-a47b-5be3-25878e66e202.jpeg)

#### 2-3.一番下のCreate Distributionボタンを押して確定！
確定を押すと一覧画面にもどってくるので、そこに作成したDistributionが表示されているはずです。![スクリーンショット 2017-02-10 2.17.15 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/fcf8675e-000f-2700-3f64-1845e786b324.jpeg)


#### 2-4. 数十分待つ
Statusの項目がDeployedになるまで数十分かかります。
この間にRoute53にCloudFrontの設定を反映させます。（次へGo!）
　![スクリーンショット 2017-02-10 2.14.55 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/fc74e5de-2ddf-758e-44da-b731fad0e736.jpeg)

### 3. Route53 へドメインとCloudfront を反映
先ほど、Herokuアプりの設定と同じように、Hotsted ZoneからCreateRecord Setを選択します。

![スクリーンショット 2017-02-10 2.23.12 PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/105028/7ce87cd7-9604-7c4b-8f7c-0dab39de7387.jpeg)

**Name** は空にします
**Type**はAにします。
**Alias**をYesにチェック
**Alias Target**をは先ほど作成したCloudFront Distributionが出てきているはずなので選択



## これで完了です！！！！
aiueo.com　にhttpででアクセスできるはず！