ここのところCloudflare界隈がにぎやかなので、いろいろ実験する足がかりとしてNetlifyでホストしているこの個人サイトをCloudflare Pagesに勢いで移行してみた。
やったこと
詳細な手順をまとめておこうと思ったが簡単すぎてほぼドキュメントも読まず実現できた。
簡単に流れを書くと
- Cloudflareアカウント作成
- Cloudflare Pagesのプロジェクト作成
- コードを置いているGutHubリポジトリと接続
- ビルド設定
- Hugoはじめ、Gatsby、Next.jsその他よく使われがちなツールは一通りプリセットが用意されているので、特殊なことをしていなければ基本的に選択するだけ
- カスタムドメイン設定
- 使用したいレコードをCNAMEでCloudflare Pagesのデフォルトドメイン（xxx.pages.dev）に向ける
これだけ。CloudflareのSSL証明書も勝手に発行される。特に問題なければアカウント作成からはじめても10分くらいでできると思う。
なので今回は自分の環境依存でちょっとつまづいたところだけまとめておく。
デフォルトでビルドに使われるHugoのバージョンが低い
初回ビルドが失敗したのでログを見たところHugoのバージョンが0.54.0になっていた。
特定のバージョンを使用したい場合はビルド設定ページにて環境変数で指定する。
Using a specific Hugo version · Cloudflare Pages docs
このようにすればOK。
カスタムドメインとしてZoneApexを使用する場合、ゾーン全体をCloudflare DNSに移行する必要がある
NetlifyではZoneApex（ n-s.tokyo というドメインであれば n-s.tokyo そのものということ。念の為）を使う場合もDNSはどこでもよかったが、Cloudflare Pagesでは設定できない。
ということで今まではドメインを買ったムームードメインが提供してくれているDNSをそのまま使っていたが、合わせてCloudflareに移行することになった。
ふまえて無停止で移行する場合
- ムームー -> Cloudflare DNSにレコード移行
- ムームー -> Cloudflare DNSへネームサーバ切り替え
- Cloudflare DNSのレコードをCloudflare Pagesに切り替え
という手順を踏む必要がある。
なんか急に仕事のメンテ計画みたいで面倒になってきたが、乗りかかった船なのでやった。
ちなみにNetlifyでZoneApexを使用する場合、DNS側で対応していればALIASレコードでNetlifyのデフォルトドメインに向ければよく、ムームードメインDNSはALIASに対応していたが、Cloudflare DNSは現状ALIASレコードに対応していないので、旧DNSレコードをそのまま移行はできない。
DNSがALIASレコードに対応していない場合、こちらの要領で “Netlify’s load balancer IP address” なるものに向ける。
Configure an apex domain | Netlify Docs
というわけでCloudflareの世界にやってきたので次はWorkersで何かやってみたいな。