Cloudflare R2

Cloudflare R2 (opens in a new tab) Object Storage adalah layanan penyimpanan objek yang kuat dan skalabel yang disediakan oleh Cloudflare. Ini memungkinkan kamu menyimpan berbagai jenis data, termasuk gambar, video, dokumen, dan lainnya, dengan keandalan tinggi dan performa yang baik. Cloudflare R2 Object Storage didukung oleh jaringan global Cloudflare, yang memungkinkan pengiriman data dengan cepat ke pengguna di seluruh dunia.

Referensi: Apa Itu Cloudflare R2? (opens in a new tab)

Mempunyai akun Cloudflare

Untuk menggunakan layanan dari Cloudflare, tentunya kamu wajib memiliki akun Cloudflare terlebih dahulu. Kamu dapat mendaftar di situs web Cloudflare (opens in a new tab) dan mengikuti proses pendaftaran yang sederhana.

Setelah sukses mendaftar akun di Cloudflare, kamu dapat melakukan log in (opens in a new tab) dengan akun yang sudah didaftarkan.

Setup Cloudflare R2

Melakukan Order/Payment R2

Setelah kamu masuk ke akun Cloudflare, langkah selanjutnya adalah melakukan pengisian kartu kredit (disarankan menggunakan kartu virtual: Bank Jago, Jenius, Blu, dll). Kemudian, kamu dapat mengikuti langkah-langkah berikut:

• Masuk ke dashboard Cloudflare.
• Pilih R2 dari menu.

• Silakan isi detail payment di sebelah kanan Tenang saja, untuk Object Storage dari Cloudflare ini tidak berbayar. Kamu hanya disuruh untuk mengisikan saja, tapi akan dikenakan biaya jika pemakaian melebihi batas yang ditentukan. Kamu akan mendapatkan free storage sebesar 10GB.

• Pengisian untuk kartu kredit sudah selesai (pembayaran). Ketika proses payment telah sukses, maka kamu akan melihat detail fitur fitur yang dapat dimanfaatkan.

Membuat Bucket

Setelah kamu masuk ke akun Cloudflare, langkah selanjutnya adalah membuat "bucket" untuk menyimpan data kamu. Bucket adalah wadah virtual untuk menyimpan objek kamu. Kamu dapat membuat bucket baru dengan langkah-langkah berikut:

• Masuk ke dashboard Cloudflare.
• Pilih R2 dari menu, kemudian pilih Overview.
• Klik tombol Create bucket.
• Berikan nama pada bucket kamu, misal devscale-nextlms.
• Pilih lokasi penyimpanan yang sesuai (yang terdekat dengan lokasi kamu saat ini). Kita pilih saja Automatic.
• Pilih Default Storage Class. Kita pilih saja Standard.
• Klik tombol Create bucket.

Detil Bucket

Setelah membuat bucket, kamu dapat melihat detil dari bucket yang kamu buat sebelumnya. Klik nama bucket kamu, kemudian klik tab Settings.

• Name: Nama bucket kamu, devscale-nextlms, R2_BUCKET_NAME untuk ditambahkan di environment variables env.
• Location: Nama region kamu, apac.
• S3 API: Upload Endpoint R2 kamu, R2_UPLOAD_ENDPOINT untuk ditambahkan di environment variables env.

Mengaktifkan Akses URL Publik

Lalu, kita perlu mendapatkan Public R2 Bucket URL, agar file-file yang sudah kita upload ke R2 bisa diakses secara publik.

Kita harus mengaktifkan izin akses secara publik, masih di tab Settings scroll ke bawah cari R2.dev subdomain, pengaturan default-nya bertuliskan Not Allowed.

Klik tombol Allow Access yang ada di samping kanan.

Ketikan allow pada input, klik tombol Allow.

Kamu berhasil mengaktifkan izin akses untuk Public URL dan sudah berganti menjadi Allowed. Kamu dapat menyalin URL Public R2 yang ada di kolom input, yang nantinya akan kita akses dan ditambahkan di environment variables env, R2_PUBLIC_URL.

Membuat API Token

Agar kita dapat mengaksesnya, kita perlu membuat API Token untuk mendapatkan Access Key Id dan Secret Access Key. Kamu perlu mengaturnya di Manage R2 API Tokens di samping kanan dan di bawah tulisan Account ID.

Klik tombol Create API Token.

• Isikan Create API Token
• Token name diisi bebas, misal Devscale Nextlms.
• Kemudian pilih Permissions, kita coba pilih Object Read & Write.
• Kemudian pilih spesifik nama bucket, pilih Apply to specifc buckets only, kemudian pilih bucket yang sebelumnya kamu buat.

Jika sudah dipilih, klik tombol Create API Token.

Jika sudah dibuat API Token-nya, kamu dapat melihat Access Key Id dan Secret Access Key yang nantinya akan kita akses dan ditambahkan di environment variables env, R2_ACCESS_KEY dan R2_SECRET_KEY.

Integrasi ke Koding

Install Package AWS SDK Client S3

Kita perlu menginstal package @aws-sdk/client-s3 (opens in a new tab) ke proyek yang sudah kamu buat.

npm i @aws-sdk/client-s3 # using npm
pnpm add @aws-sdk/client-s3 # using pnpm

Membuat Utility R2

• JavaScript

Buat file aws.js pada folder utils, kemudian ketikan script sebagai berikut:

import { S3Client } from "@aws-sdk/client-s3";
 
export const s3Client = new S3Client({
  region: "apac",
  endpoint: process.env.R2_UPLOAD_ENDPOINT,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY,
    secretAccessKey: process.env.R2_SECRET_KEY,
  },
});

• TypeScript

Buat file aws.ts pada folder utils, kemudian ketikan script sebagai berikut:

import { S3Client } from "@aws-sdk/client-s3";
 
export const s3Client = new S3Client({
  region: "apac",
  endpoint: process.env.R2_UPLOAD_ENDPOINT as string,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY as string,
    secretAccessKey: process.env.R2_SECRET_KEY as string,
  },
});

Membuat Fitur untuk Upload File menggunakan R2

• JavaScript

Buat file untuk fitur upload file, beri nama contohnya uploadFile.js di dalam folder libs, kemudian ketikan perintah sebagai berikut:

import { s3Client } from "@/utils/aws";
import { PutObjectCommand } from "@aws-sdk/client-s3";
 
export async function uploadFile({ key, folder, body }) {
  // 1. Siapkan file sesuai format yang diminta oleh Cloudflare R2
 
  // convert from file to Buffer
  const buffer = Buffer.from(await body.arrayBuffer());
 
  // 2. Send Command (Command untuk upload file)
  try {
    const fileUpload = await s3Client.send(
      new PutObjectCommand({
        Bucket: process.env.R2_BUCKET_NAME,
        Key: `${folder}/${key}`,
        ContentType: body.type, // also u can specify -> "image/png"
        Body: buffer,
      })
    );
    console.log(fileUpload, "Upload OK! ✅");
  } catch (error) {
    console.log(error);
  }
}

• TypeScript

Buat file untuk fitur upload file, beri nama contohnya uploadFile.ts di dalam folder libs, kemudian ketikan perintah sebagai berikut:

import { s3Client } from "@/utils/aws";
import { PutObjectCommand } from "@aws-sdk/client-s3";
 
export async function uploadFile({
  key,
  folder,
  body,
}: {
  key: string;
  folder: string;
  body: any;
}) {
  // 1. Siapkan file sesuai format yang diminta oleh Cloudflare R2
 
  // convert from file to Buffer
  const buffer = Buffer.from(await body.arrayBuffer());
 
  // 2. Send Command (Command untuk upload file)
  try {
    const fileUpload = await s3Client.send(
      new PutObjectCommand({
        Bucket: process.env.R2_BUCKET_NAME as string,
        Key: `${folder}/${key}`,
        ContentType: body.type, // also u can specify -> "image/png"
        Body: buffer,
      })
    );
    console.log(fileUpload, "Upload OK! ✅");
  } catch (error) {
    console.log(error);
  }
}

Function uploadFile ini menerima 1 argument yang terdiri dari 3 key.

• key adalah untuk nama file
• folder adalah untuk nama folder
• body adalah untuk file yang ingin di-upload

Kemudian di dalam API kamu, kamu cukup memanggil uploadFile(), dan meng-upload file yang kamu inginkan. Seperti berikut:

await uploadFile({
  key: "contohGambar.png",
  folder: `nama-folder/${id}`,
  body: contohGambar,
});

Mengonfigurasi pada nextConfig

• JavaScript

Tambahkan script berikut pada file next.config.mjs.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "pub-...", // public url hostname of your images bucket
        pathname: "/**",
        protocol: "https",
      },
    ],
  },
};
 
export default nextConfig;

• TypeScript

Tambahkan script berikut pada file next.config.mjs atau next.config.ts.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "pub-...", // public url hostname of your images bucket
        pathname: "/**",
        protocol: "https",
      },
    ],
  },
};
 
export default nextConfig;

Membuat Environment Variables

Buat file .env, kemudian isikan script berikut:

R2_BUCKET_NAME= // Nama Bucket
R2_ACCESS_KEY= // Access Key Id
R2_SECRET_KEY= // Secret Access Key
R2_UPLOAD_ENDPOINT= // S3 API
R2_PUBLIC_URL= // Public Bucket URL

Boilerplate

Untuk boilerplate proyek Next.js, Prisma & Cloudflare R2, kamu dapat menyalin pada link repositori GitHub sebagai berikut:

(opens in a new tab)