CloudFlare R2 Integration

R2 is an object storage service provided by CloudFlare that seamlessly integrates with CloudFlare's CDN service and can serve as a static file storage and distribution service.

There are many scenarios that require file storage, for example:

• User avatar storage
• Saving AI-generated images and videos to the cloud
• Blog image storage

With these needs, administrators also require a file management backend.

The Nexty.dev template addresses these requirements by encapsulating file upload and deletion methods based on CloudFlare R2, and provides a backend for viewing and managing files.

In this chapter, we'll complete the CloudFlare R2 configuration.

Configure CloudFlare R2

1. Visit the CloudFlare R2 page and start creating a Bucket

2. Go to Bucket Settings and copy R2_BUCKET_NAME and R2_ACCOUNT_ID to environment variables

3. Set up custom domain

4. Add the configured custom domain with https:// prefix to environment variable R2_PUBLIC_URL

# .env.local or .env
 
R2_PUBLIC_URL=https://R2_PUBLIC_URL

5. Configure CORS Policy, which controls which origins (domains, protocols, ports) can access resources stored in your R2 Bucket. This is a security mechanism to protect your resources from unauthorized cross-origin access.

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://your-domain.com"
    ],
    "AllowedMethods": [
      "GET"
    ]
  }
]

6. Now return to the R2 homepage and start creating an API Key

7. Add the API Key to environment variables R2_ACCESS_KEY_ID and R2_SECRET_ACCESS_KEY

Verification

You can start the source code repository and test R2-related features in the following modules:

• /dashboard/settings page to test avatar upload
• /ai-demo page to test AI-generated image and video uploads
• /dashboard/images page to manage AI Demo generated images and videos