このサイトを作る際に少し悩んだのが画像の取り回しについてです。Cloudflare Pages 側で意識すべき制限は、ファイル数 20,000 個、1 つのファイルサイズ 25 MB です。相当続かないと達しませんが、ファイル数上限が気になります。また、リポジトリーにそのまま画像ファイルを入れて太ることも気になるので、別の方法を検討しました。
今回は同じく Cloudflare の R2 Storage に画像ファイルを置き、ローカルでの記事編集段階からそちらを参照することにしました。意識すべき無料枠は次の通りです。
- ストレージ容量: 月間 10 GB まで
- クラス A 操作（書き込み、リスト表示など）: 月間 100 万回 まで
- クラス B 操作（読み取りなど）: 月間 1,000万回 まで
画像を 1 つ 100 KB と見積もっても、100,000 個分は収まります。また、クラス A 操作はたかがしれていますし、クラス B 操作もキャッシュと組み合わせて使用すればそうそう問題にはならないだろうと判断しました。
R2 Storage の設定
記事を探しても古い UI のものも多く、時々ダッシュボードも変わっていっているのかと思いますが、今日現在では次の手順で行いました。
- Build カテゴリーの Storage & databases から R2 object storage の Overview へと移動
- Create bucket ボタンを押す
- 各項目を埋めて Create bucket で作成
- Bucket name は適当
- Location は Automatic
- Default storage class は Standard
- 作ったバケットを開いて Settings から設定
- Custom Domains に images.example.com のようなイメージ用のドメインを追加
- CORS Policy を設定（localhostは開発用）
[
{
"AllowedOrigins": [
"http://localhost:4321",
"https://example.com"
],
"AllowedMethods": [
"GET",
"HEAD"
]
}
]キャッシュ設定
キャッシュ設定はドメイン側で行います。
- Domains からドメインを選択して、Caching から Cache Rules へと移動
- Create rule ボタンを押す
- Custom filter expression が選ばれた状態でパターンを記載
- Field: Hostname
- Operator: equals
- Value: images.example.com
- Cache eligibility を Eligible for cache に設定
- Edge TTL を Ignore cache-control header and use this TTL に設定して、Input time-to-live (TTL) を 1 month に設定
- Save ボタンで保存
さらに、これでいいですかと Gemini に聞いたら次の設定もおすすめされたので有効にします。
- 同じくドメインのメニューから、Caching から Tiled Cache へと移動
- Tiered Cache Topology を Smart Tiered Cache Topology に変更
Tiered Cache は、世界中の Cloudflare ネットワークを活用してキャッシュ効率を上げる仕組みのようなので、とりあえず有効にしておいて損はなさそうです。
おわりに
これで画像の取り扱いの準備ができました。しばらくこれで運用して様子を見ていこうと思います。