【第6回 | Cloudflare入門】Cloudflare Pages・D1・R2とは？

Cloudflare Pages・D1・R2とは？

これまでCloudflareのDNSやCDN、セキュリティ機能、Workersについて紹介してきました。

CloudflareにはWebサイトを高速化したり、攻撃から守ったりする機能だけでなく、WebサイトやWebアプリケーションを開発するためのサービスも用意されています。

今回紹介するのが、次の3つです。

1. Cloudflare Pages
   → Webサイトを公開する
2. Cloudflare D1
   → データを保存・管理する
3. Cloudflare R2
   → 画像やファイルを保存する

さらに、前回紹介したCloudflare Workersと組み合わせることで、Webアプリケーションのフロントエンドからバックエンド、データベース、ストレージまでCloudflareのサービスを活用して構築できます。

今回は、Pages・D1・R2がそれぞれどのようなサービスなのか、初心者向けに解説します。

Cloudflare Pagesとは？

Cloudflare Pagesは、WebサイトをCloudflare上で公開できるサービスです。

• 会社のWebサイト
• LP（ランディングページ）
• ブログ
• Webアプリケーションのフロントエンド

このようなサービスを公開できます。

HTML・CSS・JavaScriptで作ったWebサイトはもちろん、Reactなどのフレームワークを利用して作ったWebサイトにも対応しています。

Pagesでできること

Cloudflare Pagesを利用すると、作成したWebサイトをCloudflareの環境へデプロイして公開できます。

Webサイトを開発

↓

GitHubなどへコードを保存

↓

Cloudflare Pagesと連携

↓

Webサイトを公開

このような流れで公開することができます。

GitHubなどのリポジトリと連携しておけば、コードを更新した際に自動的にビルド・デプロイすることもできます。

そのため、Webサイトを更新するたびに自分でサーバーへファイルをアップロードするといった作業を減らせます。

Webサイトを公開する仕組み

Pagesで公開したWebサイトは、Cloudflareのグローバルネットワークを通じてユーザーへ配信されます。

日本のユーザー

↓

Cloudflareのネットワーク

↓

Webサイトのコンテンツを配信

例えば、日本のユーザーがPagesで公開されたWebサイトへアクセスすると、このようなイメージです。

Cloudflareのネットワークを利用してコンテンツを配信できるため、世界中のユーザーへWebサイトを届けやすい仕組みになっています。

Cloudflare D1とは？

Cloudflare D1は、Cloudflareが提供するサーバーレスSQLデータベースです。

Webアプリケーションでは、さまざまな情報を保存する必要があります。

例えばECサイトであれば、商品情報、ユーザー情報、注文情報、在庫情報などがあります。

こうしたデータを保存・管理するために利用できるのがD1です。

D1はSQLiteをベースとした仕組みになっており、SQLを使ってデータの保存や検索などを行えます。

D1でできること

D1では、一般的なデータベースと同じようにデータの追加・取得・更新・削除などを行えます。

例えば商品情報を管理する場合、商品名、価格、商品説明、在庫数といった情報をD1に保存できます。

そしてWebアプリケーションから必要な商品情報を取得して、ユーザーへ表示できます。

商品情報をD1に保存

↓

Webアプリから商品情報を取得

↓

商品一覧として表示

イメージとしては、このような流れです。

WorkersとD1を組み合わせる

D1は、前回紹介したCloudflare Workersと組み合わせて利用できます。

ユーザーが商品ページへアクセス

↓

Workersがリクエストを受け取る

↓

WorkersがD1から商品情報を取得

↓

ユーザーへ商品情報を返す

例えば、ECサイトの商品一覧を表示する場合、このような処理ができます。

役割をシンプルに分けると、下記のような関係です。

Workers
→ プログラムを実行する

D1
→ データを保存・管理する

Workersだけではデータを永続的に保存するデータベースの役割は持たないため、D1などのサービスと組み合わせることで、より本格的なWebアプリケーションを作れるようになります。

Cloudflare R2とは？

Cloudflare R2は、画像や動画、PDFなどのファイルを保存できるオブジェクトストレージサービスです。

Webサービスを開発していると、データベースだけでなくさまざまなファイルを保存する必要があります。

例えば、商品画像、プロフィール画像、動画、PDF、バックアップファイルなどです。

こうしたファイルを保存する場所として利用できるのがR2です。

Amazon Web ServicesのAmazon S3に近い役割を持つサービスと考えるとイメージしやすいでしょう。

R2でできること

R2を利用すると、Webアプリケーションで利用するファイルを保存・取得できます。

ユーザーが画像をアップロード

↓

Webアプリケーションで処理

↓

R2に画像を保存

↓

必要なときにR2から画像を取得

例えばユーザーがプロフィール画像をアップロードするWebサービスなら、このような構成にできます。

また、R2はS3互換APIを提供しているため、S3向けに作られたツールや仕組みを活用しやすいことも特徴です。

どんなファイルを保存できる？

R2には、さまざまな種類のファイルを保存できます。

画像
→ 商品画像、プロフィール画像など

動画
→ Webサイトで使用する動画など

PDF
→ マニュアルや資料など

バックアップデータ
→ アプリケーションやシステムのバックアップ

D1との違いを簡単に整理すると、下記のような保存するサービスと考えると分かりやすいです。

D1
→ 商品名、価格、ユーザー情報などの構造化されたデータ

R2
→ 画像、動画、PDFなどのファイル

Pages・Workers・D1・R2を組み合わせるとどうなる？

ここまで紹介したPages・D1・R2は、それぞれ単体でも利用できます。

しかし、前回紹介したWorkersと組み合わせることで、Webアプリケーションに必要なさまざまな機能をCloudflare上で構成できます。

Pages
→ Webサイトを公開する

Workers
→ プログラムを実行する

D1
→ データを保存する

R2
→ 画像やファイルを保存する

役割を整理すると、このような関係です。

Webアプリの構成例

例えば、商品を紹介するWebアプリケーションを作る場合を考えてみます。

ユーザー

↓

Pages
Webサイトを表示

↓

Workers
商品データを取得する処理を実行

↓

D1
商品名・価格・商品説明などを取得

＋

R2
商品画像を取得

↓

ユーザーに商品情報を表示

このように、それぞれのサービスが異なる役割を担当します。

一般的なWebアプリケーションで考えると、下記のイメージです。

Pages = フロントエンド

Workers = バックエンド

D1 = データベース

R2 = ファイルストレージ

この4つの役割を理解すると、Cloudflareを使ったWebアプリケーション開発の全体像がかなり分かりやすくなります。

Pages・D1・R2を使うメリット

Pages・D1・R2を利用するメリットの一つは、Webアプリケーションに必要な複数の機能をCloudflareのサービスで構成できることです。

Webサイトの公開
→ Pages

バックエンド処理
→ Workers

データベース
→ D1

ファイル保存
→ R2

このような形で役割を分けられます。

また、Cloudflareのサービス同士を組み合わせられるため、Webサイトの配信だけでなく、アプリケーションの処理やデータ管理まで一つのプラットフォーム上で構築しやすくなります。

特に、下記のようなケースを開発するときの選択肢になります。

• 個人開発
• 小規模なWebサービス
• API
• SaaS
• Webアプリケーション

さらに、サーバーレスのサービスを活用することで、自分でサーバーを用意してOSの管理やメンテナンスを行う必要を減らせる点もメリットです。

まとめ

今回は、Cloudflareの開発向けサービスであるPages・D1・R2について紹介しました。

それぞれの役割をシンプルに整理すると、下記になります。

Cloudflare Pages
→ Webサイトを公開する

Cloudflare Workers
→ プログラムを実行する

Cloudflare D1
→ データを保存・管理する

Cloudflare R2
→ 画像やファイルを保存する

この4つを組み合わせることで、Webアプリケーションの構成をCloudflareのサービスを中心に作ることができます。

Pages（フロントエンド）

↓

Workers（バックエンド）

↓

D1（データベース）＋ R2（ストレージ）

Cloudflareは、CDNやセキュリティだけではなく、Webアプリケーションを開発・実行するためのプラットフォームとしても利用できるということです。

次回は、Workers AI・AI Gateway・Vectorizeなど、Cloudflareが提供するAI関連機能について紹介します。