Wrangler CLIで最初のCloudflare Pagesを作成・デプロイする

Cloudflareアカウントを作成した後にまず体験したいのが、自作のWebサイトを世界中に展開するCloudflare Pagesの超高速デプロイです。世界300以上の都市にあるエッジデータセンターから配信されるため、圧倒的な低遅延と耐障害性を無料で手に入れることができます。

Webダッシュボード上での手動アップロードも可能ですが、公式のWrangler CLIを活用することで、開発からCI/CD自動デプロイまでスムーズなワークフローを構築できます。

本記事では、Wrangler CLIのセットアップからプロジェクト作成、初回のデプロイ完了までの全手順を分かりやすく解説します。

1. 動作の仕組み（ELI5）：世界規模の高速便と配達拠点#

Webサイトの配信を「本」の配布に例えてみましょう：

従来の単一サーバー構成: あなたが東京のオフィスに1冊だけ本を置いておく状態です。ニューヨークやロンドンの読者は、遠く離れた東京のサーバーまでデータを取りに来る必要があるため、読み込みが遅くなります。
Cloudflare Pages: Wrangler CLIは「超音速の輸送機」のようなものです。wrangler pages deploy を実行すると、あなたのWebサイトのファイルが世界300箇所以上の配達拠点（Edge Node）に一瞬で複製・配置されます。
閲覧者の体験: ロンドンの読者はロンドンの拠点から、東京の読者は東京の拠点から即座にページを受け取れるため、ミリ秒単位で表示されます。

flowchart TD
    A["💻 ローカルPC<br/>(開発プロジェクト)"] -->|1. npx wrangler pages deploy| B["⚡ Cloudflare Global Network"]
    B --> C["🌏 エッジ拠点（東京）"]
    B --> D["🌏 エッジ拠点（フランクフルト）"]
    B --> E["🌏 エッジ拠点（シンガポール）"]
    B --> F["🌏 エッジ拠点（サンノゼ）"]
    
    User1["👤 日本のユーザー"] -->|超高速ロード| C
    User2["👤 ドイツのユーザー"] -->|超高速ロード| D
    User3["👤 アメリカのユーザー"] -->|超高速ロード| F

2. よくある課題と解決策#

初心者が直面しやすい問題#

旧バージョンの誤インストール: レガシーパッケージ（@cloudflare/wrangler / v1）を導入してしまい、コマンド形式が一致せずエラーになる。
グローバルインストールの競合: npm install -g による権限エラーや、プロジェクト間でのバージョン乖離。
手動アップロードの手間: GUIからのZIPアップロードは作業ミスや自動化の妨げになる。

解決策#

プロジェクトローカル依存（DevDependency）または npx 経由での実行。
公式の対話型ウィザード C3（create-cloudflare）の利用。
npx wrangler login によるブラウザ連動のワンクリック認証。

3. システム要件（System Requirements）#

作業を開始する前に、以下の動作環境を確認してください：

Node.js: バージョン 16.17.0 以上（バージョン管理ツール nvm, volta, fnm, bun の利用を推奨）。
OS: macOS 13.5+, Windows 11, または Linux (glibc 2.35+)。
Webブラウザ: Cloudflare Dashboard ↗ にログイン可能な状態であること。

[!TIP] 過去にグローバルで旧バージョンのWranglerをインストールしたことがある場合は、アンインストールしておきます：
npm uninstall -g @cloudflare/wrangler
bash

4. プロジェクト作成と設定手順#

方法1：C3ツールで新規プロジェクトを作成（推奨）#

Create Cloudflare CLI（C3）を使うと、最新のWrangler設定を含んだプロジェクトを対話形式で簡単にスキャフォールディングできます。

ターミナルで以下のコマンドを実行します：

# npm を使用する場合
npm create cloudflare@latest -- my-pages-app

# pnpm を使用する場合
pnpm create cloudflare@latest my-pages-app

# Bun を使用する場合
bun create cloudflare@latest my-pages-app

bash

対話形式のプロンプトに従って、フレームワーク（Astro、Next.js、SvelteKit、Viteなど）や静的HTMLテンプレートを選択します。

方法2：既存プロジェクトにWranglerを導入して静的サイトをデプロイ#

シンプルなHTMLファイルから始める場合の最短手順です：

ステップ1: フォルダとファイルの作成#

作業用ディレクトリと公開用フォルダ public を作成します：

mkdir my-first-page
cd my-first-page

bash

public/index.html を作成します：

public/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初めてのCloudflare Pages</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #f38020, #faad3f);
      color: #fff;
    }
    .card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      padding: 2.5rem;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 500px;
    }
    h1 { margin-top: 0; }
  </style>
</head>
<body>
  <div class="card">
    <h1>🚀 Cloudflare Pagesへようこそ！</h1>
    <p>Wrangler CLIを使って世界中のエッジサーバーに即座にデプロイされました。</p>
  </div>
</body>
</html>

html

ステップ2: Wranglerのローカルインストール#

プロジェクトを初期化し、開発依存として wrangler を追加します：

npm init -y
npm install --save-dev wrangler

bash

ステップ3: Cloudflareアカウントの認証#

ターミナルからログインコマンドを実行します：

npx wrangler login

bash

自動的にWebブラウザが開きます。Cloudflareの認可画面で Allow（許可）をクリックすると、ターミナル側に認証完了メッセージが表示されます：

Successfully logged in.

text

ログイン状況の確認：

npx wrangler whoami

bash

5. Cloudflare Pagesへのデプロイ実行#

ビルド済みファイル（または静的ファイル）が存在するフォルダを指定してデプロイします：

npx wrangler pages deploy public --project-name my-first-page

bash

初回実行時の動作：

Cloudflareアカウント上に my-first-page という名前のPagesプロジェクトが自動生成されます。
public ディレクトリ内の全アセットがCloudflareエッジにアップロードされます。
https://my-first-page.pages.dev のような公開URLが即座に発行されます。

[!NOTE] デプロイ前にローカルで動作確認を行いたい場合は、以下のコマンドでプレビューサーバーを起動できます：
npx wrangler pages dev public --port 8788
bash

6. よく使うWranglerコマンド一覧（クイックリファレンス）#

目的	コマンド	説明
ログイン	`npx wrangler login`	ブラウザを開いてCloudflareアカウントと連携
アカウント確認	`npx wrangler whoami`	現在ログイン中のメールアドレスとIDを表示
ローカル起動	`npx wrangler pages dev <dir>`	Pages環境をローカルPC上でシミュレート実行
デプロイ	`npx wrangler pages deploy <dir>`	指定フォルダの静的アセットをPagesへ公開
プロジェクト一覧	`npx wrangler pages project list`	作成済みのPagesプロジェクト一覧を表示
デプロイ履歴	`npx wrangler pages deployment list`	過去のデプロイ履歴やハッシュを確認

1. 動作の仕組み（ELI5）：世界規模の高速便と配達拠点#

2. よくある課題と解決策#

初心者が直面しやすい問題#

解決策#

3. システム要件（System Requirements）#

4. プロジェクト作成と設定手順#

方法1：C3ツールで新規プロジェクトを作成（推奨）#

方法2：既存プロジェクトにWranglerを導入して静的サイトをデプロイ#

ステップ1: フォルダとファイルの作成#

ステップ2: Wranglerのローカルインストール#

ステップ3: Cloudflareアカウントの認証#

5. Cloudflare Pagesへのデプロイ実行#

6. よく使うWranglerコマンド一覧（クイックリファレンス）#

7. 参考リンク（References）#