Cloudflare+GitHubPages設定

Name Serverを Netlify -> Cloudflareに変更したときに色々ハマったので設定した内容の雑なメモ

レジストラにNameServerを設定

自分のドメインのレジストラはムームードメインで、ここにいままでNetlifyのNameServerの設定をしていた分をCloudflareに差し替える

Type	Value
NS	jake.ns.cloudflare.com
NS	kia.ns.cloudflare.com

レコード設定｜ルートとwww

CNAMEとAのレコードを設定する。ルートとwwwについて、ぐぐった限りだと複数の記事でそれぞれ設定方法が違ったのでいくつかの方法がありそう？

ただ、自分の場合wwwが下記のケースでないとうまくいかなかった。

Type Name Content ProxyStatus
A www 192.0.2.1 Proxied
CNAME <わいのドメイン>.com <cloudflareのドメイン>.pages.dev Proxied

レコード設定｜サブドメイン

• tl;dr; 設定のまとめ
  • SSL/TLS enpryption modeをFull(strict) -> Flexibleに変更
  • CNameのRecordをProxiedではなくDNS onlyで設定
  • GitHub PagesのCustom Domainを一度removeして再設定して裏側のSSL Certificateをre-generate

---

ここに至るまでの経緯を書いていく。

まず、サブドメインをCNAMEで設定したが下記のエラーが出てハマった

設定した内容

Type 	Name	Content	Proxy status 
CNAME <サブドメイン> <githubのアカウント>.github.io Proxied

• エラー内容：Invalid SSL certificate Error code 526

どうやらSSL Certificateがうまく読み込めれてないので、下記の設定を行う。

ダッシュボード内のCryptoタブをクリックするとSSLという項目があります。初期設定ではFullとなっていますが、Flexibleに変更してください。

これでクライアントとCloudFlareサーバ間の通信は暗号化され、CloudFlareサーバとGitHubサーバ間は平文で通信を行います。FullだとCloudFlareとGitHub間も暗号化して通信されますが、GitHub側にはこちらが用意したドメインの証明書は存在しないのでSSLエラーになってしまいます。

再度、ページにアクセスしてみると次は下記のエラーが出てページが表示されず。

• ERR_TOO_MANY_REDIRECTS

他のやり方とかを調べていると、ここのコメント内容を発見

if you enable proxy on Cloudflare to GitHub pages, GitHub cannot generate the certificate.
So, I need to disable the proxy (only use DNS service on Cloudflare) deleted my subdomain.domain.com in the GitHub Pages control panel, and replaced it with the same subdomain.domain.com.

どうやら、proxyをdisableにしつつGitHubPagesを再設定してcertificateを再作成しないと行けない模様。

なので、
Cloudflare側での設定は下記のようにして

Type 	Name	Content	Proxy status 
- CNAME <サブドメイン> <githubのアカウント>.github.io Proxied
+ CNAME <サブドメイン> <githubのアカウント>.github.io DNS only

GithubPagesでカスタムドメインを再設定したところ、問題なく動作するようになった。