Astro.js + Pagefind + Cloudflare Pages: 検索機能が動かない問題の解決方法

最近、Astro.jsとPagefindを使って構築したWebサイトをCloudflare Pagesにデプロイしたところ、ローカル環境では正常に動作していた検索機能が本番環境では全く機能しないという問題に直面しました。

Pagefindは静的サイト向けの優れた検索ライブラリで、Astro.jsとの相性も良く、実装も比較的簡単です。しかし、Cloudflare Pagesにデプロイした際に予期せぬ問題が発生しました。

問題に気づいた後、まず以下の点を確認しました：

1. GithubのPagefindのissueを確認しましたが、Cloudflare Pagesに関連する同様の問題は報告されていませんでした。
2. ブラウザの開発者ツールでコンソールログを確認しましたが、明確なエラーメッセージは表示されていませんでした。
3. ネットワークタブでリソースの読み込みを確認しましたが、Pagefindの関連ファイルは正常に読み込まれているように見えました。

これらの調査から、Pagefind自体の問題ではなく、Cloudflareの設定に問題がある可能性が高いと考えました。

Cloudflareには様々なパフォーマンス最適化機能があります。私のサイトでは以下の機能を有効にしていました：

1. Cloudflare Zaraz - GA4などのアナリティクスツールの配信を最適化する機能
2. Cloudflare Speed - Webサイトの読み込み速度を向上させるための様々な最適化機能

まず、Zarazを無効にして検証しましたが、問題は解決しませんでした。

次に、Cloudflare Speedの設定を詳しく調査しました。その中で「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と共存できるようにする方法も検討する価値があるかもしれません。

この記事は生成AIによって文章を校正しています。