Cloudflare Pagesの無料プランで配信できるファイル数が最大20,000。１ファイルあたりの容量が最大25 MiB。

十分ではありますが、Cloudflare R2を使って画像や動画などメディアファイルをストレージにアップして配信してみようと思います。

公式：https://developers.cloudflare.com/pages/platform/limits/

Files

Pages uploads each file on your site to Cloudflare’s globally distributed network to deliver a low latency experience to every user that visits your site. Cloudflare Pages sites can contain up to 20,000 files.

​File size

The maximum file size for a single Cloudflare Pages site asset is 25 MiB.

Cloudflare R2の無料枠

• ストレージ　10GB/月
• クラス A オペレーション (POST・書き込み)　100万回/月
• クラス B オペレーション (GET・読み込み)　1,000万回/月
• データ転送　無制限

個人で利用するには十分ですね。

Cloudflare R2の設定

ダッシュボードのサイドバー「R2」からまたはサービスページの「無料で試す」から遷移し、支払情報を登録します。

バケットの作成

ダッシュボードのR2を開き、「バケットを作成する」に進みます。

バケット名（※）を入力し「バケットを作成する」に進みます。

※バケット名に使用できるのは、小文字 (a ～ z)、数字 (0 ～ 9)、およびハイフン (-) のみです。

作成したバケットにドメインを設定

バケットが作成されファイルのアップロードができる状態になりました。

ファイルを先にアップロードしてからドメイン設定でもどちらでもいいようです。

今回は「設定」に進みます。

今回は、Cloudflare Pagesに設定しているドメインのサブドメインをR2のバケットに設定します。

パブリック アクセスの「ドメインに接続」をクリックするとカスタムドメインの入力欄が表示されます。

設定したいドメイン（※）を入力し「続行」に進みます。

※ドメインと表記していますが、今回のケースではサブドメインを指しています。

途中ですが失敗談

今回はサブドメインを割り当てたかったのですが、間違ってカスタムドメインにメインドメインを設定してしまったところCNAMEがR2に置き換わり、ドメインがR2に向いてしまいました。

バケットで設定したカスタムドメインを削除し、Pagesからカスタムドメイン設定を再設定して事なきを得ました。

DNSレコードの追加

表示されたDNSレコードを確認し「ドメインに接続」に進むと反映待ちの画面になります。反映は数分ほどでした。

ファイルをアップロードする

「オブジェクト」画面でファイルをアップロードするとアップロードしたファイルが一覧に表示されます。

一覧の該当オブジェクトをクリックすると詳細ページに遷移し、先ほど設定したカスタムドメイン＋ファイル名のURLが表示されます。

アクセスしてみると問題なく表示されました。

さいごに

失敗はありましたが思いのほか簡単にアップロードと設定ができました。

今回は読み込みだけなので、次回はAPIトークンを使った書き込みにも挑戦したいと思います。