vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

『Heroku + Cloudflare』でルートドメインかつSSLでサイトを運用する

   

LINEで送る
Pocket


こんにちは、okutani(@okutani_t)です。本記事では、「Heroku + Cloudflare」を使ってルートドメイン(www無しのドメイン)でかつSSL(HTTPS)でサイトを動かす方法について解説しています。

Cloudflareは無料で使えるCDNサービスです。DNSの設定も同時におこなえるので、そちらを使ってHerokuのアプリケーションをルートドメインかつSSL対応させてみましょう。

Cloudflareには「CNAME Flattening」という機能で、CNAMEでルートドメインを設定できる機能があるみたいなので、今回はそちらを利用していきます。

Herokuの登録方法などは過去の記事を参考にしてください。

【Rails】Herokuの登録&初期設定からデプロイ方法までまとめ
こんにちは、okutani(@okutani_t)です。本記事では『Heroku』の登録方法、かんたんな初...
2017-08-25 02:03
はてブ

なお、今回はドメインの取得はムームードメインでおこなっています。ムームードメインや独自ドメインについては記事にまとめているので参考にしてください。

ムームードメインの登録手順~独自ドメインってなに?から解説〜
こんにちは、okutani(@okutani_t)です。本記事では『ムームードメインの登録方法』から、『ド...
2015-11-28 14:45
はてブ

それでは、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でサイトを運用することができます。

参考になれば幸いです。

LINEで送る
Pocket

okutani (okutani_t) のヒトコト
意外とあっさりルートドメインでhttps化できてよかったです。Cloudflareいいですね、今後仕事でも使っていこうと思います

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています。

「Ruby on Rails」「HTML5」「CSS3」「JavaScript(jQuery, Reactなど)」を用いたシステム開発、「Heroku」を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio


 - Heroku

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。