『Heroku + Cloudflare』でルートドメインかつSSLでサイトを運用する
こんにちは、okutani(@okutani_t)です。本記事では、「Heroku + Cloudflare」を使ってルートドメイン（www無しのドメイン）でかつSSL（HTTPS）でサイトを動かす方法について解説しています。
Cloudflareは無料で使えるCDNサービスです。DNSの設定も同時におこなえるので、そちらを使ってHerokuのアプリケーションをルートドメインかつSSL対応させてみましょう。
Cloudflareには「CNAME Flattening」という機能で、CNAMEでルートドメインを設定できる機能があるみたいなので、今回はそちらを利用していきます。
Herokuの登録方法などは過去の記事を参考にしてください。
なお、今回はドメインの取得はムームードメインでおこなっています。ムームードメインや独自ドメインについては記事にまとめているので参考にしてください。
それでは、Cloudflareの登録方法から順を追ってみていきましょう。
スポンサーリンク
もくじ
Cloudflareの登録・初期設定
それではCloudflareのサイトからアカウントを発行していきましょう。
LINKCloudflare – Webパフォーマンスとセキュリティを追求する企業 | Cloudflare
メールアドレスとパスワードを入力し、「サインアップ」をクリック。
Create Acountをクリック。Cloudflareのお知らせを受け取りたくない人はチェックを外しておきましょう。
サイトのURLを入力し、Add Siteをクリック。
これで登録が完了しました。Nextをクリック。
プランの選択画面が表示されます。今回はFreeを選択しました。Confirm Planをクリック。
Confirmを選択。
これでCloudflareが利用できるようになりました。
登録したメールアドレスに確認用のメールが飛んでいるので、「Verify email」をクリックしておきましょう。
それでは、次に初期設定をおこなっていきます。
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に登録されていることが確認できました。
こちらの設定は公式の動画をみながら進めてみました。
参考すべてのユーザーに必須のPage Rule | Cloudflare
それでは、最後にDNSの設定をしていきましょう。
DNSを設定する
実際にドメインをCloudflareに向けていきましょう。
ムームードメインに移動して、先ほどメモしたDNS情報を入力します。
「ドメイン一覧」→「利用したいドメイン」→「ネームサーバー設定変更」から以下のように設定します。
これでドメインがCloudflareに向きました。
反映にはけっこう時間がかかるのでコーヒーでも飲んで気長に待ちましょう（なぜか設定直後にサイトにアクセスすると「無限ループしています」などの文言が表示されましたが、放置していたら無事に開通しました）。
無事に設定が反映されれば、Cloudflare上では以下のように表示されます。
あとはhttpsでルートドメインにアクセスしてみて、サイトが表示されればOKですね。
これでルートドメインかつSSLでサイトを運用することができます。
参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
