EasyApp

Cloudflare R2 Storage

How to use Cloudflare R2 storage

Although Supabase provides object storage service, the capacity is quite limited - only 1GB for the free tier. However, Cloudflare R2 offers 10GB of storage space per month even in the free version. Therefore, we strongly recommend using Cloudflare R2 for storage services.

In the EasyAppSupabase template, we have already provided a Cloudflare R2 upload function. You just need to configure the environment variables.

You can find the upload function code in the EasyAppSupabase/supabase/functions/oss-cf-r2 directory.

Get R2 Credentials

  1. Login to Cloudflare Dashboard
  2. Navigate to R2 -> Overview
  3. Click Manage

cfr2_1

cfr2_2

  1. Create new API Token, enter name, select Object Read & Write, click Create

cfr2_3

  1. Copy Access Key ID and Secret Access Key

cfr2_4

  • Token Value is CLOUDFLARE_API_TOKEN
  • Access Key ID is R2_ACCESS_KEY_ID
  • Secret Access Key is R2_SECRET_ACCESS_KEY
  1. Find your Account ID (displayed on the right side of R2 page)

cfr2_5

  • Account ID is CLOUDFLARE_ACCOUNT_ID

Create R2 Bucket

  1. Navigate to R2 -> Overview
  2. Click Create bucket
  3. Enter bucket name (e.g., easyapp-bucket)
  4. Keep other configurations as default
  5. Click Create bucket
  • Bucket Name is R2_BUCKET_NAME

Configure Public Access (Optional)

  1. Enter your bucket settings
  2. Click Settings -> Public Development URL -> Enable
  3. Strongly recommend binding custom domain

cfr2_6

  • Custom Domain is R2_PUBLIC_URL

Cloudflare officially recommends binding custom domains. Default domains have rate limits and are not recommended for production.

Configure Environment Variables (for development)

Based on the above steps, add the following configuration in supabase/.env.local:


CLOUDFLARE_ACCOUNT_ID=your_account_id
  CLOUDFLARE_API_TOKEN=your_api_token

R2_ACCESS_KEY_ID=your_access_key_id
R2_SECRET_ACCESS_KEY=your_secret_access_key

R2_BUCKET_NAME=easyapp-bucket

R2_PUBLIC_URL=https://your-bucket.your-domain.com

Production Environment

Go to the EasyAppSupabase template, run npm run deploy command in the root directory. This command will automatically deploy functions and database to Supabase.

Next, we need to configure the environment variables you obtained in Edge Functions.


CLOUDFLARE_ACCOUNT_ID=your_account_id
  CLOUDFLARE_API_TOKEN=your_api_token

R2_ACCESS_KEY_ID=your_access_key_id
R2_SECRET_ACCESS_KEY=your_secret_access_key

R2_BUCKET_NAME=easyapp-bucket

R2_PUBLIC_URL=https://your-bucket.your-domain.com

cfr2_7

Reminder

  • Token Value is CLOUDFLARE_API_TOKEN

  • Access Key ID is R2_ACCESS_KEY_ID

  • Secret Access Key is R2_SECRET_ACCESS_KEY

  • Account ID is CLOUDFLARE_ACCOUNT_ID

  • Bucket Name is R2_BUCKET_NAME

  • Custom Domain is R2_PUBLIC_URL

    Cloudflare officially recommends binding custom domains. Default domains have rate limits and are not recommended for production.

At this point, you have completed the Cloudflare R2 configuration. Next, you can experience the upload functionality in the EasyAppSwiftUI template.

This feature is implemented in EasyAppSwiftUI/App/Developer/SubPages/OSSCfR2Bucket/View/OSSCfR2BucketView.swift.

Last updated on