hsb.horse
Astro.jsとPagefindを使って構築したWebサイトをCloudflare Pagesにデプロイしたところ、ローカル環境では正常に動作していた検索機能が本番環境では全く機能しないという問題に直面した。
Pagefindは静的サイト向けの優れた検索ライブラリで、Astro.jsとの相性も良く、実装も比較的簡単だ。しかし、Cloudflare Pagesにデプロイした際に予期せぬ問題が発生した。
調査プロセス
最初の調査
問題に気づいた後、まず以下の点を確認した:
- GitHubのPagefindのissueを確認したが、Cloudflare Pagesに関連する同様の問題は報告されていなかった
- ブラウザの開発者ツールでコンソールログを確認したが、明確なエラーメッセージは表示されていなかった
- ネットワークタブでリソースの読み込みを確認したが、Pagefindの関連ファイルは正常に読み込まれているように見えた
これらの調査から、Pagefind自体の問題ではなく、Cloudflareの設定に問題がある可能性が高いと考えた。
Cloudflareの設定を調査
Cloudflareには様々なパフォーマンス最適化機能がある。私のサイトでは以下の機能を有効にしていた:
- Cloudflare Zaraz - GA4などのアナリティクスツールの配信を最適化する機能
- Cloudflare Speed - Webサイトの読み込み速度を向上させるための様々な最適化機能
まず、Zarazを無効にして検証したが、問題は解決しなかった。
次に、Cloudflare Speedの設定を詳しく調査した。その中で「Rocket Loader」という機能が有効になっていることに気づいた。
原因と解決策
Rocket Loaderとは?
Rocket LoaderはJavaScriptの読み込みを最適化するCloudflareの機能だ。この機能は非同期でJavaScriptを読み込むことでページの表示速度を向上させるが、JavaScriptの実行順序や読み込みタイミングに影響を与える可能性がある。
解決策
Cloudflareダッシュボードから「Speed」→「Optimization」と進み、「Rocket Loader」の設定をOFFに変更した。
この変更を適用した後、サイトを再読み込みすると、Pagefindによる検索機能が正常に動作するようになった。
まとめ
Astro.js + Pagefindの組み合わせは静的サイトに優れた検索機能を提供してくれるが、Cloudflare Pagesでホスティングする場合は、Rocket Loaderとの相性に注意が必要だ。
同様の問題に直面している方は、Rocket Loaderを無効にすることで解決できる可能性が高い。もしくは、Pagefindの初期化コードを調整して、Rocket Loaderと共存できるようにする方法も検討する価値があるかもしれない。