🚀 Cloudflare PagesでWebサイトをデプロイする2つの方法と基本原理

Webサイトやブログを開発した後、次に直面する課題は「どうやってインターネット上に公開して訪問者に見てもらうか」ということです。

従来は、月額料金を支払ってVPS（仮想専用サーバー）を契約し、Nginxの設定やSSL証明書の更新などを手動で管理する必要がありました。しかし現在では、**Cloudflare Pages(CFP)**を活用することで、サーバー管理の負担なく、グローバルな超高速配信と寛大な無料枠（Free Tier）で簡単にサイトをデプロイできます。

本記事では、Cloudflare Pagesの概要をはじめ、手元のPCからデプロイする際の2つの認証方式（ブラウザログイン方式 vs APIトークン方式）の違い、そして記事や画像を保存するD1データベースとWorkers KVストレージの基本原理をわかりやすく解説します。

📂 1. Cloudflare Pages(CFP)とは？

一言で言えば、**「制作したWebサイトのファイルを世界中数百都市にあるCloudflareのエッジサーバーに配置し、訪問者に最も近い場所から超高速で配信するホスティングサービス」**です。

HTML、CSS、画像などの静的ファイルはもちろん、SvelteKitやNext.jsのようにサーバー側でリアルタイムに画面を描画するSSR（サーバーサイドレンダリング）やAPIルートも快適に動作します。

なぜ従来のVPSではなくCloudflare Pagesを選ぶのか？

サーバー管理が一切不要: Linuxのセキュリティパッチ適用やNginxの設定、サーバー死活監視を行う必要がありません。Cloudflareが24時間安全にインフラを管理します。
圧倒的なグローバル配信速度: ユーザーのリクエストが中央の1台のサーバーに集中せず、物理的に最も近いエッジサーバーから即座に応答します。
優れたコストパフォーマンス: 個人ブログや一般的なポートフォリオのトラフィックであれば、無料プラン（Free Tier）の範囲内で十分に運用可能です。

🔑 2. 手元のPCからCloudflareへデプロイする2つの方法

SvelteKitアプリケーションをビルド（npm run build）すると、@sveltejs/adapter-cloudflareによって**.svelte-kit/cloudflare**ディレクトリに静的ファイルと実行用ワーカー（_worker.js）が生成されます。

このビルド成果物をCloudflare Pagesにデプロイする標準コマンドは**npx wrangler pages deploy .svelte-kit/cloudflare**であり、認証方式には大きく2種類が存在します。

[方法 1] 対話型ブラウザログインによるデプロイ（Wrangler標準方式）

単一アカウントで初めて始める際に最も直感的な方式です。コマンドを実行するとブラウザが開き、ログイン権限を承認します。

# SvelteKitビルド後にPagesへデプロイ（ブラウザログイン）
npm run build
npx wrangler pages deploy .svelte-kit/cloudflare --project-name=my-blog-web --branch=production

動作の仕組み: ターミナルでコマンドを実行すると、PCのWebブラウザが自動的に起動し、Cloudflareのログイン画面が表示されます。[Allow（承認）]をクリックするとローカル環境（~/.config/.wrangler）にセッションが保存され、デプロイが完了します。
メリット: APIトークンを個別に発行する手間がなく、数クリックで手軽に連携できるため、個人ブログを1つのアカウントで始める際に最適です。
注意点:
- 複数のCloudflareアカウントを切り替えてデプロイする場合、都度ログアウトと再ログインが必要になります。
- 画面のないリモートサーバーやGitHub ActionsなどのCI/CD自動化環境では利用できません。

[方法 2] APIトークン環境変数による非対話型自動デプロイ（CI/CD・複数アカウント標準）

複数アカウントの運用やデプロイ自動化で使用される標準的な方式です。発行済みのAPIトークンを環境変数で渡すことで、ブラウザのポップアップなしで即座にデプロイします。

# 環境変数でトークンとアカウントIDを指定してデプロイ（PowerShell例）
$env:CLOUDFLARE_API_TOKEN="YOUR_API_TOKEN"
$env:CLOUDFLARE_ACCOUNT_ID="YOUR_ACCOUNT_ID_32_CHARS"
npx wrangler pages deploy .svelte-kit/cloudflare --project-name=my-blog-web --branch=production

動作の仕組み: Cloudflareダッシュボードで必要な権限（Pages、D1、KVなど）を持つAPIトークンを発行し、環境変数に登録しておきます。デプロイ実行時にこのトークンが自動的に渡され、ブラウザを開かずにバックグラウンドでデプロイが完了します。
メリット:
- ポップアップ画面が出ず、静かに高速にアップロードされます。
- アカウントごとに異なるトークンを割り当てられるため、複数サイトを運用する際もセッション衝突を起こさず完全に独立デプロイが可能です。
準備: 初回のみCloudflareダッシュボードでAPIトークンを発行する手順が必要です。

💾 3. 記事や画像はどこに保存されるのか？（D1とKVの役割）

Webサイトのフロントエンド画面だけでなく、執筆した記事やアップロードした画像を安全に保管するストレージが必要です。Cloudflareは2種類のサーバーレスストレージを提供しています。

Cloudflare D1（リレーショナルSQLiteデータベース）:
- 行と列で構造化されたエッジ分散型SQLデータベースです。
- 記事のタイトル、本文（Markdown/HTML）、公開日時、カテゴリー、タグ、サイト基本設定など、検索や構造化が必要なデータを安全に保存します。
Workers KV（超高速Key-Valueストレージ）:
- 読み込み処理に特化したグローバル分散Key-Valueストアです。
- 記事に添付されたサムネイルや画像バイナリをエッジキャッシュに保持し、訪問者の要求に応じてミリ秒単位で素早く返します。

🧩 4. SvelteKitブログエンジンの実例構成

SvelteKitブログエンジン（SvelteKit Blog Engine）は、これらのCloudflareサーバーレスインフラを以下のように最適化して構成しています。

なぜブログ画面と管理画面を2つのPagesに分離したのか？

1つのアプリケーションに統合するのではなく、一般訪問者用apps/blogと管理者用apps/adminの2つの独立したCloudflare Pagesに分けてデプロイしています：

攻撃対象領域（Attack Surface）の最小化: 管理者ログイン処理、Markdown/HTMLエディタ、設定変更APIなどの管理機能が一般公開バンドルに一切含まれません。別個のサブドメインで物理的に分離されるため、セキュリティが大幅に向上します。
訪問者用バンドルの極限までの軽量化: 閲覧用サイトには重量のあるエディタライブラリや管理スクリプトが1バイトも含まれないため、モバイル端末でも極めて高速に初回ページが表示されます。

データの流れ

管理者が管理画面で記事を投稿・編集して画像をアップロードすると、データは共有の**D1（データベース）とWorkers KV（画像ストレージ）**に書き込まれます。
読者がブログWebサイトにアクセスすると、同じD1およびKVから最新のコンテンツを取得して高速に描画します。

🚀 5. まとめ

Cloudflare Pagesは、従来の複雑なサーバー保守や高額なホスティング費用を不要にし、誰もが快適で高性能なフルスタックWebアプリケーションを運用できる優れたプラットフォームです。

最初はブラウザログイン方式（wrangler login）で手軽にサイトを立ち上げ、サイトの規模拡大や複数アカウント運用に合わせてAPIトークン自動デプロイへと段階的に移行していくアプローチをおすすめします。

Cloudflare PagesでWebサイトをデプロイする2つの方法と基本原理