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

学習記録

はじめに

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

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

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

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

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

お名前ドットコムのドメイン|ドメイン最安0円~サポート充実すぐに申込み
「お名前.com」は国内最大級のドメイン登録サービスです。人気の「.com」「.jp」をはじめ、580種類以上のドメインを取り扱い中。登録数2900万件の実績がありサポートも充実。欲しいドメインまずは検索を!

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がついているドメインと付いていないドメインを設定しました。

Image from Gyazo

Cloudflareを利用してSSL対応

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

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

Cloudflare - The Web Performance & Security Company
Here at Cloudflare, we make the Internet work the way it should. Offering CDN, DNS, DDoS protection and security, find out how we can help your site.

ネームサーバーを確認

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

Image from Gyazo

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

Image from Gyazo

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

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

Image from Gyazo

CNAMEの設定

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

Image from Gyazo

SSL化

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

Image from Gyazo

Cloudflareでリダイレクト設定

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

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

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

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

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

config.force_ssl = true

終わりに

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

コメント

タイトルとURLをコピーしました