LaravelでS3ではなくCloudflare R2を使う

Cloudflare R2とは

料金設定

無料枠は以下のようになっています。

設定の流れ

パケットを作成する

ダッシュボードを開いたら「パケットを作成する」ボタンをクリックします

次にパケット名を入力します。
今回は「test」で作成します。

パケットの情報を確認する

するとこんな感じでパケットが作成されます。
https://〇〇.r2.cloudflarestorage.com/test

.env に追加する

このURL情報をLaravelの .env に追加します

.env

CLOUDFLARE_R2_BUCKET=test
CLOUDFLARE_R2_ENDPOINT=https://〇〇.r2.cloudflarestorage.com

APIトークンを作成する

次に LaravelからアップロードできるようにAPIの設定を行います。

R2 APIトークンの管理

R２のページに戻り、「R2 APIトークンの管理」をクリックします

APIトークンを作成する

続けて「APIトークンを作成する」をクリックします

アクセス許可

アクセス許可は「編集」を選択しAPIトークンを作成します

.env に追加する

APIが作成されました

「アクセス キー ID」、「シークレット アクセス キー」をLaravelの .env に追加します

.env

CLOUDFLARE_R2_BUCKET=test
CLOUDFLARE_R2_ENDPOINT=https://〇〇.r2.cloudflarestorage.com

// 今回追加
CLOUDFLARE_R2_ACCESS_KEY_ID=◎◎
CLOUDFLARE_R2_SECRET_ACCESS_KEY=◉◉

これでLaravelのAPIからデータをアップロードできるようになりました。
s3 APIと互換性があるのでアップロードは以下のような感じでできます

〇〇Controller.php

use Illuminate\Support\Facades\Storage;
class 〇〇Controller extends Controller
{
    Storage::disk('r2')->put('example.txt', 'Hello World');
}

カスタムドメインを設定する

ここまでで、作成したtestパケットにLaravelのAPIを使ってデータをアップロードできるようになっていると思います。しかし、このままだと画像の参照ができません。
Invalid Argument: Authorization みたいなエラーがでるはずです。

なのでパケットにアクセスできるカスタムドメインを設定する必要があります

パケットの設定を開く

パケットのページを開いたら「設定」をクリックします

パブリックアクセスでドメイン接続

パブリックアクセスという項目があります。
カスタムドメインの「ドメインに接続」をクリックします

今回は「media.example.com」という名前でカスタムドメインを追加する想定でいきます
ドメインは取得済のものである必要があります

無事に作成できると以下のようにアクティブになります

.env に追加する

このドメインを .env に追加します。

.env

CLOUDFLARE_R2_ACCESS_KEY_ID=◎◎
CLOUDFLARE_R2_SECRET_ACCESS_KEY=◉◉
CLOUDFLARE_R2_BUCKET=test
CLOUDFLARE_R2_ENDPOINT=https://〇〇.r2.cloudflarestorage.com

// 今回追加
CLOUDFLARE_R2_URL=https://media.example.com

これでカスタムドメインを通してパケットのデータを表示することができるようになりました。
DBに保存するときはこんな感じになると思います

〇〇Controller.php

use Illuminate\Support\Facades\Storage;
class 〇〇Controller extends Controller
{
    Storage::disk('r2')->put('example.txt', 'Hello World');
    $text = env('CLOUDFLARE_R2_URL') . '/' . 'example.txt';
}

Bladeで表示するとき

〇〇.blade.php

{{ $text }}

最終的なLaravelの設定ファイル

• .env

.env

CLOUDFLARE_R2_ACCESS_KEY_ID=◎◎
CLOUDFLARE_R2_SECRET_ACCESS_KEY=◉◉
CLOUDFLARE_R2_BUCKET=test
CLOUDFLARE_R2_ENDPOINT=https://〇〇.r2.cloudflarestorage.com
CLOUDFLARE_R2_URL=https://media.example.com

• config/filesystems.php

region を us-east-1 にしないとエラーに

.php

'r2' => [
    'driver' => 's3',
    'key' => env('CLOUDFLARE_R2_ACCESS_KEY_ID'),
    'secret' => env('CLOUDFLARE_R2_SECRET_ACCESS_KEY'),
    'region' => 'us-east-1',
    'bucket' => env('CLOUDFLARE_R2_BUCKET'),
    'endpoint' => env('CLOUDFLARE_R2_ENDPOINT'),
],

• 〇〇Controller.php

〇〇Controller.php

use Illuminate\Support\Facades\Storage;
class 〇〇Controller extends Controller
{
    Storage::disk('r2')->put('example.txt', 'Hello World');
    $text = env('CLOUDFLARE_R2_URL') . '/' . 'example.txt';
}

最後に

今回はR2をそのまま使いましたが、Workersを使うことでエグレス料金が無料になるみたいです。
(R2のクラスA、クラスB料金がかからない）

無料枠は1日10万リクエストなのでWorkersを利用した方がさらにお得になりそうです。
次回はWorkersを使ってエグレス料金を無料にする実装をまとめたいと思います。