Cloudflareとは
DNS + CDN のサービスです。
オリジンサーバーとの間でリバースプロキシのように動作し、画像、CSS、JavaScriptなどをキャッシュしてくれます。
良いところ
- 無料
- 設定が簡単
- やらなきゃいけないことが少なく、情報が多い
- ルートドメイン(wwwなしのドメイン)でも問題なくCDNが使える
- 基本的にルートドメインはCNAMEレコードの設定ができないので、他のCDNサービスを使う時は設定が面倒なことが多い
- Cloudflareは
CNAME Flatteningという技術でルートドメインでもCNAMEレコードを設定することができる
- リダイレクトの設定が簡単
- wwwありなし、http→httpsなど
- 管理画面上で設定
-
.htaccessにRewriteEngine...とか書かなくて良い
設定方法
Herokuで運用しているサイトに導入してみます。
基本的にこちらの記事に沿って設定を進めました。
『Heroku + Cloudflare』でルートドメインかつSSLでサイトを運用する | vdeep
登録
- Cloudflareのトップページからサインアップ
- メールアドレス、パスワードを入力
- サイトのドメインを入力
- 無料プランを選択
- メールの受信を確認し、Verify
DNSの設定
- 管理画面より「DNS」タブを選択
- 自動で取得されているレコード情報があれば、すべて削除する
- 「レコードを追加」より以下の2つのレコードを追加
- 「CNAME」「example.com」「sampleapp.herokuapp.com」「プロキシ済み」
- 「CNAME」「www.example.com」「sampleapp.herokuapp.com」「プロキシ済み」
- 同じページ内の「Cloudflare ネームサーバー」という箇所に書いてあるネームサーバーを、ドメインを購入したサイトで登録(ネームサーバーの変更｜お名前.com Navi ガイド)
SSLの設定
- 「SSL/TLS」タブをクリック
- 「エッジ証明書」をクリック
- 「常にHTTPSを使用」「HTTPSの自動リライト」をONにする
リダイレクトの設定
- 「ページルール」タブをクリック
- 「ページルールを作成」より、以下の2つのルールを作成
- 「 http://example.com/* 」「常にHTTPSを使用」
- 「 www.example.com/* 」「URLの転送」「301」「 https://mcbattle-ch.jp/$1 」
Herokuにドメインを登録
まだドメインを登録していない場合は
Heroku管理画面 > 「Settings」 > 「Add domain」でドメインを追加します。
以上で設定完了です。
反映に時間がかかることがあるので、気長に待ちましょう。
私の場合、リダイレクトの設定が反映されるのに時間がかかりました。
CDNにキャッシュされていることを確認
- 上記の設定が終わってから数時間待つ
- デベロッパーツールのNetworkタブを開く
- サイトを表示
- 画像やCSSファイル等をクリック
- Response Headersの中に「cache-control: max-age=14400」「cf-cache-status: HIT」などの記載があれば、正常にキャッシュされています。
- 普通にみたらダメで、シークレットモードで見たら表示されてたことがありました。
ちなみに、キャッシュされたコンテンツが返ってくる時のレスポンスヘッダーは各CDNベンダーが独自に定義しているので、使っているCDNサービスによってヘッダーの名前が微妙に違ったりするらしいです。
キャッシュがHitした情報を示すCacheヘッダの標準化提案 - ASnoKaze blog
終わりに
導入後、Pagespeed Insightsのスコアが84→91くらいに上がりました。これだけいろんなことが出来て無料って最高ですね。