[無料!]Herokuで独自ドメインをかんたんにSSL化させる

はじめに
お名前.comで独自ドメインを取得
Herokuと独自ドメインを紐つける
Cloudflareを利用してSSL対応
SSL化
Cloudflareでリダイレクト設定
Rails側で本番環境はSSL接続のみにする
終わりに

はじめに

Herokuの無料プランでデプロイすると、https://〇〇.herokuapp.comみたいなドメインになっていしまい、Herokuを使っていることが丸わかりとなってしまいます。
しかしHerokuの無料プランは独自ドメインをSSL化することができません。月額7$の有料プランに入る必要があるのです。
個人開発しているアプリとなると、月額7＄は決して安い金額では無いでしょう。
「Herokuを使っていて独自ドメイン取得したけど、SSL化するために課金するのはちょっと・・・」
そんなあなたにぴったりの記事となっています。
すでにHerokuへデプロイは済ませてある前提の記事となりますので、ご注意ください。

この記事で扱う情報は以下になります。

お名前.comで独自ドメインを取得
Herokuと独自ドメインを紐付ける
Cloudflareを利用してSSL対応(無料)

お名前.comで独自ドメインを取得

好きなドメインを取得してください。ドメインの種類によって価格が異なります。
特に詳しい説明はしませんが、強いて言えばサーバーは不要な方にチェックを入れてください。
ここでは例としてsample.comという独自ドメインを取得したものとします。

ドメイン取得は最安値0円～｜ドメイン取るならお名前.com

お名前.comは国内最大級のドメイン公式登録サービスです。ドメイン登録実績3200万件を超えました。人気の.com .net .jpドメインを含め620種類のドメインを取り扱っております。

Herokuと独自ドメインを紐つける

独自ドメインを取得したら、ターミナルを開いてheroku domains:addコマンドを使ってHerokuと紐付けましょう。取得したドメインはsample.comなので、頭にwwwを付けます。
紐付けができたら、heroku domainsコマンドを実行して紐付けされているか確認します。

$heroku domains:add www.sample.com                                                                                 main
Configure your app's DNS provider to point to the DNS Target rekltjroti-ewotijw-etratreaterkljeo3ojrtget34.herokudns.com.
    For help, see <https://devcenter.heroku.com/articles/custom-domains>

The domain www.sample.com has been enqueued for addition
Run heroku domains:wait 'www.sample.com' to wait for completion
Adding www.sample.com to ⬢ sample... done

$heroku domains                                                                                                            main
=== sample Heroku Domain
sample.herokuapp.com

=== sample Custom Domains
Domain Name         DNS Record Type DNS Target                                            SNI Endpoint
www.sample.com CNAME           rekltjroti-ewotijw-etratreaterkljeo3ojrtget34.herokudns.com undefined

この作業はHerokuのページのSettingsからも同様の設定ができます。
僕の場合、wwwがついているドメインと付いていないドメインを設定しました。

Cloudflareを利用してSSL対応

会員登録し、無料プランを選ぶ

まずはCloudflareに無料登録しましょう。
無料登録したら、さきほど取得したsample.comを入力し、無料プランを選択します。

Connect, Protect and Build Everywhere

Make employees, applications and networks faster and more secure everywhere, while reducing complexity and cost.

ネームサーバーを確認

次に左のタブからDNSを選択します。

真ん中の方にあるネームサーバーが2つ表示されているのを確認しましょう。

お名前.com側でネームサーバーの設定

お名前.comの利用ドメイン一覧からsample.comを選んで、ネームサーバーの変更をクリックしてください。
その他ネームサーバーを使うにチェックを入れて、先程Cloudflareで確認した2つのネームサーバーを入力しましょう。

CNAMEの設定

Clooudflareに戻って、先程のネームサーバーの上の方にデフォルトでたくさんのレコードが登録されていると思います。
デフォルトのレコードを全て消しましょう。
そしてタイプをCNAMEを選び、ターゲットにもともとのドメインを入力しましょう。
ここで注意なのが、DNS Targetを入力するやり方もありますが、Cloudflareではうまくいきません。
必ずsample.herokuapp.com の形で入れましょう。
また、先程Herokuにwww付きと無しで二種類設定した人は、こちらも二種類設定します。
wwwだけの方のみ設定した人は、下の画像で言うと２つ目の設定のみで構いません。