Cloudflare Workers で静的サイトを独自サブドメインに無料公開する手順（wrangler 4 系）

独自ドメインを Cloudflare で管理していると、「ちょっとしたサイトを xxx.example.com で出したい」ということがよくあります。このブログもそうやって公開しています。

以前は Cloudflare Pages を使うのが定番でしたが、いまは Workers の静的アセット（Static Assets） を使うと、設定ファイル 1 枚とコマンド 1 つで公開できます。ここでは実際にやった手順を、つまずいた所も含めてまとめます。

この方法が向いているもの

素の HTML/CSS/JS だけのサイト
Astro・Vite などで dist/ に書き出す静的サイト
ドメインの DNS がすでに Cloudflare にある

サーバー側の処理がいらないなら、Worker のスクリプトは書かなくて大丈夫です。静的アセットだけのリクエストは無料で、回数の上限もありません（2026年11月時点の Cloudflare の料金表による）。

用意するもの

Cloudflare アカウントと、そこに追加済みのドメイン（例: example.com）
Node.js（LTS 版）
公開したいファイル一式（例: public/ や dist/）

1. wrangler を入れてログインする

プロジェクトのフォルダで wrangler を開発用依存として入れます。グローバルに入れるより、プロジェクトごとに版を固定しておく方があとで困りません。

npm install -D wrangler
npx wrangler login

login を実行するとブラウザが開くので、Cloudflare にログインして許可します。

Windows の PowerShell で npx が動かないとき

「このシステムではスクリプトの実行が無効になっているため…」と出る場合は、npx.ps1 が実行ポリシーで止められています。npx.cmd wrangler login のように .cmd を付けて呼ぶ と、ポリシーを変えずに動きます。

2. wrangler.jsonc を書く

プロジェクト直下に wrangler.jsonc を作ります。必要なのはこれだけです。

{
  "name": "my-site",                 // Worker の名前（アカウント内で重複しない英数字）
  "compatibility_date": "2026-11-13",
  "assets": {
    "directory": "dist",             // 公開するフォルダ
    "not_found_handling": "404-page" // 無い URL には 404.html を返す
  },
  "routes": [
    { "pattern": "my-site.example.com", "custom_domain": true }
  ]
}

ポイントは 3 つです。

assets.directory

公開するフォルダを指定します。素の HTML なら public、Astro なら dist です。ここに入っているファイルが そのまま全部公開される ので、メモや下書きを置かないようにしてください。除外したいファイルは、そのフォルダに .assetsignore を置いて .gitignore と同じ書き方で指定できます。

not_found_handling

"404-page"：存在しない URL に 404.html を返す（ブログや普通のサイト向け）
"single-page-application"：全部 index.html を返す（React などの SPA 向け）

routes と custom_domain

"custom_domain": true を付けると、デプロイ時に DNS レコードと SSL 証明書を自動で作ってくれます。DNS の画面で CNAME を手で足す必要はありません。

3. デプロイする

npx wrangler deploy

Astro などビルドが必要なものは、先にビルドしてからです。package.json にまとめておくと楽です。

"scripts": {
  "deploy": "astro build && wrangler deploy"
}

初回は証明書の発行に少し時間がかかることがあります。数分待ってから https://my-site.example.com を開いて確認しましょう。

つまずいた所

同じ名前の DNS レコードがすでにあると失敗する

custom_domain は DNS レコードを自分で作るので、同じホスト名のレコードが既にあるとエラーになります。以前ほかのサービス向けに作ったレコードが残っていないか、DNS の画面で確認してください。消すときは、そのレコードがほかで使われていないかを必ず確かめてから。

`pages project create` が思った動きをしなかった

手元の環境（wrangler 4.162）で、Pages のつもりで wrangler pages project create を実行したところ、Workers 向けの wrangler.jsonc が自動で作られ、.gitignore まで書き換えられました。新しく作るなら、最初から自分で wrangler.jsonc を書いて wrangler deploy する のが一番迷いません。

workers.dev の URL も一緒に公開される

既定では my-site.<アカウント名>.workers.dev でも見られる状態になります。独自ドメインだけにしたいときは、wrangler.jsonc に "workers_dev": false を足します。

ファイル数の上限

無料プランでは 1 回のデプロイで扱えるファイル数に上限があります（2026年11月時点で 20,000 ファイル、1 ファイル 25 MiB まで）。画像を大量に置くサイトでは気にしておきましょう。

まとめ

npm install -D wrangler と npx wrangler login
wrangler.jsonc に assets.directory と routes（custom_domain: true）を書く
npx wrangler deploy

この 3 つで、DNS を手で触らずにサブドメインのサイトが立ち上がります。小さな企画サイトやツールの紹介ページを次々に出したいときに便利です。