はじめに
この記事では、herokuアプリを公開するために
- AWS Route53で独自ドメインを取得しherokuアプリにわりあてる
- AWS Certificate Managerで無料のサーバ証明書を取得してCloudFrontに登録しアプリのhttps化を行う
という２つの作業手順を紹介します。
https://blog.heroku.com/ssl-is-now-included-on-all-paid-dynos#feedback
herokuでも無料で証明書を登録できるようになった（これ以前は2000円/月くらいかかっていた）のですが証明書は自分でよういしないといけないのが面倒くさいのでAWSを利用しています。
独自ドメイン取得
1.Route53にてドメインを取得する
1-1.コンソールにサインインして、「Route53」を選択します。
####1-2 DashBoard -> Register Domain を選択
ここでドメインを検索。購入します。
aiueo.comがここで取得できたとします。
2.herokuアプリへ独自ドメインを紐付け(Route53)
2-1 Create Hosted Zoneを登録
Created HosteZoneのボタンを押します。その後フォームが出現します。
DomainNameのフィールドに取得したドメインを入力します。
2-2 レコードの登録
Hosted Zoneの登録がおわると、一覧でてくるのでクリックします。
次の画面にいくと Created Record Sed という青いボタンがあるのでクリックします。右側にフォームが出現するので、
Nameにはwww
Type はCNAMEを選択
Value はあなたのherokuアプリの名前を選択(例: sampleapp.herokuapp.com)
を入力して確定します。
3.herokuアプリへ独自ドメインを紐付け(Heroku側の設定)
herokuの方も設定が必要です。
[注意！！] この設定自体は無料ですが、クレジットカードが登録されている必要があります。
以下のコマンドを実行するだけでOKです
$ heroku domains:add aiueo.com
$ heroku domains:add www.aiueo.com
反映にはしばらくかかりますが、www.aiueo.comにアクセスするとherokuアプリが観れます。
https 設定
1.AWS Certificate Managerで証明書の取得
AWSコンソールにサインインして、[セキュリティ、アイデンティティ]の下のCertificateManagerをクリックします。
1-1. 超重要！！！！！！ リージョンを変更する
この画面にきたらまずすること、それはリージョンの変更です。
リージョンの変更をしなくても証明書はとれるのですが、cloudfrontがわから選択できません。これで大ハマりしました。
必ず米国東部(バージニア北部)に変更してください！
1-2. 証明書リクエストを開始する
以下のボタンを押します。
1-3. 情報の入力
以下のように入力します。
1-4. リクエストの承認がメールで届くので承認する
メールが届き、記載されたリンクを踏むと以下のような内容の画面にいくので、approveを選択します。
approveをおした次の画面で、発行すみとなっていればOKです。
タイムラグで承認中のステータスの場合もありますが、しばらく待っていれば更新されます。
もし更新なければ、下記にしめしたアクション→「検証Eメールの際送信」から再度リクエストをおこなってください。
2 CroudFlontディストリビューションの作成と証明書の登録
以下からCloudFrontへアクセスします。
2-1.ディストリビューション作成
CreateDistributionを選択
WebのGetStartedを選択
2-2.ディストリビューション設定内容を入力
Origin Settings
Origin Domain NameにHerokuアプリを書きます.ここはこれだけでOK
(aiueo.herokuapp.com)
Default Cache Behavior Settings
Viewer Protocol Policy はRedirect HTTP to HTTPSを選択（これでhttpアクセスしてもhttpsにリダイレクトさせます。）
Distribution Settings
３箇所修正します。まずは
Alternate Domain Names(CNAMEs) に取得したドメインを入力
SSL CertificateはCustom SSL Certificate (example.com):をチェック
そうすると下のセレクトボックスにACMで取得した証明書がでてくるので選択
2-3.一番下のCreate Distributionボタンを押して確定！
確定を押すと一覧画面にもどってくるので、そこに作成したDistributionが表示されているはずです。
2-4. 数十分待つ
Statusの項目がDeployedになるまで数十分かかります。
この間にRoute53にCloudFrontの設定を反映させます。（次へGo!）
3. Route53 へドメインとCloudfront を反映
先ほど、Herokuアプりの設定と同じように、Hotsted ZoneからCreateRecord Setを選択します。
Name は空にします
TypeはAにします。
AliasをYesにチェック
Alias Targetをは先ほど作成したCloudFront Distributionが出てきているはずなので選択
これで完了です！！！！
aiueo.com にhttpででアクセスできるはず！