[無料!]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という独自ドメインを取得したものとします。

https://www.onamae.com

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を入力し、無料プランを選択します。

https://www.cloudflare.com/

ネームサーバーを確認

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

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

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

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

CNAMEの設定

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