Cloudflare Pagesに静的サイトを無料でデプロイする手順

Cloudflare Pagesなら、静的ファイルで構成されたサイトを無料のグローバルCDNにデプロイできる。GitHubのリポジトリを連携させるか、ビルド済みのディレクトリをWrangler CLIで送るだけで、カスタムドメイン＋自動HTTPSのサイトが数分で公開状態になる。この記事では2つのデプロイ方法の具体的な手順と、よくつまずくポイントをまとめる。

無料プランで使える範囲を確認する

公式ドキュメント（執筆時点）によると、Cloudflare Pagesの無料プランは次のとおり。

月500回のビルド上限は、1日に1回以下の更新頻度であれば実質的に問題にならない。帯域が無制限なのは小〜中規模の静的サイトにとって十分な仕様だ。

デプロイ方法を選ぶ

Cloudflare Pagesには大きく2つのデプロイ手段がある。

どちらも同じCDN基盤を使うため、デプロイ後のパフォーマンスに差はないと考えられる。Git連携はプルリクエストごとにプレビューURLが自動生成される点が便利だ。

Git連携でデプロイする手順

1. Cloudflare Dashboardにアクセスする

dash.cloudflare.com にログインし、左サイドバーから Workers & Pages → Pages を選択する。

2. プロジェクトを作成する

「Create a project」→「Connect to Git」をクリックする。GitHubまたはGitLabのアカウントを認証すると、リポジトリ一覧が表示されるので、対象のリポジトリを選ぶ。

3. ビルド設定を入力する

フレームワークに応じたプリセットが選択できる。代表的な設定は次のとおり。

Next.jsで静的エクスポートを使う場合の注意点： next.config.js（または next.config.ts）に output: 'export' の設定が必要だ。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
};

module.exports = nextConfig;

この設定がないと next build の出力はサーバーサイドレンダリング用のファイル群になり、静的ホスティングでは動作しない。また output: 'export' を使うとAPIルートとサーバーコンポーネントのサーバーサイド処理は動作しなくなるため、ページ構成が静的生成できる内容かどうかを事前に確認しておく。

4. 環境変数を設定する（必要な場合）

ビルド時に環境変数が必要な場合は、設定画面の「Environment variables」に追加する。NEXT_PUBLIC_ プレフィックスの変数はビルド時にバンドルへ埋め込まれるため、ここで設定しておく。

Node.jsのバージョンを指定したい場合は、変数名 NODE_VERSION、値に 20 などのバージョン番号を入力する。

5. デプロイを実行する

「Save and Deploy」をクリックするとビルドが始まる。完了後、<プロジェクト名>.pages.dev のURLでアクセスできるようになる。

Wrangler CLIでデプロイする手順

Gitリポジトリなしでビルド済みのファイルをそのまま送る方法。

1. WranglerをインストールしてCloudflareにログインする

npm install -g wrangler
wrangler login

wrangler login を実行するとブラウザが開き、Cloudflareアカウントの認証を求められる。

2. サイトをビルドする

# Viteの例
npm run build
# → dist/ にビルド済みファイルが出力される

3. Cloudflare Pagesにデプロイする

wrangler pages deploy dist --project-name=my-static-site

--project-name に指定した名前のプロジェクトが存在しない場合は新規作成される。2回目以降は同名プロジェクトに上書きアップロードされる。出力ディレクトリが out の場合（Next.js静的エクスポートなど）は次のとおり。

wrangler pages deploy out --project-name=my-static-site

デプロイが完了するとターミナルにURLが表示される。

✨ Deployment complete! Take a peek over at https://xxxxxxxx.my-static-site.pages.dev

デプロイ履歴は次のコマンドで確認できる。

wrangler pages deployment list --project-name=my-static-site

カスタムドメインを設定する

*.pages.dev のサブドメインではなく独自ドメインを使いたい場合は次の手順で設定する。

1. Dashboard → Pages → 対象プロジェクト → Custom domains タブ
2. 「Set up a custom domain」をクリック
3. ドメイン名を入力して「Continue」

SSL証明書はDNSが反映されてから数分〜数十分で自動発行される（環境によって異なります）。

よくつまずくポイント

SPAのパスで404が返る

Reactなどで作ったSPA（シングルページアプリ）は、すべてのルーティングをフロントエンドで処理するため、ページを直接URLで開くと404が返ることがある。回避策は、ビルド出力ディレクトリのルートに _redirects ファイルを置くことだ。

# dist/_redirects
/*    /index.html    200

Viteの場合は public/_redirects に置けばビルド時に dist/ へコピーされる。

ビルドが npm: command not found で失敗する

Environment variables に NODE_VERSION を追加していない場合、Cloudflare側のデフォルトのNode.jsバージョンが使われる。プロジェクトが特定バージョンに依存しているなら NODE_VERSION を明示的に設定する。

前のビルドが終わらずキューに詰まる

無料プランは同時ビルドが1つのため、前のビルドが動いている間、後続のビルドはキューで待機する。DashboardのBuildsタブでキュー状況と進捗を確認できる。

まとめ

Cloudflare Pagesの無料プランは、帯域無制限・サイト数無制限で静的サイトをホスティングできる実用的なサービスだ。Git連携ならプッシュするだけで自動デプロイが動き、Wrangler CLIならGit不要でビルド済みフォルダを1コマンドで送れる。

まず試すなら、手元のビルド済みディレクトリに対して次のコマンドを実行するところから始めるのが一番早い。

wrangler pages deploy <ディレクトリ名> --project-name=<任意のプロジェクト名>