CloudflareでブログをHTTPS化

Fri, Jul 1, 2016
blog cdn
CloudflareでブログをHTTPS化

Table of Contents


最近GitHub PagesがHTTPSに正式対応したというニュースを見たことをきっかけに、このブログをCloudflareで常時HTTPS化した話。

このブログ

このブログはGitHub Pagesでホストされている。 GitHub Pages上のWebサイトはデフォルトでは<GitHubユーザ名>.github.ioというドメインで公開されるが、ちょっとかっこつけたかったのでカスタムドメイン(www.kaitoy.xyz)にした。

GitHub Pagesは2014年3月から非公式にHTTPSをサポートしていて、2016年6月8日に正式サポートを表明したが、これは<GitHubユーザ名>.github.ioドメインだけが対象であり、カスタムドメインはHTTPSサポートされていない。

(2018/5/3追記: 2018/5/1にGitHub PagesのカスタムドメインのHTTPSサポートが発表された)

要するにこのブログにはHTTP接続しかできない状態だった。 これをなんとかHTTPSに対応させたかった。

なぜHTTPS

HTTPS化(常時SSL化)が世界的な流行りな雰囲気を感じていたのと、なにより、Googleに優遇してもらえるから。 Googleの検索結果の2,3ページ目までに出てこないなら、そのサイトはこの世に存在しないのとあまり変わらない。

昔はHTTPSにするとSSLプロトコルのオーバーヘッドや暗号化/復号化処理によりHTTPに比べて遅くなると言われていたが、最近ではサーバ/クライアントマシンの性能が上がり、このデメリットは気にするほどのものではなくなった。 逆に、常時SSL化するとSPDYやHTTP/2といった高速なプロトコルの恩恵を受けることができるようになり、HTTPより速くなることもあるらしい。

カスタムドメインなGitHub PagesサイトをHTTPS対応する方法

上記の通りこのブログはカスタムドメインでGitHub Pagesのサポートがなく直接にはHTTPS対応できない。 よって間接的に対応することになるので、リバースプロキシを使うことになる。 リバースプロキシサーバを自分で運用するのは大変なので、CDNサービスを利用する。

CDNサービスでまず思い当たったのはAWSのCloudFrontだけど、なんだか大げさで面倒そう。 あとはCloudflareが有名なので調べたところ、手軽で無料でよさそうだったのでこれにした。

因みに、ごく最近始まったサービスのKloudsecというのも見つけたけど、まだベータが付いているし、遅いだのそもそもつながらないだの評判が悪かったのでこれは無し。

Cloudflareを利用すると、もともとだいたいこんな感じ↓だったのが、

こんな感じ↓になる。多分。

上のスライド中のリバースプロキシは実際にはいくつもあり、エニーキャストによってブラウザから一番近いものが使われる。

Cloudflare事始め

Cloudflareの始め方はQiitaの記事を参考にした。

  1. Cloudflareのアカウント作成

    Cloudflareのサイトに行ってSign upのリンクからメアドとパスワードを渡してアカウントを作成。

  2. Cloudflareにサイトを登録

    アカウント作成後に開くページに従い、4つのステップをこなすとサービス利用開始できる。

    まずはサイトの登録。 サブドメインを除いたkaitoy.xyzを入力してBegin Scanをクリック。

    add_domain.png

    何かのスキャンが始まるので1分ほど待つ。何をしているのかはよくわからない。

  3. CloudflareのDNSの設定

    次のステップでCloudflareのDNSにレコードを登録する。 ブラウザからのトラフィックの誘導にはAかAAAAかCNAMEを登録できる。 トラフィックはkaitoy.github.ioに送りたいけど、IPアドレスは自分でコントロールできないのでAとAAAAは使えない。 CNAMEを登録した。

    dns.png

    適当に入力してAdd Recordを押すとレコードを登録できるが、StatusのところがデフォルトでDNS only(灰色のクラウドのアイコン)になっているので、アイコンをクリックしてDNS and HTTP proxy (CDN)(オレンジ色のクラウドのアイコン)にしておく。 こうしないとブラウザからのトラフィックがCloudflareを経由せず、HTTPS化できないはず。

  4. プランの選択

    サービスプランは無料のFree Websiteを選択。常時SSL化するだけならこれで十分なはず。

    select_plan.png

  5. レジストラのネームサーバの変更

    最後にレジストラのサイトに行ってネームサーバを変更するように指示される。

    change_your_ns.png

    Cloudflareからは二つのネームサーバが割り当てられたようだ。 指示されたとおりに変更する。

Cloudflareの設定

サインアップが終わるとCloudflareのダッシュボードが開く。


dashboard.png


ダッシュボードのOverviewのStatusは最初はPendingになっていて、これはネームサーバの変更を反映中ということらしかった。 ネームサーバの変更は数時間くらいかかったが、変更中もhttp://www.kaitoy.xyz/にはアクセスできた。

ダッシュボードからやった設定は以下。 これもQiitaの記事を参考にした。

  1. SSL

    ダッシュボードのCryptoのSSLの設定はデフォルトでFull (strict)になっている。 これはブラウザ-Cloudflare間とCloudflare-GitHub Pages間両方をSSL化する設定。 上で書いたようにGitHub Pagesの方はSSL対応できずこの設定は使えないので、Flexibleに変更。 こちらはブラウザ-Cloudflare間だけをSSL化する。

    この設定変更をして、SSL証明書が発行されるまで数時間待ったらhttps://www.kaitoy.xyz/にアクセスできるようになった。

  2. HSTS

    HSTSはHTTPでアクセスしてきたブラウザにHTTPSでアクセスするよう指示する仕組み。 これを有効にしてよりセキュアにする。 ダッシュボードのCryptoのHTTP Strict Transport Security (HSTS)から以下の様に設定した。

    hsts.png

    kaitoy.xyzだけじゃなくてwww.kaitoy.xyzで有効にするため、Include subdomainsをOnにしておくのが肝要のはず。

  3. HTTPSへのリダイレクト

    HTTPでのアクセスをHTTPSにリダイレクトする設定を加える。 ダッシュボードのPage Rulesで以下のルールを作った。

    page_rules.png

ブログサイトの修正

linkタグやscriptタグのwww.kaitoy.xyzを指しているURLをHTTPSに修正。 内部リンクも全部HTTPSにした。これで完了。