LoginSignup
17

More than 1 year has passed since last update.

【Heroku】独自ドメイン取得~SSL化まで【完全無料】

Last updated at Posted at 2020-11-03

今回のゴール

勉強用に制作した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分アクセスなかったら寝ちゃう(スリープモードに入っちゃう)らしいので
スケジューラの設定もやっておいた方がよいかと。

やれやれだぜ:blush:

Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法

※ 私は回避策①UptimeRobotさんのお世話になってます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17