経緯

ここ半年間ほど当ブログは Cloud Storage + Cloud Load Balancing の組み合わせで運用していた.

https://blog.aoimotoya.net/2023/08/15/static-web-site-with-google-cloud/

この度インフラ費用が無視できなくなったため別の安価なプラットフォームに移行することにした. Cloud Storage の費用はたかだか数円の一方で Cloud Load Balancing は月額 21 USD (≒ 3,000 JPY) ほどかかっており,静的サイトのホスティングという観点において費用分の価値を見出すことができなくなった.

元々ドメインレジストラおよび DNS サービスとして Cloudflare を利用していたこともあり,移行先として Cloudflare Pages を選択した.当ブログの運用は Cloudflare Pages の Free プランで十分に賄える.

https://pages.cloudflare.com/

対応内容

公式ドキュメントの案内に従って対応した.当ブログは Hugo で作成しているため Hugo 用のドキュメントも参照した.

対応を進める中で少々躓いた点があったため以下にメモしておく.

初回ビルドの失敗

Pages アプリケーション作成時の初回ビルドで失敗した.

build-log

ログは以下の通り.

16:07:18.752	Cloning repository...
16:07:19.767	From https://github.com/<github-username>/<target-repository>
16:07:19.767	 * branch            <commit-hash> -> FETCH_HEAD
16:07:19.768	
16:07:19.801	HEAD is now at <commit-hash> <commit-message>
16:07:19.801	
16:07:19.894	
16:07:19.895	Using v2 root directory strategy
16:07:19.925	Success: Finished cloning repository files
16:13:40.185	Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

謎のエラーである.再度試してもエラーとなったため仕方なくそのままアプリケーションを作成した.その後,アプリケーションのページから Retry deployment を実行すると問題なくビルドされた.うーむ.

ビルドエラーということで Cloudflare Pages で使用されている Hugo のバージョンに問題がある可能性が考えられた.このため Pages の環境変数として HUGO_VERSION を宣言して私のローカル環境と同じバージョンを指定したところ,既存の Pages におけるビルドは問題なく完了した.また,改めて新規に Pages アプリケーションを作成する際に HUGO_VERSION を設定したところ,こちらも初回で問題なくビルドが完了した.

env-vars

よって,おそらくは Pages がデフォルトで使用する Hugo のバージョンと私の使用する Hugo のバージョンの差によってエラーが発生したと思われるが,詳細なエラーを追えないため真相は闇の中である.

カスタムドメイン設定後のリダイレクトループ

Cloudflare Pages にてカスタムドメインを設定して DNS の名前解決先を Cloud Load Balancing から Cloudflare Pages に変更したところ,当該 Web サイトでリダイレクトの無限ループが発生した.原因は私の設定ミスだった.正常に動作させるためにはカスタムドメインの設定の他に SSL/TLS の設定を行う必要があった.

無限ループの状況としては HTTP アクセス → HTTPS アクセス → HTTP アクセスが延々と繰り返されていた.説明のためには従来のインフラ構成を振り返る必要がある.

従来の構成において Cloudflare は DNS のみを担当していた. Cloudflare DNS はクライアントに対して Cloud Load Balancing の A レコードを返すのみで,その後の HTTP/HTTPS 通信はクライアントと Cloud Load Balancing の間でやり取りされていた.

今回の構成では Cloudflare が DNS とホスティングの双方を担当する.つまり DNS とホスティング (Pages) の双方が HTTPS に対応していなければならない. Pages はデフォルトで HTTPS をサポートする一方で, DNS はカスタムドメインの設定をしただけでは (SSL/TLS の設定をしていなければ) HTTP しかサポートしない.よって,クライアントに対して DNS が HTTP アクセスを促す一方で Pages が HTTPS アクセスを促す状態になっていたため無限ループが発生していた.

本件は下図の通り SSL/TLS 暗号化モードを Full に設定することで解決した (元々の設定は Off だった).

ssl-tls-mode

おわりに

無事に当ブログを Google Cloud から Cloudflare へ移行できた.費用面の負担がなくなったことに加え,本稿では省略したが GitHub と Pages の連携により記事のプレビューやリリースを簡単に CI/CD できるようになったことで手間の面でも運用コストが削減された.今後も自身の興味や自身の置かれた状況に合わせて適切な技術を柔軟に選択していきたい.