Cloudflare Pages で静的サイトを無料公開する手順

この方法の特徴

Cloudflare Pages には、GitHub と連携して自動で公開する方法と、パソコンから直接ファイルをアップロードする方法があります。この記事では、後者の「直接アップロード」を説明します。GitHub を使わなくてよいので、個人で手早く公開したい場合に向いています。

私はこの方法で、広告を載せるサイトを含む複数のサイトを公開・更新しています。更新するときは、ビルドと公開をまとめたバッチファイルをダブルクリックするだけにしています。

用語の説明

• Wrangler（ラングラー）：Cloudflare が公式に出しているコマンドのツール。サイトの公開などをコマンドで行える
• npx：Node.js に付いてくるコマンド。ツールをインストールしなくても、その場で実行できる
• プロジェクト：Cloudflare Pages の中での、サイト1つ分の単位。プロジェクト名が URL の一部になる
• dist フォルダ：Vite でビルドしたときに、公開用のファイルが入るフォルダ

事前に用意するもの

次の3つを用意します。

• Cloudflare のアカウント（無料。メールアドレスで作成できる）
• Node.js（パソコンにインストールしておく。npx コマンドを使うため）
• ビルド済みのサイトのファイル（Vite なら npm run build で dist フォルダにできる）

初めて公開する手順

コマンドプロンプトでサイトのフォルダに移動し、次のコマンドを順に実行します。初回は、ブラウザが開いて Cloudflare へのログインと許可を求められるので、内容を確認して許可します。

1. プロジェクトを作る（プロジェクト名がそのまま URL になる。例：my-site → my-site.pages.dev）
2. dist フォルダの中身をアップロードする
3. 表示された URL をブラウザで開いて確認する

npx wrangler pages project create my-site ^
  --production-branch=main

npx wrangler pages deploy dist ^
  --project-name=my-site --branch=main

2回目以降の更新

サイトを直したら、もう一度ビルドして、同じ deploy のコマンドを実行するだけです。私の環境では、変更のあったファイルだけがアップロードされ、すぐに終わります。

私は、ビルドと公開をまとめたバッチファイルを作り、ダブルクリックで公開できるようにしています。ビルドが失敗したときは公開しないようにしておくと、壊れたサイトを公開する事故を防げます。

call npm run build
if errorlevel 1 (
  echo Build failed. Deploy was cancelled.
  pause
  exit /b 1
)
call npx -y wrangler pages deploy dist ^
  --project-name=my-site --branch=main

よくあるつまずき

• プロジェクト名は後から変えにくい。URL になるので、最初によく考えて決める
• バッチファイルに日本語を書くと文字化けすることがある。英語（半角の文字）だけで書くと安全
• 公開直後にアクセスすると、古い表示が残っていることがある。少し待つか、ブラウザで再読み込みする
• dist ではなく、サイトのフォルダ全体をアップロードしてしまう。公開するのはビルド後のフォルダだけ
• React のサイトで、トップ以外のページを直接開くと表示されない。事前レンダリングで各ページの HTML を作っておくと防げる

公開後の確認のチェックリスト

公開したら、次の点をブラウザで確認しておくと安心です。

• トップページが表示されるか
• トップ以外のページの URL を直接開いても表示されるか
• スマートフォンで見て、文字が小さすぎたり、横にはみ出したりしていないか
• sitemap.xml と robots.txt が開けるか
• 画像やアイコンが表示されているか

私の場合

私は Vite と React で作ったサイトを、この方法で公開しています。最初は毎回コマンドを手で打っていましたが、サイトが増えてくると打ち間違いが心配になりました。そこで、サイトごとに公開用のバッチファイルを作り、ダブルクリックで済むようにしました。

また、無料の URL（〇〇.pages.dev）のまま運用しています。独自ドメインを使わなくても、検索への登録や広告の申し込みはできました。

次にやること

公開できたら、次は Google の検索に見つけてもらう準備です。「Google Search Console にサイトを登録する」の記事で、登録とサイトマップの送信を説明しています。あわせて、Cloudflare Web Analytics を有効にしておくと、どのページが読まれているかが分かるようになります。

ほかの記事