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

学習記録
2022.03.05

はじめに

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種類のドメインを取り扱っております。
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を入力し、無料プランを選択します。

Connect, Protect and Build Everywhere
Make employees, applications and networks faster and more secure everywhere, while reducing complexity and cost.
www.cloudflare.com

ネームサーバーを確認

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

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

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

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

CNAMEの設定

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

SSL化

左側のSSL/TLSタブを選んで、チェックボックスがフレキシブルになっていることを確認します。
よりセキュリティを強めるためにフルを選びます。

Cloudflareでリダイレクト設定

僕の場合、先程Herokuのwww付きのドメインとwww無しのドメインの二種を設定しました。
www付きのドメインについてはwww無しの方にリダイレクトさせます。

www付きの方しか設定していない場合は、この設定はしてはいけません。

左側のメニューからルールをクリックします。

ページルールを作成を選びます。

下記の例を参考に記入し、保存してデプロイするをクリックします。

この設定により、www.sample.comからsample.comへ301リダイレクトされるようになります。

Rails側で本番環境はSSL接続のみにする

念の為、Rails側で本番環境はSSL接続のみにする設定を行いましょう。

config.force_ssl = true

終わりに

ここまでの作業で終了です。
反映には24時間から72時間かかるとも言われていますが、個人差があるようです。
設定を間違えると、いつまで経っても独自ドメインが反映されないことになってしまいますので、注意しましょう。
お疲れさまでした！

コメント