[{"data":1,"prerenderedAt":472},["ShallowReactive",2],{"content-/cloudflare-pages-workers-static-assets":3,"all-pages-for-dir":450,"related-/cloudflare-pages-workers-static-assets":451,"og-image-/cloudflare-pages-workers-static-assets":471},{"id":4,"title":5,"body":6,"category":434,"concepts":434,"description":435,"extension":436,"meta":437,"navigation":438,"ogImage":434,"path":439,"project_name":434,"published":440,"publishedAt":441,"seo":442,"stem":443,"tags":444,"todo":434,"unpublished":440,"updatedAt":434,"__hash__":449},"pages/2026-07/2026-07-22/cloudflare-pages-workers-static-assets.md","Cloudflare PagesとWorkers Static Assetsの違い、エッジキャッシュが効く仕組み",{"type":7,"value":8,"toc":426},"minimark",[9,13,17,42,46,50,63,66,78,81,84,87,94,106,115,118,129,133,136,142,151,177,180,187,194,218,231,361,367,370,422],[10,11,5],"h1",{"id":12},"cloudflare-pagesとworkers-static-assetsの違いエッジキャッシュが効く仕組み",[14,15,16],"h2",{"id":16},"結論",[18,19,20,24,27,30],"ul",{},[21,22,23],"li",{},"2026年3月、Cloudflare Workersの「Static Assets」機能はPagesと機能面で並び、Cloudflareは新規プロジェクトにWorkersを使うことを推奨している。既存のPagesプロジェクトも引き続きサポートされ、移行を急ぐ必要はない。",[21,25,26],{},"Workers Static Assetsとして配信される静的ファイルへのリクエストは無料・無制限で、Workers本体のリクエスト課金（無料枠は1日10万件）にはカウントされない。カウントされるのは、Workerのコードが実際に実行されたリクエストだけである。",[21,28,29],{},"「Cloudflare Workersにデプロイする」といっても、ビルド時に生成した静的HTMLをアップロードするだけなら、リクエストのたびにサーバーサイドのコードが動いているわけではなく、CDNのエッジがファイルを返しているだけになる。これはCloudflare Pagesの仕組みと変わらない。",[21,31,32,33,37,38,41],{},"mdx-playground（このサイト）はNuxt 3 + @nuxt/content製で、nitroの",[34,35,36],"code",{},"cloudflare-pages-static","プリセットで全ページを事前生成し、Cloudflare Pagesにデプロイしている。GitHub Actions経由の自動デプロイは2026年1月に無効化しており、現在は手元から",[34,39,40],{},"wrangler","で直接デプロイしている。",[14,43,45],{"id":44},"cloudflare-pagesとworkers-static-assetsの関係","Cloudflare PagesとWorkers Static Assetsの関係",[47,48,49],"p",{},"Cloudflare Pagesは、GitリポジトリをつないでpushするだけでビルドとCDN配信を済ませる、静的サイトホスティング専用のプロダクトとして始まった。動的な処理が必要な場合は「Pages Functions」を使うが、これは内部的にCloudflare Workersのランタイム上で動いている。",[47,51,52,53,62],{},"Cloudflare Workersは元々サーバーレス実行環境（Workers自体）として提供されていたが、2024年後半に静的ファイルを直接配信できる「Static Assets」機能が追加された。",[54,55,61],"a",{"href":56,"target":57,"rel":58},"https://developers.cloudflare.com/workers/static-assets/migration-guides/migrate-from-pages/","_blank",[59,60],"noopener","noreferrer","Cloudflare公式のPages移行ガイド","によると、2026年3月時点でWorkers Static Assetsは静的ファイル配信・SSR・カスタムドメインの機能面でPagesと肩を並べており、Cloudflareは新規プロジェクトについてPagesではなくWorkersでのデプロイを推奨している。",[47,64,65],{},"実務上の違いを整理すると、次のようになる。",[67,68,69,74],"figure",{},[70,71],"img",{"src":72,"alt":73},"/images/cloudflare-pages-workers-static-assets/figure-02.svg","Cloudflare PagesとWorkers Static Assetsは静的配信の課金・キャッシュの仕組みでは同じで、違うのは2026年時点でCloudflareがどちらを新規プロジェクトの標準として案内しているかだけ",[75,76,77],"figcaption",{},"図1: 静的配信の課金・キャッシュの仕組みはPagesとWorkersで同じ。違うのは新規プロジェクトでの案内だけ",[47,79,80],{},"つまり、既存のPagesプロジェクトを急いでWorkersに移す理由はないが、これから新規に静的サイトをCloudflareにデプロイするなら、選択肢としてWorkers Static Assetsも並んで候補に上がる状況になっている。",[14,82,83],{"id":83},"静的サイトでオリジンが叩かれない仕組み",[47,85,86],{},"「静的サイトをCloudflareで配信すると転送量が減る」という話の実体は、CDNのエッジキャッシュとCloudflareの課金体系の組み合わせで説明できる。",[47,88,89,93],{},[90,91,92],"strong",{},"キャッシュの挙動",": Cloudflareは静的アセットをネットワーク全体で自動的にキャッシュする。あるエッジロケーションが最初にリクエストを受けるとそこでキャッシュされ、以降のリクエストは、オリジンまで戻らずに、階層型キャッシュ（Tiered Cache）の仕組みによって近くのキャッシュ拠点から返される。",[47,95,96,99,100,105],{},[90,97,98],{},"課金の挙動",": ",[54,101,104],{"href":102,"target":57,"rel":103},"https://developers.cloudflare.com/workers/static-assets/billing-and-limitations",[59,60],"Cloudflare公式のWorkers Static Assets課金ドキュメント","によると、静的アセットへのリクエストは無料・無制限で、Workers本体のリクエスト課金（無料枠は1日10万件）にはカウントされない。課金対象になるのは、サーバーサイドのWorkerコードが実際に呼び出された場合だけである。またCloudflare Pagesについても、エグレス（転送）に対する課金は発生しない。",[67,107,108,112],{},[70,109],{"src":110,"alt":111},"/images/cloudflare-pages-workers-static-assets/figure-01.svg","初回アクセスはCloudflareエッジからオリジンまでリクエストが届くが、2回目以降のアクセスはエッジのキャッシュだけで完結しオリジンには届かない",[75,113,114],{},"図2: 初回だけオリジンに届き、2回目以降はエッジのキャッシュだけで完結する",[47,116,117],{},"この2つを組み合わせると、静的サイトをCloudflare上でホストする限り、リクエストの大半はオリジンサーバー（ビルド元のインフラ）まで到達せず、エッジのキャッシュとStatic Assetsの無料枠内で完結する。「転送量が大きく削減される」という体感は、この仕組みに基づいている。",[47,119,120,121,124,125,128],{},"なお、mdx-playgroundの",[34,122,123],{},"apps/web/public/","には",[34,126,127],{},"_headers","ファイルが存在せず、Cache-Controlの明示的なチューニングはしていない。現状はCloudflareのデフォルトのキャッシュ挙動に任せている状態で、キャッシュ期間の延長やTiered Cachingの明示設定は未着手の余地として残っている。",[14,130,132],{"id":131},"デプロイ経路-github-actionsを使う場合使わない場合","デプロイ経路: GitHub Actionsを使う場合・使わない場合",[47,134,135],{},"GitHub Actionsは、CI/CDパイプラインのトリガーの一つに過ぎない。「AIで記事を作ってデプロイまで自動化する」という文脈では、GitHub ActionsのスケジュールトリガーでAIエージェントを無人起動し、記事生成・コミット・デプロイまでを人の介在なしにループさせる構成を指すことが多い。これは、開発者がClaude CodeやCodexのようなCLIツールと対話しながら記事を作る運用とは別のモデルで、「人が起動する対話型のAI」と「人手を介さず定期実行される無人のAI」という違いがある。",[47,137,138,139,141],{},"mdx-playgroundでは現在、GitHub Actions経由の自動デプロイを使っていない。2026年1月に、SSGビルド時のメモリ使用量がCI環境の上限を超える問題が発生したため、GitHub Actionsでの自動デプロイを無効化し、手動トリガーのみに切り替えた。現在の運用は次のコマンドで、ローカル環境でビルドしてから",[34,140,40],{},"で直接Cloudflare Pagesにデプロイする形になっている。",[67,143,144,148],{},[70,145],{"src":146,"alt":147},"/images/cloudflare-pages-workers-static-assets/figure-03.svg","mdx-playgroundはローカルでビルドしてからwranglerで直接Cloudflare Pagesにデプロイしている。GitHub Actions経由の自動デプロイは2026年1月にCI環境のメモリ上限の問題で無効化した",[75,149,150],{},"図3: mdx-playgroundは手元からwranglerで直接デプロイする。GitHub Actions自動デプロイは2026年1月に無効化済み",[152,153,158],"pre",{"className":154,"code":155,"language":156,"meta":157,"style":157},"language-bash shiki shiki-themes vitesse-light vitesse-light","pnpm deploy:cloudflare  # ローカルビルド + Cloudflare直接デプロイ\n","bash","",[34,159,160],{"__ignoreMap":157},[161,162,165,169,173],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"senZ8","pnpm",[161,170,172],{"class":171},"sdGka"," deploy:cloudflare",[161,174,176],{"class":175},"sxvE3","  # ローカルビルド + Cloudflare直接デプロイ\n",[14,178,179],{"id":179},"mdx-playgroundの実際の構成",[47,181,182,183,186],{},"このサイトはAstroではなく、Nuxt 3 + @nuxt/contentで構築されている。コンテンツのインデックスにはSQLiteを使い、スキーマは",[34,184,185],{},"content.config.ts","でZodにより定義している。",[47,188,189,190,193],{},"デプロイ先はCloudflare Pagesで、",[34,191,192],{},"wrangler.toml","で次のように設定している。",[152,195,199],{"className":196,"code":197,"language":198,"meta":157,"style":157},"language-toml shiki shiki-themes vitesse-light vitesse-light","name = \"mdx-playground\"\ncompatibility_date = \"2025-10-03\"\npages_build_output_dir = \"./dist\"\n","toml",[34,200,201,206,212],{"__ignoreMap":157},[161,202,203],{"class":163,"line":164},[161,204,205],{},"name = \"mdx-playground\"\n",[161,207,209],{"class":163,"line":208},2,[161,210,211],{},"compatibility_date = \"2025-10-03\"\n",[161,213,215],{"class":163,"line":214},3,[161,216,217],{},"pages_build_output_dir = \"./dist\"\n",[47,219,220,223,224,226,227,230],{},[34,221,222],{},"nuxt.config.ts","のnitro設定では",[34,225,36],{},"プリセットを使い、",[34,228,229],{},"prerender","でほぼ全ページを事前生成している。",[152,232,236],{"className":233,"code":234,"language":235,"meta":157,"style":157},"language-ts shiki shiki-themes vitesse-light vitesse-light","nitro: {\n  preset: \"cloudflare-pages-static\",\n  prerender: {\n    crawlLinks: true,\n    routes: ['/blog', '/', '/beat-monitoring', '/memory-makers'],\n    // ...\n  }\n}\n","ts",[34,237,238,250,269,278,292,343,349,355],{"__ignoreMap":157},[161,239,240,243,247],{"class":163,"line":164},[161,241,242],{"class":167},"nitro",[161,244,246],{"class":245},"shFtX",":",[161,248,249],{"class":245}," {\n",[161,251,252,255,257,261,263,266],{"class":163,"line":208},[161,253,254],{"class":167},"  preset",[161,256,246],{"class":245},[161,258,260],{"class":259},"sMJiu"," \"",[161,262,36],{"class":171},[161,264,265],{"class":259},"\"",[161,267,268],{"class":245},",\n",[161,270,271,274,276],{"class":163,"line":214},[161,272,273],{"class":167},"  prerender",[161,275,246],{"class":245},[161,277,249],{"class":245},[161,279,281,284,286,290],{"class":163,"line":280},4,[161,282,283],{"class":167},"    crawlLinks",[161,285,246],{"class":245},[161,287,289],{"class":288},"sHkkW"," true",[161,291,268],{"class":245},[161,293,295,298,300,303,306,309,311,314,317,320,322,324,326,329,331,333,335,338,340],{"class":163,"line":294},5,[161,296,297],{"class":167},"    routes",[161,299,246],{"class":245},[161,301,302],{"class":245}," [",[161,304,305],{"class":259},"'",[161,307,308],{"class":171},"/blog",[161,310,305],{"class":259},[161,312,313],{"class":245},",",[161,315,316],{"class":259}," '",[161,318,319],{"class":171},"/",[161,321,305],{"class":259},[161,323,313],{"class":245},[161,325,316],{"class":259},[161,327,328],{"class":171},"/beat-monitoring",[161,330,305],{"class":259},[161,332,313],{"class":245},[161,334,316],{"class":259},[161,336,337],{"class":171},"/memory-makers",[161,339,305],{"class":259},[161,341,342],{"class":245},"],\n",[161,344,346],{"class":163,"line":345},6,[161,347,348],{"class":175},"    // ...\n",[161,350,352],{"class":163,"line":351},7,[161,353,354],{"class":245},"  }\n",[161,356,358],{"class":163,"line":357},8,[161,359,360],{"class":245},"}\n",[47,362,363,366],{},[34,364,365],{},"crawlLinks: true","により、指定したルートからリンクをたどれるページも含めてビルド時にHTMLとして書き出す。結果として、リクエストごとにサーバーサイドのレンダリング処理が走ることはなく、Cloudflare Pagesは生成済みの静的ファイルを配信するだけになる。",[14,368,369],{"id":369},"まとめ",[371,372,373,386],"table",{},[374,375,376],"thead",{},[377,378,379,383],"tr",{},[380,381,382],"th",{},"疑問",[380,384,385],{},"事実",[387,388,389,398,406,414],"tbody",{},[377,390,391,395],{},[392,393,394],"td",{},"Astroで静的配信、はmdx-playgroundと同じか",[392,396,397],{},"骨格（SSG + Cloudflareでの静的配信）は近いが、フレームワークはAstroではなくNuxt 3",[377,399,400,403],{},[392,401,402],{},"Cloudflare Workersに乗せる、と静的配信は別物か",[392,404,405],{},"Workers Static Assetsとして静的ファイルを配信する限り、リクエストの課金・挙動はCloudflare Pagesとほぼ同じ",[377,407,408,411],{},[392,409,410],{},"GitHub Actions経由で全部AI、の意味",[392,412,413],{},"スケジュールトリガーでAIエージェントを無人実行し、生成からデプロイまで人手を介さずループさせる構成を指す。mdx-playgroundは現在この経路を使っていない",[377,415,416,419],{},[392,417,418],{},"エッジキャッシュで転送量が減る、の仕組み",[392,420,421],{},"Cloudflareの自動キャッシュ＋階層型キャッシュにより、多くのリクエストがオリジンまで届かない。静的アセットへのリクエストはWorkersの無料枠にもカウントされない",[423,424,425],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}",{"title":157,"searchDepth":208,"depth":208,"links":427},[428,429,430,431,432,433],{"id":16,"depth":208,"text":16},{"id":44,"depth":208,"text":45},{"id":83,"depth":208,"text":83},{"id":131,"depth":208,"text":132},{"id":179,"depth":208,"text":179},{"id":369,"depth":208,"text":369},null,"Cloudflare PagesとWorkers Static Assetsの関係、静的サイトでオリジンが叩かれない仕組み、GitHub Actionsとデプロイの関係を、mdx-playgroundの実際の設定を例に整理する","md",{},true,"/cloudflare-pages-workers-static-assets",false,"2026-07-22T00:00:00.000Z",{"title":5,"description":435},"2026-07/2026-07-22/cloudflare-pages-workers-static-assets",[445,446,447,448],"cloudflare","nuxt","インフラ","デプロイ","AiwwV3_NEvV42IiWE9lbIPcn6UcZ7M1glKywZB03LFc",[],[452,456,459,463,467],{"title":453,"path":454,"publishedAt":455},"Cloudflare Pages はもう Workers の中に住んでいる ― Static Assets 統合後の地図","/cloudflare-pages-to-workers-static-assets","2026-06-29T00:00:00.000Z",{"title":457,"path":458,"publishedAt":441},"Webサービスの技術構成 2026年版 — Vue.js/Nuxt/Astroの使い分けとその理由","/web-tech-stack-2026",{"title":460,"path":461,"publishedAt":462},"Nuxt の pnpm generate を measure-deploy.ps1 でフェーズ別に計測した","/nuxt-build-deploy-time-measurement","2026-06-04T00:00:00.000Z",{"title":464,"path":465,"publishedAt":466},"非公開記事一覧をGoogleにインデックスさせない仕組みを点検した話","/unpublished-noindex","2026-06-01T00:00:00.000Z",{"title":468,"path":469,"publishedAt":470},"912件の自己ループリダイレクトとOG画像署名切れを一気に直した日 — 本番障害2件をAIに調査させて根本原因まで詰めた記録","/og-image-redirect-loop-fix","2026-05-28T00:00:00.000Z","https://log.eurekapu.com/og/blog/cloudflare-pages-workers-static-assets.png?v=2026-07-22T00%3A00%3A00.000Z&title=Cloudflare%20Pages%E3%81%A8Workers%20Static%20Assets%E3%81%AE%E9%81%95%E3%81%84%E3%80%81%E3%82%A8%E3%83%83%E3%82%B8%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%8C%E5%8A%B9%E3%81%8F%E4%BB%95%E7%B5%84%E3%81%BF&author=Kei%20Komatsu&sig=e441da6e5b8bbf9c",1784705236061]