Netlify+CloudFlareで独自ドメイン運用+https化しました

Hugoに移行した当サイトをNetlify+CloudFlareで独自ドメイン・https化して運用するまで設定を終わらせました

比較的スムーズに設定終わりましたが、Netlify+CloudFlareの設定の記録

Hugo+Netlifyでの静的ブログ環境はこちらの記事を参照
Github-PagesからNetlify+Hugoに移行しました


CloudFlareの設定

Netlify では CNAME での設定を推奨しているようなので、それにならい CNAMEで設定する

CloudFlare にログイン(登録)し、DNS設定をCNAMEにて登録

DNS機能のみ利用するので Status の雲のアイコンはグレーにする

CloudFlareでDNSのみにすると、CloudFlare側で発行されていたSSL証明書が無効化されてしまうので、あとでNetlify側でSSL証明書を有効化する必要がある ※後述

ドメイン管理サイトで、ネームサーバの変更をしないといけないのでネームサーバの指定先を確認しておく

必要に応じて適宜設定をする
今回の場合は FlexibleSSL と HSTS の設定をしました


NetlifyでSSL設定をする

CloudFlareでのSSL設定は外してしまっているので、Netlify側で Let’s Encrypt を利用した

Domain management > HTTPS > SSL/TLS certificate
Veryfy FNS configuration を押下し Let’s encrypt certificate を押下したら設定完了です
あとは少し時間を置けば自動的に証明書が更新されます


ドメイン管理サイトでネームサーバを変更する

あとは実際に、独自ドメインにアクセスされた時にCloudFlareに向くように設定すれば良いので、 ドメイン管理サイトでネームサーバを変更する

私の場合は ムームードメイン を利用してるので、その設定画面を


これで設定終わりです。

Webプログラマを離れて結構たち、また最近勉強しはじめてますが
最近はほんと設定が早くて楽・便利になってていちいち感動する