このサイトには、記事を探すための検索があります。「検索機能」と聞くと、入力するたびに裏側でサーバとデータベースが動く、いわゆる動的なサイトを思い浮かべる方が多いかもしれません。ところがこのサイトは、公開されたあとは「動かないただのファイル」の集まりで、検索もブラウザの中だけで完結します。だから配信先を特定のサービスに縛られず、いわゆる CDN であればどれでも同じように配れます。

このサイトは @nano-cms/core という CMS で運用しています。このサイト自体が、その動作例です。この記事では「検索があるのに、なぜどの CDN でも配れるのか」を、仕組みからたどって説明します。

前提として、このサイトは公開されたあとは完成済みのファイル（HTML・画像など）をそのまま返すだけの静的サイトです。表示のたびの計算がないので速く、動くプログラムがないので止まりにくく、狙われる隙も小さくなります。なぜそうなるのかの数字を含めた詳しい説明は なぜ速くて、落ちなくて、狙われにくいのか ― nano-cmsの静的配信 を、公開を押すと記事が「プログラム」ではなく「ファイル」になる仕組みは 記事は「プログラム」ではなく「ファイル」として届く をご覧ください。この記事では、その静的サイトに「検索」が乗っても配信先を選ばずに済む、という一点に絞ってお話しします。

「検索があるなら動的でしょう？」という思い込み

静的サイトの話をすると、よく返ってくるのが「でも検索はサーバが要るよね？」という反応です。検索とは、データベースに問い合わせて結果を返す機能だ、と考えられているからです。

実際には、このサイトの検索はサーバにもデータベースにも一切問い合わせません。使っているのは、小さな JavaScript が一つと、軽い一覧ファイルが一つだけです。検索の処理は、すべて閲覧者のブラウザの中で起きています。

検索のしくみ（サーバも DB も動かない）

仕組みは二段階に分かれます。

公開時（1回だけ）: 記事を公開するとき、見出し・要約・日付・カテゴリだけを集めた軽い一覧ファイルを一つ作っておきます。本文の全文は入れないので、とても軽いファイルです。

閲覧時（毎回・ブラウザの中）: 閲覧者が検索すると、ブラウザがその一覧ファイルを読み込み、入力された言葉を含む記事をその場で絞り込んで表示します。絞り込みはブラウザの中の JavaScript がやるので、サーバへの往復もデータベース検索も発生しません。検索した言葉は URL にも残る（?s=…）ので、リンクを共有したり再読み込みしても同じ結果が再現できます。

一覧ファイルの中身は、たとえばこのような形です。記事 1 本あたり、見出しと短い要約などが並んでいるだけです。

{
  "articles": [
    {
      "slug": "...",
      "title": "記事の見出し",
      "summary": "本文の冒頭をすこしだけ",
      "categoryName": "技術情報",
      "publishDate": "2026-06-20"
    }
  ]
}

だから「どの CDN でも」載る

ここまでをまとめると、このサイトを構成しているのは、HTML・画像・JavaScript・一覧ファイルといった、すべて完成済みのファイルだけです。配信側に求めることは「これらのファイルを世界中から速く返す」こと、ただそれだけです。

これは CDN（世界中に配信網を持つサービス）が、もともと最も得意とすることです。だから、特定の CDN でしか動かない部分がありません。次の表のとおり、主要な CDN はどれでも、このサイトをそのまま配れます。

必要なこと	Cloudflare	AWS CloudFront	Akamai	Fastly
HTML・画像などの静的ファイルをエッジから配信	○	○	○	○
記事検索（軽い一覧ファイルをブラウザが読んで絞り込み）	○ ※	○ ※	○ ※	○ ※
公開後に動くサーバ・データベース	不要	不要	不要	不要
独自ドメイン＋HTTPS	○	○	○	○
Brotli／gzip 圧縮（転送量の節約）	自動	自動	自動	自動

※ 検索は「ただの静的ファイル＋ブラウザの中の処理」で完結するので、CDN 側に特別な機能は要りません。だから、どの CDN でも同じように○になります。この行こそが、この記事でいちばん伝えたいところです。

もっと凝るなら、エッジで動かす道もある

最近の CDN は、ファイルを返すだけでなく、世界中の配信拠点（エッジ）で小さなプログラムを動かしたり、データを置いておいたりも出来ます。もし記事が何万件にもなって、一覧ファイルをブラウザに丸ごと渡すのが重くなってきたら、検索をエッジ側で動かす作り方へ切り替えることも出来ます。その手段は、主要な CDN に一通りそろっています。

CDN	エッジでプログラムを動かす仕組み	エッジのデータ置き場
Cloudflare	Workers	KV／D1／R2
AWS CloudFront	CloudFront Functions／Lambda@Edge	KeyValueStore／DynamoDB
Akamai	EdgeWorkers	EdgeKV
Fastly	Compute	KV Store

つまり「エッジで動的に検索する」ことも、今ではどの CDN でも出来ます。ただしこのサイトは、そこまでは必要ありません（ブラウザの中の絞り込みで十分に軽いからです）。やろうと思えばどの CDN でも出来る、という余地を残したうえで、いまは一番シンプルな形を選んでいる、ということです。

では、なぜ実際は Cloudflare なのか

このサイトの配信には Cloudflare を使っています。ただしそれは「Cloudflare でしか出来ないから」ではありません。理由は運用のしやすさです。公開を押してから世界に反映されるまでが一つの操作で完結し、変更が新しい版へ切り替わる形で素早く反映されます。

同じ構成は、ほかの CDN でも組めます。組み方は各社それぞれで、手順の手間に違いはありますが、配信できる・できないという差ではありません。どれを選んでも、このサイトは静的なまま、検索つきで配れます。

検索のような一見「動的」に見える機能でも、見出しと要約を静的な一覧ファイルにまとめ、絞り込みをブラウザ側に任せれば、サイト全体を静的なまま保てます。その結果、配信先の CDN まで自由に選べます。このサイト自体が、その作り方で動いている一例です。

---

nano-cms の全体像は 似ているようで、公開後がまるで違う ― nano-cmsの選びどころ でまとめています。あわせてご覧ください。