icon

sambaiz-net
github
goodreads
google maps
board game arena
aws golang machinelearning etl python kubernetes web fluentd gcp ios ...

CloudflareでカスタムドメインのGitHub PagesにHTTPSでアクセスできるようにする

cdnweb

このサイトはGitHub Pagesでカスタムドメインsambaiz.netを設定して、 Apex Domain(sambaiz.net)にAレコードを登録して運用していたのだけれど、これだとカスタムドメインの証明書を置けないのでHTTPSでアクセスすると警告が出てしまう。 いい加減HTTPだと許されない風潮になってきたのでCloudflareを前に挟んでHTTPSでアクセスできるようにした。 ついでにCNAMEを登録できないApex Domain(sambaiz.net)をやめてwww.sambaiz.netに向ける。

DNSの設定をする

Cloudflareでドメインを入れると既存のDNS Recordsを読み込むので必要に応じて修正する。 CloudflareではCNAME FlatteningによってApex Domainにも設定上ではCNAMEを与えることができ、内部でAレコードに解決してくれる。 そのためApex Domainをそのまま使っても実は問題ないのだが、今後のために変えておく。 www.sambaiz.netにGitHub PagesのCNAMEを設定し、sambaiz.net(@)にはwww.sambaiz.netをCNAMEとして設定した。

DNS設定

あとGitHub Pagesの方のカスタムドメインもwww.sambaiz.netにした。 wwwを設定するとApex Domainでアクセスしたときにリダイレクトするようになっているので 既存のリンクが切れたり混在することはない。

指示された *.ns.cloudflare.com のようなCloudflareのネームサーバーをドメインに設定する。 さくらの場合、Apex Domainのネームサーバーはゾーン表示ではなくWHOIS情報のところから変更できる。 設定してしばらくするとCloudflareを通してアクセスが飛び警告なくHTTPSでアクセスできるようになる。 証明書は共有のものになっている。

共有証明書

正常にアクセスできることを確認できたら今HTTPになっている画像やリンクもHTTPSにする。

$ find . -name '.git*' -prune -o -name 'public' -prune -o -name 'static' -prune -o -type d -o -print | xargs sed -i "" "s/http:\/\/sambaiz.net/https:\/\/www.sambaiz.net/g"

Cloudflareの機能

Cloudflareにはいくつかプランがあって、今回はFreeプランにした。

Analytics

  • キャッシュされている/ないリクエスト数や帯域、それによる節約量
  • ブロックした脅威の数
  • 何人/どこの国からアクセスが来たか
  • コンテンツ(HTML/CSS/PNG)ごとのリクエストの割合

などがわかる。FreeだとWeb TrafficやGeographyが直近24時間より短いスパンで取れない。

Crypto

SSLまわりの設定。

  • Flexible: クライアントとCloudflareはHTTPS、CloudflareとオリジンサーバーはHTTPで通信する。
  • Full: デフォルト。Cloudflareとオリジンサーバーの通信もHTTPSで行うが、証明書の検証は行われない。
  • Full(Strict) 証明書の検証も行う。

から選択する。Business以上のPlanだと共有の証明書ではなく独自のものを上げることもできる。

HTTPで来たらHTTPSにリダイレクトさせるのと、ブラウザでHTTPをHTTPSに置き換えるHTTP Strict Transport Security(HSTS) の設定もある。 HSTSを設定するときに出るように 将来HTTPSをサポートしなくなった場合、HSTSの期限が残っているブラウザからはアクセスできなくなるので注意。 まあ今後HTTPのみに戻すということは考えにくいのだが、推奨の有効期限は6ヶ月になっている。 あとNo-Sniff Headerの設定もここにあって、これをオンのままにしておくとContent-Typeがtext/cssでない styleやJavaScriptのMIME TypeでないscriptのリクエストはブロックしXSSを防ぐ。

Strict-Transport-Security: max-age=15552000
X-Content-Type-Options: nosniff

Firewall

IPアドレスや国でブロックしたりとか。Pro以上のプランだとWeb Application Firewallを有効にできる。

Speed

JS/CSS/HTMLを自動でMinifyしたり、モバイルの場合リダイレクトさせたりできる。 Proプランでは画像を最適化してくれる。

Caching

キャッシュをパージしたり、どのレベルでキャッシュするかの設定など。

Page Rules

URL単位でルールを設定できる。example.com/hoge/*は静的なページなのでHTMLもキャッシュするとか。 3つルールが作れて、5つ追加するのに月5ドル。

Network

最大アップロードサイズやWebSocketを有効にするかなどの設定。 ユーザーのIPアドレスをTrue-Client-IPに乗せるのはEnterpriseプランが必要。