+- Forums (https://bb.nurfachmi.com)
+-- Forum: My Category (https://bb.nurfachmi.com/forum-1.html)
+--- Forum: My Forum (https://bb.nurfachmi.com/forum-2.html)
+--- Thread: Getting Started with Cloudflare R2 (/thread-11.html)
Getting Started with Cloudflare R2 - admin - 05-02-2026
Quote:Reza Nurfachmi, January 4, 2025
Cloudflare R2 Storage adalah layanan penyimpanan objek (object storage) yang dirancang sebagai alternatif dari solusi penyimpanan cloud tradisional seperti Amazon S3. R2 menawarkan cara untuk menyimpan data tidak terstruktur dalam jumlah besar, seperti file, gambar, video, atau dokumen, dengan fokus pada efisiensi biaya dan kinerja.
Quote:
![[Image: cloudflare.png?resize=381%2C376&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/cloudflare.png?resize=381%2C376&ssl=1)
Keunggulan Utama Cloudflare R2
- Tanpa Biaya Egress
- Kompatibilitas dengan S3 API
- Skalabilitas Tinggi
- Kinerja Optimal di Edge
- Harga Kompetitif
Bagaimana Cloudflare R2 Bekerja?
R2 menyimpan data dalam bentuk objek, mirip dengan layanan object storage lainnya. Setiap objek diidentifikasi dengan kunci unik, dan metadata dapat ditambahkan untuk mempermudah pengelolaan data. Dengan integrasi yang mendalam ke dalam jaringan Cloudflare, data yang disimpan di R2 dapat diakses dengan cepat melalui jaringan edge Cloudflare.
Jika kamu tertarik untuk mencoba Cloudflare R2, penulis akan menjelaskan langkah-langkah untuk mengintegrasikan R2 ke aplikasimu. ?
---
Berikut adalah langkah-langkah untuk mengintegrasikan Cloudflare R2 Storage ke aplikasi kamu, khususnya jika sudah familiar dengan Amazon S3 atau ingin memanfaatkan kompatibilitas S3 API:
Langkah 1: Siapkan Bucket di Cloudflare R2
Pertama, login ke akun Cloudflare kamu di Cloudflare Dashboard. Kalau belum punya akun, maka register dahulu.
Kedua, akses menu R2 Object Storage dari sidebar. Jika ini adalah pertama kali, seharusnya muncul halaman register R2 seperti ini:
![[Image: register-r2.png?resize=640%2C465&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/register-r2.png?resize=640%2C465&ssl=1)
Jika seperti di atas, maka isi dulu formulir yang dibutuhkan. Tenang saja, kamu hanya akan ditagih jika melebihi batas pemakaian gratisannya kok.
Lalu bagaimana soal tarif Cloudflare R2 ini? Apa maksudnya Storage, Class A operations dan Class B operations?
![[Image: free-tier-r2.jpg?resize=640%2C401&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/free-tier-r2.jpg?resize=640%2C401&ssl=1)
Pada versi gratis, storage yang diberikan ialah sampai 10 GB per bulan. Jika lebih, maka akan kena biaya sebesar $0.015 per GB dari kuota berlebihnya. Jika ukuran storage kamu 15 GB, maka akan kena biaya sekitar $0.015 x 5 GB, yakni $0.075 atau setara dengan IDR 1.125 jika kurs di angka IDR 15.000.
Class A Operations, pada dasarnya adalah operasi yang cenderung mengubah status data, seperti menulis/upload atau memodifikasi objek, seperti PutObject (mengupload objek), CopyObject (menyalin objek), dan CompleteMultipartUpload (menyelesaikan upload multipart).
Adapun Class B Operations adalah operasi yang biasanya membaca status data yang ada tanpa mengubahnya. Contohnya ialah GetObject (mengambil objek) dan HeadObject (memeriksa metadata objek).
Baik, kembali lagi ke proses registrasi. Jika sudah berhasil memasukkan kredensial kartu kredit atau debit, maka akan muncul halaman seperti ini:
![[Image: r2-dashboard.png?resize=640%2C299&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-dashboard.png?resize=640%2C299&ssl=1)
Selanjutnya adalah membuat Bucket. Apa itu Bucket? Bucket adalah keranjang yang isinya adalah objek-objek yang akan kita upload nanti.
Silahkan isi nama bucket-mu.
![[Image: create-bucket.jpg?resize=640%2C574&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/create-bucket.jpg?resize=640%2C574&ssl=1)
Jika berhasil, maka halamannya akan beralih seperti ini:
![[Image: bucket-success.jpg?resize=640%2C345&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/bucket-success.jpg?resize=640%2C345&ssl=1)
Cobalah upload satu file dulu. Jika berhasil, maka tampilannya sebagai berikut:
![[Image: r2-upload-success.jpg?resize=640%2C296&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-upload-success.jpg?resize=640%2C296&ssl=1)
Saat ini, R2 kita hanya berlaku seperti flashdisk saja. Hanya bisa menyimpan data, tetapi belum bisa mengakses datanya secara online. Perhatikan pada bagian Public URL Access, di sana tertera Not allowed. Agar objek-objek yang kita upload bisa diakses, maka bagian tersebut harus berubah menjadi Allowed terlebih dahulu.
Caranya adalah klik menu Settings, lalu cari bagian Public Access sebagai berikut, kemudian klik tombol Allow Access.
![[Image: r2-go-public.jpg?resize=640%2C115&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-go-public.jpg?resize=640%2C115&ssl=1)
Lalu ikuti arahannya sampai berubah menjadi seperti ini:
![[Image: r2-public-domain.jpg?resize=640%2C138&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-public-domain.jpg?resize=640%2C138&ssl=1)
Jika berhasil, maka saat masuk ke dalam objeknya, maka akan muncul URL publiknya sebagai berikut:
![[Image: r2-public-url.jpg?resize=640%2C376&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-public-url.jpg?resize=640%2C376&ssl=1)
Sampai sini, maka saatnya lanjut ke langkah berikutnya.
---
Langkah 2: Instalasi SDK atau Library
Gunakan library yang mendukung Amazon S3 untuk mengintegrasikan aplikasi kita dengan R2. Contoh library populer:
PHP: AWS SDK for PHP
Node.js: AWS SDK for JavaScript
Python: Boto3
Go: Minio Go SDK
Etapipaak, sebelum itu kita harus punya token API untuk dapat melakukan operasi menggunakan library di atas. Bagaimana caranya? Begini.
Arahkan kembali ke halaman Overview R2 Object Storage, kemudian arahkan seperti gambar di bawah. Pilih Manage API tokens.
![[Image: r2-menu-create-token.jpg?resize=640%2C244&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-menu-create-token.jpg?resize=640%2C244&ssl=1)
Jika masih kosong, maka tampilannya sebagai berikut:
![[Image: r2-token-empty-1024x228.jpg?resize=640%2C143&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-token-empty-1024x228.jpg?resize=640%2C143&ssl=1)
Maka klik tombol Create API token untuk membuat satu. Berikut pengaturan penulis saat membuat token.
Token name: token-r2-read-write
Permissions: Object Read & Write: Allows the ability to read, write, and list objects in specific buckets.
Specify bucket(s): Apply to all buckets in this account (including newly created buckets)
TTL: Forever
Jika telah berhasil, maka silahkan simpan kredensial yang diberikan, antara lain:
- Token value
- Access Key ID
- Secret Access Key
- Default endpoint
- EU endpoint
Maka halamannya akan berubah menjadi seperti ini:
![[Image: r2-token-exists-1024x206.jpg?resize=640%2C129&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-token-exists-1024x206.jpg?resize=640%2C129&ssl=1)
Nah, selanjutnya kita akan mulai sedikit ngoding. Pada kali ini, saya contohkan pakai Laravel PHP ya.
---
Langkah 3: Contoh Kode Implementasi
Silahkan install Laravel fresh atau gunakan projek kamu yang ingin mengemplementasikan R2 ini.
Selanjutnya install package S3
PHP Code:
composer require league/flysystem-aws-s3-v3 "^3.0" --with-all-dependencies
Code:
./composer.json has been updated
Running composer update league/flysystem-aws-s3-v3 --with-all-dependencies
Loading composer repositories with package information
Updating dependencies
Lock file operations: 4 installs, 3 updates, 0 removals
- Locking aws/aws-crt-php (v1.2.7)
- Locking aws/aws-sdk-php (3.336.7)
- Upgrading guzzlehttp/promises (2.0.3 => 2.0.4)
- Upgrading league/flysystem (3.29.0 => 3.29.1)
- Locking league/flysystem-aws-s3-v3 (3.29.0)
- Locking mtdowling/jmespath.php (2.8.0)
- Upgrading symfony/deprecation-contracts (v3.5.0 => v3.5.1)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 4 installs, 3 updates, 0 removals
- Downloading aws/aws-crt-php (v1.2.7)
- Downloading mtdowling/jmespath.php (2.8.0)
- Downloading aws/aws-sdk-php (3.336.7)
- Downloading league/flysystem-aws-s3-v3 (3.29.0)
- Installing aws/aws-crt-php (v1.2.7): Extracting archive
- Upgrading symfony/deprecation-contracts (v3.5.0 => v3.5.1): Extracting archive
- Upgrading guzzlehttp/promises (2.0.3 => 2.0.4): Extracting archive
- Upgrading league/flysystem (3.29.0 => 3.29.1): Extracting archive
- Installing mtdowling/jmespath.php (2.8.0): Extracting archive
- Installing aws/aws-sdk-php (3.336.7): Extracting archive
- Installing league/flysystem-aws-s3-v3 (3.29.0): Extracting archive
3 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
INFO Discovering packages.
laravel/sail .............................................................................. DONE
laravel/tinker ............................................................................ DONE
nesbot/carbon ............................................................................. DONE
nunomaduro/collision ...................................................................... DONE
nunomaduro/termwind ....................................................................... DONE
78 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
INFO No publishable resources for tag [laravel-assets].
Found 4 security vulnerability advisories affecting 4 packages.
Run "composer audit" for a full list of advisories.Oke, selanjutnya adalah tambahkan baris berikut ke file .env kita.
Code:
R2_ACCESS_KEY_ID=YOUR_ACCESS_KEY
R2_SECRET_ACCESS_KEY=YOUR_SECRET_KEY
R2_BUCKET=YOUR_BUCKET_NAME
R2_ENDPOINT=XXXXXXX.r2.cloudflarestorage.comLalu cari key FILESYSTEM_DISK dan ubah nilainya menjadi r2 seperti ini:
Code:
FILESYSTEM_DISK=r2Kira-kira lengkapnya menjadi seperti ini:
Code:
FILESYSTEM_DISK=r2
// ...
R2_ACCESS_KEY_ID=17c995******b72dec******87976
R2_SECRET_ACCESS_KEY=fa55efa680d******5ecd898f06ae37761807f******b3bae36643f
R2_BUCKET=nurfachmi-academy
R2_ENDPOINT=https://9deccd0505******7560976cb3ff6.r2.cloudflarestorage.comBeberapa value di atas sudah disensor dengan karakter *.
Selanjutnya tambahkan pengaturan disk di filesystem yang ada di config/filesystem.php.
PHP Code:
<?php
return [
// ...
'disks' => [
// ...
'r2' => [
'driver' => 's3',
'key' => env('R2_ACCESS_KEY_ID'),
'secret' => env('R2_SECRET_ACCESS_KEY'),
'region' => 'auto',
'bucket' => env('R2_BUCKET'),
'url' => env('R2_URL'),
'endpoint' => env('R2_ENDPOINT'),
'use_path_style_endpoint' => env('R2_USE_PATH_STYLE_ENDPOINT', false),
'throw' => false,
],
],
];
Sip, sekarang kita beralih ke MVC-nya. Model, View, dan Controller. Let’s go!
---
Langkah 4: Model, View, dan Controller
Kita buat ketiganya dalam satu perintah.
PHP Code:
php artisan make:model Storage -mcr
Code:
INFO Model [app/Models/Storage.php] created successfully.
INFO Migration [database/migrations/2025_01_04_005141_create_storages_table.php] created successfully.
INFO Controller [app/Http/Controllers/StorageController.php] created successfully.Dengan perintah di atas, kita membuat model Storage sekaligus migration dan resource controller.
---
Untuk migration, kita buat sederhana dulu saja seperti ini:
PHP Code:
<?php
// ...
return new class extends Migration
{
public function up(): void
{
Schema::create('storages', function (Blueprint $table) {
$table->id();
$table->string('path');
$table->timestamps();
});
}
// ...
}
Jalankan migratenya
PHP Code:
php artisan migrate
File migration di atas setara dengan SQL command berikut:
PHP Code:
create table "storages" (
"id" integer primary key autoincrement not null,
"path" varchar not null,
"created_at" datetime,
"updated_at" datetime
);
---
Selanjutnya kita modifikasi file controllernya seperti ini:
PHP Code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class StorageController extends Controller
{
public function index()
{
return view('upload');
}
public function store(Request $request)
{
try {
$path = $request->file('file')->store('storage');
$storage = new \App\Models\Storage();
$storage->path = $path;
$storage->save();
} catch (\Throwable $th) {
dd($th->getMessage());
}
return back();
}
}
Pada method index, kita sesederhana menampilkan view yang nanti berada di resources/views/upload.blade.php dan isinya berupa form upload saja dengan 2 elemen, yakni element input file dan tombol.
Adapun pada method store, hanya berupa usaha untuk upload file ke Cloudflare R2 dan menyimpannya ke dalam model Storage. Jika gagal, maka akan menampilkan errornya dalam fungsi dd. Jika berhasil, maka kembali ke halaman upload lagi.
Kita hanya menggunakan dua method itu saja dan silahkan hapus method lainnya karena tidak diperlukan.
--
Terakhir, buat file baru dengan nama upload.blade.php dalam folder resources/views dan isinya sesederhana berikut:
PHP Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Upload to Cloudflare R2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body class="container">
<form action="{{ route('storage.store') }}" method="post" enctype="multipart/form-data">
@csrf
<input type="file" name="file" id="file" required>
<input type="submit" value="Upload">
</form>
</body>
</html>
--
Ups, sebelum kita coba di browser, kita harus menambahkan route juga di routes/web.php seperti ini:
PHP Code:
<?php
// ...
Route::resource('storage', \App\Http\Controllers\StorageController::class)
->only(['index', 'store']);
--
Nah, saatnya pembuktian di browser!
---
Langkah 5: Pembuktian!
Silahkan jalankan web kita dengan perintah:
PHP Code:
php artisan serve
Code:
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the serverKemudian buka browser dan arahkan ke alamat http://localhost:8000/storage. Seharusnya muncul halaman seperti ini:
![[Image: r2-upload-form.jpg?resize=532%2C139&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-upload-form.jpg?resize=532%2C139&ssl=1)
Silahkan coba upload satu gambar atau file.
Pastikan di bucket kamu sudah bertambah 1 objek baru. Jika tidak, berarti masih ada yang keliru dari langkah-langkah sebelumnya. Silahkan diperiksa kembali.
![[Image: r2-success-upload.jpg?resize=640%2C291&ssl=1]](https://i0.wp.com/nurfachmi.com/wp-content/uploads/2025/01/r2-success-upload.jpg?resize=640%2C291&ssl=1)
Nampak ada satu file terupload di folder dengan nama storage dalam bucket nurfachmi-academy tersebut.
Nah, demikian deh cara integrasi Cloudflare R2 ke dalam Laravel, sekaligus mengenalkan apa itu Cloudflare R2. Ada pertanyaan? Silahkan tanya di kolom komentar ya!
Salam.
![[Image: cloudflare-r2.png]](https://nurfachmi.com/wp-content/uploads/2025/01/cloudflare-r2.png)