『Heroku + Cloudflare』でルートドメインかつSSLでサイトを運用する
2019/2/2
2025/8/2
こんにちは、okutani(@okutani_t)です。本記事では、「Heroku + Cloudflare」を使ってルートドメイン（www無しのドメイン）でかつSSL（HTTPS）でサイトを動かす方法について解説しています。
Cloudflareは無料で使えるCDNサービスです。DNSの設定も同時におこなえるので、そちらを使ってHerokuのアプリケーションをルートドメインかつSSL対応させてみましょう。
Cloudflareには「CNAME Flattening」という機能で、CNAMEでルートドメインを設定できる機能があるみたいなので、今回はそちらを利用していきます。
なお、今回はドメインの取得はムームードメインでおこなっています。ムームードメインや独自ドメインについては記事にまとめているので参考にしてください。
ムームードメインの登録手順～独自ドメインってなに？から解説〜
それでは、Cloudflareの登録方法から順を追ってみていきましょう。
Cloudflareの新規登録
Cloudflareのサイトからアカウントを発行しておきます。
メールアドレスとパスワードで登録できます。今回はフリープランで登録しました。
Cloudflare初期設定
CloudflareのHome画面からドメインを選択、「DNS」から以下のようにCNAMEを入力しましょう。
今回は、僕のポートフォリオサイト「okutani.net」を一例に話を進めていきます。適宜読み替えてください。
ValueにはHerokuで設定されているドメインを入力してください。
これで、www付きドメインと、使用したいルートドメインがHerokuアプリケーションに向きました。
すこし下にスクロールするとDNS情報が取得できるのでメモしておきましょう。
今回は以下の二つをメモしました。
- fiona.ns.cloudflare.com
- gabe.ns.cloudflare.com
次にSSLの設定をおこなっていきます。
SSL設定
SSLに対応させます。
「Crypto」からSSLの項目を「Full」にしておきましょう。こうすることで「ブラウザ→Cloudflare→Heroku」の各通信がすべてSSL化されます。
同じく「Crypto」から「Always Use HTTPS」をONにします。
ここをOnにすることで、httpのアクセスをhttpsにリダイレクトできます。
セキュリティをさらに厳しくしたい場合は「HTTP Strict Transport Security (HSTS)」をONにした方がいいみたいです。こちらについては今回は割愛。
Herokuにドメインを登録
利用するドメインをHerokuに登録しておきます。
Heroku管理画面から「Settings」→「Add domain」→利用したいドメインを入力します。
もしくは、ターミナルから以下のコマンドを実行してもOKです。「okutani.net」の部分は適宜変更してください。
$ heroku domains:add okutani.net --app アプリ名
確認します。
$ heroku domains
ドメインが登録されていればOKです。
アプリケーションをSSLに対応させる（Rails）
Cloudflare上でhttpからhttpsへのリダイレクトをしている場合は以下の対応は不要ですが、一応載せておきます。
今回、Ruby on RailsのアプリケーションをSSL化したかったので、「config/environments/production.rb」に以下を追加しています。
Rails.application.configure do
# ...省略...
config.force_ssl = true
end
逆に、Rails側でこの設定をしている場合はCloudflareのリダイレクト処理は必要ないかもしれません。
www有り→www無しへリダイレクト
www付きでアクセスされた場合に、www無し（ルートドメイン）に飛ばしたい場合は以下のように設定します。
Cloudflare管理画面から「Page Rules」→「Create Page Rule」を選択。
以下のように設定して「Save and Deploy」をクリック。
「$1」の箇所は「1番目に出現したワイルドカード（*）」に一致します。今回はワイルドカードが一つしか存在しないので$1としておきます。
これでwww有りでのアクセスが、www無しへリダイレクトされます。便利ですね。
以下のようにPage Rulesに登録されていることが確認できました。
こちらの設定は公式の動画をみながら進めてみました。
Overview · Cloudflare Rules docs
それでは、最後にDNSの設定をしていきましょう。
DNSを設定する
実際にドメインをCloudflareに向けていきましょう。
ムームードメインに移動して、先ほどメモしたDNS情報を入力します。
「ドメイン一覧」→「利用したいドメイン」→「ネームサーバー設定変更」から以下のように設定します。
これでドメインがCloudflareに向きました。
反映にはけっこう時間がかかるのでコーヒーでも飲んで気長に待ちましょう（なぜか設定直後にサイトにアクセスすると「無限ループしています」などの文言が表示されましたが、放置していたら無事に開通しました）。
無事に設定が反映されれば、Cloudflare上では以下のように表示されます。
あとはhttpsでルートドメインにアクセスしてみて、サイトが表示されればOKですね。
これでルートドメインかつSSLでサイトを運用することができます。
参考になれば幸いです。