ブログの画像配信サーバーとして Cloudflare R2 を使う

2022/12/23

この記事は Cloudflare Advent Calendar 2022 の23日目の記事です

今までブログの画像配信サーバーとして Google Cloud Storage を使っていたが、ブログを Cloudflare Pages に移行したこともあり、どうせならと画像のホスティングも Cloudflare R2 に移行することにした

R2 が GA （一般公開）され、パブリックアクセス（独自ドメイン可）ができるようになったのも理由の一つにある（今までは Cloudflare Workers 経由でしかパブリックアクセスできなかった）

Cloudflare R2 とは

簡単にいうと、エグレス料金の掛からない Amazon S3 互換のオブジェクトストレージ

料金体系

ストレージ: 月額 $0.015 / GB
クラス A 操作: 月額 $4.50 / 100万回
クラス B 操作: 月額 $0.36 / 100万回

クラス A 操作は「状態を変更（書き込み）」、クラス B 操作は「既存の状態の読み込み」のこと

無料枠もある

ストレージ: 10 GB / 月
クラス A 操作: 100万回 / 月
クラス B 操作: 1000万回 / 月

個人利用レベルであれば、ほぼ無料で使えるはず

手順

R2 に保存した画像にカスタムドメイン（独自ドメイン）でアクセスできるようにするまでの手順

バケット作成

Cloudflare R2 の管理画面から作成もできるが、今回は Terraform を使って作成する

「images-takagi-blog」という名前でバケットを作成した

main.tf

variable access_key {}
variable secret_key {}
variable endpoints_s3 {}

terraform {
  required_providers {
    aws = {
      source = "hashicorp/aws"
      version = "4.47.0"
    }
  }
}

provider "aws" {
  access_key = var.access_key
  secret_key = var.secret_key
  skip_credentials_validation = true
  skip_region_validation = true
  skip_requesting_account_id = true
  endpoints {
    s3 = var.endpoints_s3
  }
  region = "auto"
}

resource "aws_s3_bucket" "images_storage" {
  bucket = "images-takagi-blog"
}

terraform.tfvars

access_key = "HOGE"
secret_key = "FOO"
endpoints_s3 = "https://{Account ID}.r2.cloudflarestorage.com"

サポートされているリージョンは「auto」のみで、バケット作成リクエストに最も近いリージョンが自動で選択される
将来的にはデータアクセスのパターンから、データの保存場所を自動的に最適化するようになるらしい

参考: https://developers.cloudflare.com/r2/examples/terraform/

独自ドメインの設定

独自ドメインの設定は Terraform からできないので管理画面から手動で設定する

ドメインは Cloudflare の同じアカウントで管理しているものである必要がある

このブログで使っているドメインのサブドメイン「images.takagi.blog」に設定した

バケットの「Settings」->「Bucket Access」->「Domain Access」の「Connect Domain」をクリック

設定したいドメインを入力して「Continue」をクリック

「Status」が「Active」、「Access to Bucket」が「Allowd」の表示が出ていたら OK

Cloudflare DNS の設定を見ると、自動的に CNAME レコードが追加されていた

参考: https://developers.cloudflare.com/r2/data-access/public-buckets/

アクセスできるようになったか確認する

適当な画像を R2 にアップロード

https://images.takagi.blog/test.png

アクセスできた！

補足

パブリックアクセス

パブリックアクセスの方法は2種類ある

Cloudflare が管理するサブドメイン（*.r2.dev）で公開
カスタムドメイン（独自ドメイン）で公開

カスタムドメインで公開する場合は、バケットの管理画面にある「Public Access」の許可はしなくても良い
逆に独自ドメインを持っていなくても「Public Access」の許可をすることで「*.r2.dev」で公開することができる

もちろん両方のパターンで公開することも可能

キャッシング

カスタムドメインの場合は、特定のファイルタイプのみデフォルトでキャッシュが有効になっている

参考: https://developers.cloudflare.com/cache/about/default-cache-behavior/#default-cached-file-extensions

まとめ

Amazon S3 互換の Cloudflare R2 が一般公開された
「*.r2.dev」で公開する方法と独自ドメインで公開する方法の2種類でパブリックアクセスできるようになった
特につまずくことなく、独自ドメインで公開するところまでできた
ブログの画像をほぼ無料でホスティングできるようになった

参考

Cloudflare R2がGA(一般公開)されてパブリックアクセス&独自ドメイン設定が可能になりました！ | DevelopersIO

高木のブログ