コンテンツにスキップ
個人開発者のための Cloudflare CLI 完全攻略ガイド

第3章: 最速でフロントエンドを公開（Pages実践チュートリアル）

本章では、静的HTMLやVite/Reactなどのモダンフロントエンドを、Cloudflare Pages を使ってコマンドライン（CLI）から全世界へ一瞬でデプロイするハンズオンを実施します。

本チュートリアルのゴール

  • 静的HTML/CSSを10秒で世界中へ公開するクイックデプロイ
  • Vite（React/TypeScript等）のビルド成果物をCLIから本番デプロイ
  • プレビュー環境（ブランチプレビュー）を使った安全なリリース前検証
  • CLIからPagesプロジェクトを一覧・管理するコマンドの習得
【デプロイの流れ】
[Step 1] 静的ファイルの準備（または npm run build）
   ↓
[Step 2] wrangler pages deploy コマンドの実行
   ↓
[Step 3] 発行された pages.dev URL でブラウザ確認
   ↓
[Step 4] ブランチ指定プレビュー環境（--branch）の検証

Step 1: 最小構成のHTMLで即時デプロイ体験

まずは「どれほど高速にWebサイトが立ち上がるか」を体験するため、最小構成のディレクトリを作成します。

Terminal window
# 作業ディレクトリの作成
mkdir quick-pages-demo && cd quick-pages-demo


# index.html の作成
cat << 'EOF' > index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Cloudflare Pages CLI Demo</title>
  <style>
    body { font-family: sans-serif; display: grid; place-content: center; height: 100vh; margin: 0; background: #0f172a; color: #f8fafc; }
    h1 { color: #f38020; font-size: 2.5rem; }
    p { color: #94a3b8; font-size: 1.2rem; }
  </style>
</head>
<body>
  <h1>⚡️ Cloudflare Pages デプロイ成功！</h1>
  <p>世界330都市以上のエッジから配信されています。</p>
</body>
</html>
EOF

Step 2: wrangler pages deploy の実行

以下の1コマンドでデプロイが完了します。カレントディレクトリ（.）を公開フォルダとして指定します。

Terminal window
npx wrangler pages deploy . --project-name=my-quick-demo

対話プロンプト（初回のみ）

? A project named 'my-quick-demo' doesn't exist. Do you want to create it?
❯ Yes
? What would you like the production branch to be? (Default: main)
❯ main

初回はプロジェクトが存在しないため、自動作成の確認が出ます。「Yes」を選択し、本番ブランチ名は「main」でEnterを押します。

アップロード完了出力

✨ Success! Uploaded 1 files (1.12 sec)


✨ Deployment complete! Take a peek over at
https://xxxxxx.my-quick-demo.pages.dev

ターミナルに表示されたURLをブラウザで開いてみてください。完全なHTTPS（SSL/TLS）対応・HTTP/3対応で、世界中どこからでもミリ秒単位で高速表示されます。

Step 3: Vite / React / Astro アプリのデプロイ

実際の個人開発では、React、Vue、Svelte、Astroなどのフレームワークを使うことが大半です。 この場合、ビルド成果物が出力されるフォルダ（dist や build） を指定します。

例: Viteプロジェクトの場合

Terminal window
# 1. フロントエンドのビルド
npm run build


# 2. dist フォルダをデプロイ
npx wrangler pages deploy dist --project-name=my-react-app --commit-dirty=true

[!TIP] --commit-dirty=true オプション
Gitの未コミット差分がある状態でも警告を出さずにデプロイを進めたい場合に便利です。

Step 4: プレビュー環境の活用（ブランチプレビュー）

Cloudflare Pagesの大きな特徴は、本番環境を汚さずにレビュー用の一時URLを発行できる点です。

Terminal window
# 本番環境（production）へのデプロイ
npx wrangler pages deploy dist --project-name=my-react-app --branch=main


# ステージング/レビュー用のデプロイ（preview）
npx wrangler pages deploy dist --project-name=my-react-app --branch=feat-redesign

--branch に main 以外の名前（例: feat-redesign）を指定すると、以下のような固有のプレビューURLが発行されます。

https://feat-redesign.my-react-app.pages.dev

このURLをテスターやスマホで確認し、問題がなければ main ブランチとして再デプロイする運用が可能です。

Step 5: プロジェクト管理の主要コマンド

Terminal window
# 作成済み Pages プロジェクトの一覧表示
npx wrangler pages project list


# 特定プロジェクトのデプロイ履歴を確認
npx wrangler pages deployment list --project-name=my-react-app


# 不要になったプロジェクトの削除
npx wrangler pages project delete my-quick-demo

まとめ

  • 手軽さ: ディレクトリを指定して npx wrangler pages deploy <DIR> を叩くだけ。
  • 安心感: --branch オプションで即座にプレビュー環境が作れ、本番事故を防げる。
  • コストゼロ: 個人開発において、月間数百万リクエスト規模でも帯域幅・転送量課金は一切かかりません。

次章（第4章・第5章）で学んだ Hono / D1 と組み合わせることで、「Pages（フロント） ＋ Workers（API） ＋ D1（DB）」 のフルスタックサーバーレス構成が完成します。

💡 用語解説コラム

[!NOTE] SPA (Single Page Application)
単一のHTMLファイルを読み込み、JavaScriptで画面を動的に書き換えるWebアプリ（React, Vue等）。PagesはSPAのルーティング設定（404時にindex.htmlを返す等）も標準でサポートしています。

[!NOTE] Jamstack
JavaScript、API、プリレンダリングされたMarkup（HTML）で構成されるモダンWebアーキテクチャ。高速、安全、低コストで運用できるためPagesと極めて相性が良いです。