Cloudflareで始める：Cloudflare Workersを利用した静的サイトホスティング
はじめに
本記事では、Cloudflare WorkersとそのStatic Assets機能を使ってシンプルかつ低コストに静的サイトを構築する方法をハンズオン形式で解説します。
今回は複雑さを最低限に抑えるためReactやVue、SSGフレームワーク等を使わない最小構成で進めていきます。
注意事項
本記事での記載内容は2026年3月10日時点の情報に準拠します。
最新の仕様や料金等についてはCloudflareの公式ドキュメントを参照してください。
Cloudflareで始めるシリーズ
Cloudflareという会社の名前を聞いたことがある人でも、CloudflareはCDN屋さんやDDoS対策屋さん、WAF屋さん、あるいはDNS屋さんだと思っている思っている人は多いのではないでしょうか。
この(勝手に始めた)「Cloudflareで始める」シリーズでは、クラウド事業者としてのCloudflareの知られざる実力を暴いていきたいと思います！
Cloudflareがどのような会社か、他社と比較してどうなのか等は特に述べません。
前回の記事
前回のシリーズ記事はこちらです。
Cloudflare WorkersからLLMを使う - クリエーションライン株式会社
なぜCloudflare PagesではなくCloudflare Workersなのか？
これまで、静的サイトならCloudflare Pages、動的APIならCloudflare Workersと使い分けるのが一般的でした。
しかし現在はCloudflare WorkersでCloudflare Pagesのほとんどの機能を提供できるようになりました。
具体的な機能名としてはCloudflare WorkersのStatic Assets機能により、WorkersでもPagesとほぼ同じように静的ファイルを配信できるようになりました。
これにより、現在は「Wrangler（CLI）と wrangler.jsonc を使って、静的アセットもバックエンドAPIもすべてWorkersとして一元管理する」アプローチが可能となっていて、後から「SSRを追加したい」といった要望に対応しやすくなります。
もちろん、完全にCloudflare WorkersとCloudflare Pagesの差が無くなったわけではなく、Cloudflare Pagesの方が有利な点もあります。
ここでは割愛しますが、興味がある方は こちらで提供されている比較表 を参照してください。
Static Assets機能によるコスト削減の仕組み
Cloudflare Workersは、本来リクエスト数（実行回数）やCPU時間に対して課金されるサービスです。
以前は、Cloudflare Workers経由で画像やHTMLを配信しようとすると、リクエストのたびにWorker関数が起動し、実行回数が消費されてしまっていました。
しかし、現在のStatic Assets機能を使えば、この問題は解決します。wrangler.jsoncで静的ファイルのディレクトリを指定するだけで、CloudflareのエッジがWorker関数を一切起動させずに、直接ファイルを高速配信してくれます。
今回ハンズオンで行う「Workerコード（エッジ上で動作するJavaScript/TypeScript）を一切書かない」構成であれば、Workerの実行回数はゼロとなり、純粋な静的ファイルホスティングとして課金を劇的に抑えることが可能です。
具体的な課金体系としてはStatic Assetsのファイルを配信するだけであればEgress料金、ファイル容量料金も含め無料です。
Requests to static assets are free and unlimited.
https://developers.cloudflare.com/workers/static-assets/billing-and-limitations/
ただし、非常に寛大ではありますが一部制限はあります。
無料プランですと、例えば
- ファイル数は20,000まで
- 1ファイルあたり25MiBまで
等になります。動画を扱う場合や、巨大なプロジェクト等では引っかかるかもしれません。
参考: https://developers.cloudflare.com/workers/platform/limits/#static-assets
ハンズオン：極小構成で静的サイトをデプロイする
ReactやVue、SSGフレームワーク等を使わず、publicディレクトリと設定ファイルだけの最もシンプルな構成でデプロイしてみましょう。
前提条件
- Node.js (npm) がインストールされていること
- 検証ではNode.js 25.8.0を利用しましたが、18.20.0以上であればおそらく動作します。
- Cloudflare アカウントがあること(無料、有料問わず)
Step 1: プロジェクトの作成
適当な作業ディレクトリを作成し、移動します。今回は不要なボイラープレート（ひな形）コードを省くため、手動で最小限のファイルを作ります。
mkdir my-static-site
cd my-static-siteNode.jsのプロジェクトを作成し、Wrangler（CloudflareのCLIツール）をインストールします。
npm init -y
npm install wrangler --save-devStep 2: 静的ファイルの準備
公開用のディレクトリ（ここでは public）を作成し、適当な index.html を配置します。
mkdir public
touch public/index.htmlpublic/index.html の中身を以下のように記述します。
- public/index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Workers Pure Static Hosting</title> </head> <body> <h1>Hello from Cloudflare Workers Static Assets!</h1> <p>Workerスクリプトを持たない、極めてシンプルな静的ホスティング構成です。</p> </body> </html>
Step 3: wrangler.jsonc の設定
プロジェクトのルートディレクトリに wrangler.jsonc を作成し、以下のように記述します。現在はTOMLではなく、またはコメント付きのJSONC(JSON with Comments)で設定を書くのがモダンなアプローチです。
Cloudflare recommends using wrangler.jsonc for new projects, and some newer Wrangler features will only be available to projects using a JSON config file.
https://developers.cloudflare.com/workers/wrangler/configuration/
こちらが設定ファイルになります。
- wrangler.jsonc
{
"name": "my-static-site",
// compatibility_dateはランタイムのバージョン指定のようなものです
// 基本的に最新を指定しておけばドキュメント通りの動作になりますが、問題がある場合には古い版も指定できます
// 参考: https://developers.cloudflare.com/workers/configuration/compatibility-flags/
"compatibility_date": "2026-02-24",
// 下記の設定でWorkerを起動せずにエッジから直接配信できます。
"assets": {
"directory": "./public"
}
}
最終的にはこのようなプロジェクト構成になります。
.
├── node_modules/ (自動生成)
├── package-lock.json (自動生成)
├── package.json (自動生成)
├── public/
│ └── index.html
└── wrangler.jsoncStep 4: ローカルテストとデプロイ
Wranglerを使ってローカルで動作確認をします。
npx wrangler devを実行すると下記のような表示になります。
Proxy environment variables detected. We'll use your proxy for fetch requests.
⛅️ wrangler 4.71.0
───────────────────
╭──────────────────────────────────────────────────────────────────────╮
│ [b] open a browser [d] open devtools [c] clear console [x] to exit │
╰──────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
[wrangler:info] Ready on http://localhost:8787この状態でブラウザで http://localhost:8787/ にアクセスし、HTMLが表示されれば成功です。
問題なければ、以下のコマンドでCloudflareの本番環境へデプロイします。
npx wrangler deployコマンド実行後、表示に従いつつwranglerへのアクセス許可やデプロイ先アカウント等の設定を済ませてデプロイを完了させます。
(URL等、一部表示を伏せています)
Proxy environment variables detected. We'll use your proxy for fetch requests.
⛅️ wrangler 4.71.0
───────────────────
✘ [ERROR] Failed to fetch auth token: 400 Bad Request
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&client_id=****
Successfully logged in.
✔ Select an account › ****'s Account
🌀 Building list of assets...
✨ Read 1 file from the assets directory /****/my-static-site/public
🌀 Starting asset upload...
🌀 Found 1 new or modified static asset to upload. Proceeding with upload...
+ /index.html
Uploaded 1 of 1 asset
✨ Success! Uploaded 1 file (1.06 sec)
Total Upload: 0.31 KiB / gzip: 0.22 KiB
Uploaded my-static-site (10.35 sec)
Deployed my-static-site triggers (1.60 sec)
https://my-static-site.****.workers.dev
Current Version ID: ****
🪵 Logs were written to "/Users/****/Library/Preferences/.wrangler/logs/wrangler-****.log"払い出された *.workers.dev のURL(下から3行目辺り)にアクセスすれば、エッジから高速配信される静的サイトが閲覧できます！
まとめ
ここまででCloudflare WorkersとそのStatic Assets機能を使ってシンプルかつ低コストに静的サイトを構築できました。
ぜひ、Cloudflare Workersによる静的ホスティングを試してみてください！
次のステップ：本番運用に向けたヒント
今回のハンズオンでは最小構成での手動デプロイを行いましたが、実際のプロジェクトでは以下のような設定を追加することで、より実用的な運用が可能になります。
- カスタムドメインの設定: 独自のドメインをお持ちの場合、*.workers.dev ではなく、独自のドメインでサイトを公開できます。SSL/TLS証明書も自動で発行されます。
- Cloudflare Buildsによる自動デプロイ（CI/CD）
本番運用ではリポジトリへのプッシュをトリガーにした自動デプロイを行う現場もあります。これを実現するために、Cloudflareが標準で提供しているWorkers Buildsを活用するのがおすすめです。ダッシュボードからGitHubリポジトリを連携するだけでプッシュのたびに自動でビルドとデプロイが行われるCI/CD環境をCloudflare内で完結して構築できます。 - 動的機能（API）の追加 将来的にSSRやバックエンド等が必要になった場合でも、別サービスを立ち上げる必要はありません。同じ wrangler.jsonc に "main": "src/index.ts" を追加し、数行のTypeScriptを書くだけで、静的サイトの隣に強力なエッジAPIを併設できます。
脚注
米国およびその他の管轄区域において、Cloudflare、Cloudflareのロゴは、Cloudflare, Inc.の商標および/または登録商標です。
