Cloudflare は、もともとは CDN（コンテンツ配信ネットワーク） やセキュリティを提供する会社です。 世界中（日本にも多数）に何百ものサーバー拠点（エッジ）を持っており、ユーザーに一番近い場所からデータを返すことで、Webサイトを爆速・安全にするサービスを提供しています。
近年、ただのCDNにとどまらず、「サーバーそのものを世界中に配置して動かす」 という画期的なプラットフォームに進化しました。IT部ではこの仕組みをフル活用します。
Cloudflareの環境の前に、私たちが何を使ってアプリを作るのかを紹介します。
- React (りあくと):
- 画面（UI）を作るためのフロントエンド技術。ボタンを押した時の動きや、データの表示など「ユーザーの目に見える部分」を組み立てます。
- Hono (ほのぉ):
- データを処理するためのバックエンド技術（Web APIフレームワーク）。「Cloudflare で動かすために生まれた」と言っても過言ではないほど、Cloudflare と相性抜群の軽量で超高速なツールです。
この2つで作ったものを、Cloudflareのどこに置くのかを見ていきましょう。
私たちこれから書くプログラムを、どこに置いて動かすのか？ Cloudflare では、主に以下の2つのサービスを使い分けます。
Cloudflare Pages (フロントエンド)
- 役割: React などの「画面（HTML / CSS / JS）」を配信するためのサービス。
- 特徴:
- 用意されたファイルをそのまま世界中のサーバーに置くだけ（静的ホスティング）。
- GitHub と連携するだけで、コードを更新すると自動的に最新の画面が全世界に配信（デプロイ）されます。
- IT部では「フロントエンド（React）」の公開場所として使います。
Cloudflare Workers (バックエンド)
- 役割: データベースとやり取りしたり、複雑な計算をする「APIサーバー」を動かす場所。
- 特徴:
- 一般的な「東京に1台だけ巨大なサーバーを置く」という方式ではなく、世界中のCloudflareのサーバーで同時にプログラムが待ち構え、アクセスしてきた人のすぐそばで実行されます。
- 非常に動作が軽く、一瞬で起動するのが特徴です。
- IT部では「バックエンド（Hono）」の実行場所として使います。
💡 コラム：Pages と Workers の統合 現在の Cloudflare の動向として、「Pages の仕組みを Workers に統合していく」という大きな流れが進んでいます。将来的にはフロントもバックもすべて「Workers」という共通の基盤で管理されるようになりますが、研修では便宜上「静的な画面＝Pages」「動的なAPI＝Workers」と呼び分けて進めます。
アプリで扱う様々なデータ（ユーザー情報、投稿、画像など）を保存するため、Cloudflare は用途に合わせて複数のデータストアを提供しています。
D1 (リレーショナルデータベース)
- 役割: 表（テーブル）形式でキッチリとデータを管理するデータベース (SQLiteベース)。
- 特徴: 「ユーザー一覧」や「投稿とコメントの関係」など、複雑な条件でデータを検索・保存するのに使います。
- IT部で最も頻繁に使うメインのデータベースです。
KV (Key-Value ストア)
- 役割: 「名前（Key）」と「値（Value）」のペアをシンプルに保存する辞書のような場所。
- 特徴: 非常に高速で読み取れるため、「一時的な設定」や「短期間で消えてもいい一時データ（キャッシュ）」などに使います。
R2 (オブジェクトストレージ)
- 役割: 画像、動画、PDF などの「大きなファイル（バイナリ）」を保存する巨大な倉庫。
- 特徴: D1データベースには画像そのものは入らないため、画像はR2に保存し、D1には「R2のどこに置いたか（URL）」だけを記録します。
- 「ファイルのダウンロード時の通信料（エグレス料金）が無料」 という最強のメリットがあります。
私たちが開発する Web アプリは、この 「Cloudflare エコシステム」 の上で成り立っています。
- ユーザーが Pages にアクセスし、React の画面を表示する。
- 画面から Workers (Hono) へデータ取得のお願い（リクエスト）を送る。
- Workers が D1 (DB) や R2 (画像) からデータを取得し、画面に返す。
次のステップへ
以上が、Cloudflare で使われるサービスの「概念」です。
詳しいコードの書き方や、具体的な設定方法（wrangler の使い方など）は、今後の 「フロントエンド」「バックエンド」それぞれのトラック で、実際に手を動かしながら学びます！
まずはこの「役割分担」と「サービスの名称」を、IT部内での会話で使えるようになりましょう。