今回のゴール
勉強用に制作したHerokuアプリについて、独自ドメインかつSSL化まで無料で適用する
全体の流れ
独自ドメインを取得 ~ Heroku側にドメイン名適用 ~ CloudflareをプロキシとしてかませてSSL化 ~ freenom側にCloudflareのネームサーバー名を設定
やった事詳細
① freenomで独自ドメインを取得
- 使いたいドメイン名を入力⇒取得可能な一覧が出てくるので、0円のものの中から選択する
freenom ドメイン取得ページ
参考)freenomで無料ドメインを取得する
② Heroku側で取得したドメインを設定
- Settings>Domains>add domainからドメイン名追加
参考)Django製サービスをHeroku×独自ドメインでリリースするまで
※ こちらに記載されているHerokuでのSSL化は、無料プランの場合適用不可
③ CloudFlareを使いDNSでプロキシ~SSL化
サイトを追加し、DNS管理の画面から下記の通り入力
タイプ:CNAME
名前:独自ドメイン名
コンテンツ:Herokuでのドメイン名(https://を省いたもの)SSL関連の設定は大体下記のような感じだったかと
SSL/TLS 暗号化モード:フレキシブル
(訪問者-Cloudflare間を暗号化。
Webサーバー(Heroku側)に証明書をインストールせず使うのでこれを選びます)
https設定:ON
※ 2021.07.09追記
Railsアプリをデプロイした際、暗号化モードについてフレキシブルにしていると下記エラーが出ました。
このような場合はフルに変更すると解消する事もあるようです。
(私の場合は解消しました!ありがとうございます・・・!!)
Heroku×CloudflareでHTTP Origin Header didn't match request.base_urlというエラーがでる
- ネームサーバー1と2が表示されるのでコピーしておきfreenom側に設定(次項参照)
参考①)Heroku (無料プラン)で独自ドメインでSSLを使う方法
※こちらにはHeroku側のDNSターゲットをCloudflareのコンテンツ欄に入力するとありますが
入れるとエラーになったため、上記方法で行っています。
参考②)無料で個人Webサイトをhttps/SSL暗号化する方法:Cloudflare共有SSL証明書/Let’s Encrypt
③ freenom側のネームサーバー名をCloudFlareのものに変更
ログイン後にトップページ下部のMy Domains>取得ドメイン一覧より
今回のドメイン名右側の「Manage Domain」をクリックManage Freenom DNS>Edit Nameserversをクリックした画面より
「Use custom nameservers (enter below)」を選択
Name Server1と2にCloudFlareでコピーした各内容を貼り付けて保存
④ Cloudflareから「OK牧場」のメールが届く
- 「(独自ドメイン名)のアクティベーションに成功しました。」というメールが届いたら 有効に動作しているようです。 ブラウザ上でチェックしてみてください!
おまけ
Herokuさん無料版だと30分アクセスなかったら寝ちゃう(スリープモードに入っちゃう)らしいので
スケジューラの設定もやっておいた方がよいかと。
やれやれだぜ
Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
※ 私は回避策①UptimeRobotさんのお世話になってます。