くらし自動化ノート

更新日: ・ 自動化ノートの管理人

Cloudflare Pagesで静的サイトを0円で公開する(wranglerで直接アップロード)

HTMLを数ページ作ったあと、「これをどこに置けば、お金をかけずに公開できるのか」で手が止まることがあります。私は、家の用事の自動化をまとめたこのサイトを、Cloudflare Pagesの無料プランで公開しました。GitHubは使わず、手元のフォルダをwranglerというコマンドでそのままアップロードしています。

この記事では、その流れと、Claude Codeに作業を頼んだときに私がはまった点をまとめます。

Direct Uploadで公開するまで

  1. HTMLを出力する公開したいファイルを1つのフォルダにまとめる
  2. wranglerでログインブラウザでCloudflareのアカウントを許可する
  3. プロジェクトを作るpages project create(最初の1回だけ)
  4. アップロードするpages deploy(更新のたびにこれだけ)
最初の1回だけ3と4の両方を行い、2回目以降は4だけです。

無料プランでできること

Cloudflareの公式ドキュメントでは、Pagesの静的ファイルへのリクエストは「無料プランでも有料プランでも、無料で無制限」と説明されています。つまり、アクセスが増えても、静的なHTMLを配るだけなら料金は増えません。無料プランの主な制限は次のとおりです(公式の制限のページより)。

項目無料プランの上限
1サイトのファイル数20,000
1ファイルの大きさ25 MiB
1アカウントのプロジェクト数100
1プロジェクトのカスタムドメイン100

数ページのHTMLと画像のサイトなら、どれも十分に余裕があります。なお、料金や規約の細かい条件(たとえば広告を載せてよいか)は、この記事では確かめていません。気になる場合は、Cloudflareの規約を自分で読んでください。

Direct Uploadとは

Pagesの公開方法には、GitHubなどと連携して自動で公開する方法のほかに、作り終わったファイルをそのままアップロードする「Direct Upload」があります。公式ドキュメントでは、wranglerのコマンドで行う方法のほかに、ダッシュボードでファイルをドラッグ&ドロップする方法も紹介されています。私は、HTMLを自分のスクリプトで生成していて、Gitのリポジトリを公開用に作っていなかったので、wranglerを使いました。

wranglerの準備とログイン

wranglerはCloudflareのコマンドラインツールで、Node.jsが必要です。公式ドキュメントでは、プロジェクトごとに入れる方法が勧められています。

npm i -D wrangler@latest

私は使うときに呼び出す形(npx wrangler)で使っています。初回はログインが必要です。

npx wrangler login

ブラウザが開くので、Cloudflareのアカウントで許可します。私の環境では、この1回でログイン情報がPCに保存され、以後は聞かれませんでした。

プロジェクトを作って公開する

公式ドキュメントのコマンドは次の2つです。

# 最初の1回だけ
npx wrangler pages project create my-site --production-branch main

# 公開する(出力フォルダを指定)
npx wrangler pages deploy C:\path\to\dist --project-name my-site --branch main --commit-dirty=true

ここで使っているオプションは、公式のコマンド一覧では次のように説明されています。

本番ブランチと同じ名前のブランチ(ここでは main)に公開すると、プロジェクト名.pages.dev のアドレスが更新されます。別の名前のブランチに公開すると、ランダムな文字列が前に付いた別のアドレスで確認できます。--commit-dirty=true は、Gitのフォルダから実行したときに未コミットの警告が出ないよう、私は付けています。

プロジェクト名は、〇〇.pages.dev の〇〇になります。公開が終わるとwranglerが公開先のアドレスを表示するので、そのアドレスで実際に開けるかを確かめておくと安心です。

Claude Codeから実行すると「Workersに委譲」される

ここが、私がはまった所です。新しいサイトのプロジェクト作成をClaude Codeに頼んで pages project create を実行させたところ、wranglerが次のように表示して「Workersに委譲」し、そのまま失敗しました。

Delegating to the latest version of Cloudflare Pages, now part of Cloudflare Workers

wranglerの更新履歴(4.108.0)には、次の趣旨の説明がありました。AIコーディングエージェントが、まったく新しい、静的なだけのプロジェクトに対して wrangler pages deploy か wrangler pages project create を実行すると、Cloudflare PagesではなくWorkersの静的アセットに委譲する。--force を付けると、この委譲をやめてPagesに直接公開できる。

そこで私は、プロジェクトを作る最初の1回だけ --force を付けました。

npx wrangler pages project create my-site --production-branch main --force

プロジェクトができたあとの pages deploy には、--force を付けていません。更新履歴によると、その後の更新で、委譲するかどうかの判定はプロジェクトごとになりました。すでにあるプロジェクトへのコマンドはPagesのまま動き、新しいプロジェクトは、同じアカウントにほかのPagesのプロジェクトがあっても委譲されます。私のアカウントにも別のPagesのプロジェクトがありましたが、新しいプロジェクトは委譲されました。--force は最初の1回だけでよく、wranglerも成功したときにそう案内します。なお、4.108.0の説明では、AIではなく人が実行した場合は委譲の対象外です。

なお、Workersのほうでも静的なサイトは公開できます。公式ドキュメントにも「新しいプロジェクトはWorkersで始めるように」という案内があります。ただ、公式ドキュメントによると、Workersのアドレスは <Workerの名前>.<アカウントのサブドメイン>.workers.dev の形になり、アカウントごとのサブドメインが入ります。私はアドレスにアカウントの情報を出したくなかったので、〇〇.pages.dev の形になるPagesのほうを選びました。どちらが良いというより、アドレスをどうしたいかで決める話です。

あとからGit連携に切り替えられない

もう1つ、決める前に知っておきたい点があります。公式ドキュメントには、次のように書かれています。

If you choose Direct Upload, you cannot switch to Git integration later. You will have to create a new project with Git integration to use automatic deployments.

つまり、Direct Uploadで作ったプロジェクトは、あとからGit連携の自動公開に変えられません。変えたくなったら、新しいプロジェクトを作り直す必要があります。将来GitHubにソースを置いて、プッシュするたびに自動で公開したいなら、最初からGit連携で作るほうがよいでしょう。私は手元でHTMLを生成して出力フォルダをそのまま送るだけでよかったので、Direct Uploadで運用しています。

出力先はOneDriveの外に置く

HTMLの出力先は、OneDriveの同期対象の外にしています。ビルドのたびに多数のファイルが書き換わるフォルダを同期に巻き込みたくなかったためです。OneDriveの中に置いたPythonの仮想環境が自動実行で壊れた経験があり、その話はOneDriveの中にPythonの仮想環境(venv)を置くと、自動実行で壊れることがあるにまとめました。

更新のたびにやること

サイトを直したら、出力フォルダを作り直して、pages deploy を実行するだけです。プロジェクトの作成や --force は要りません。この作業を毎日動かしたいときは、WindowsのタスクスケジューラでClaude Codeを毎日自動で動かすの形が使えます。

まとめ

← 記事の一覧へ