🚀 Way2Go NotionBlog

当ブログで使用しているastro-notion-blogが0.10へと久しぶりのアップデートを迎えたため、一からフォークして設定を見直すことにしました。

2年前に構築したため、CloudflareとAstro Notion Blogについての知識が薄れていましたが、時間はかかったものの、良い復習の機会となりました。

astro-notion-blogのカスタマイズ中に、検索モーダルウィンドーが表示されない問題が発生しました。

ローカル環境では正常に動作するものの、本番環境では表示されません。

セキュリティヘッダーの調整やプログラムの見直し、キャッシュの削除など様々な対策を試しましたが解決せず、元のFork状態に戻しても改善されませんでした。

初期状態でも問題が解決しないことから、Cloudflare側に原因があると考えられます。

原因は、Cloudflare DNS設定でProxiedが有効化されていたことでした。

この設定をDNS onlyに変更したところ、検索モーダルが正常に表示されるようになりました。

以前は DNS を DNS only に切り替えて回避していましたが、2026年8月時点で同じ症状が再発したため切り分け直しました。

Search はクライアント側で /feed（RSS）を取得して絞り込む実装です。初期化は SearchModal / SearchButton 内の DOMContentLoaded で行っています。

本番では Cloudflare Rocket Loader が Astro の module script（type="module"）をハッシュ付きの非標準 type に書き換え、実行を後回しにします。その結果、DOMContentLoaded の時点ではまだリスナーが登録されず、Search ボタンを押してもモーダルが開きません。

切り分け結果:

• /feed の取得 → 正常（200・RSS）
• 手動でモーダル初期化 → 動作する
• 本番の Search クリック → ハンドラ未登録で失敗
• Rocket Loader → 原因

ローカルの npm run dev には Rocket Loader がないため問題は出ません。

• A. Configuration Rules（推奨）: notion.washo3.com だけ Rocket Loader を Off。他ホストは維持可能
• B. Speed 設定: ゾーン全体で Rocket Loader を Off
• C. DNS: Proxied → DNS only（以前の回避策。他の CF 機能も無効化される）
• D. コード修正: DOMContentLoaded をやめ、Astro module script として即時初期化

今回は A. Configuration Rules で解決しました。Proxied のまま、ブログサブドメインだけ無効化できます。

1. Cloudflare Dashboard → Rules → Configuration Rules を開く
2. Create rule → 種類を聞かれたら Configuration Rule（構成ルール） を選択（テンプレートは不要）
3. Rule name: 任意（例: Disable Rocket Loader for notion）
4. When incoming requests match: Custom filter expression
   • Field: Hostname
   • Operator: equals
   • Value: notion.washo3.com
   • Expression 相当: (http.host eq "notion.washo3.com")

     

5. Then the settings are: Rocket Loader を追加して Off

   

6. Deploy

数分待ってからシークレットウィンドウでサイトを開き、次を確認します。

• ページソースに Rocket Loader 由来の書き換え（ハッシュ付き module type や rocket-loader スクリプト）が無い
• Search ボタンでモーダルが開く
• 検索結果から記事へ遷移できる

参考: Cloudflare Docs — Configuration Rules settings（Rocket Loader）

https://developers.cloudflare.com/rules/configuration-rules/settings/