Migrate To Cloudflare R2 Storage: A Step-by-Step Guide

by Admin 55 views
Migrate to Cloudflare R2 Storage: A Step-by-Step Guide

Overview

This comprehensive guide details a step-by-step migration from Supabase Storage to Cloudflare R2, focusing on the wombie bucket. We'll cover everything from Cloudflare configuration and credential setup to file migration and necessary application code changes. Let's dive in, guys!

Bucket Name: wombie Target CDN Domain: cdn.wombie.com (or a new subdomain like files.wombie.com)

Phase 1: Cloudflare R2 Configuration

1.1 Bucket Settings

First, navigate to Cloudflare Dashboard → R2 → wombie bucket → Settings.

Storage Class

  • [x] Standard (default, no action needed)

Bucket Location

  • Verify the location hint matches your primary user base (Auto or a specific region). Getting this right ensures your users get the fastest possible access to your files. The bucket location should ideally be close to where most of your users are located. This minimizes latency and improves overall performance. It's also a good idea to check Cloudflare's documentation for recommended regions based on your user demographics. Additionally, consider future expansion plans when choosing a region. If you anticipate growing your user base in a new geographic area, selecting a region that supports that area can save you migration headaches down the road. Remember, optimizing for location is a key step in providing a smooth user experience.

1.2 CORS Policy

Now, head to wombie bucket → Settings → CORS Policy → Add CORS policy.

[
  {
    "AllowedOrigins": [
      "https://wombie.com",
      "https://www.wombie.com",
      "https://eventasaur.us",
      "http://localhost:4000"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "DELETE",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "Content-Length",
      "Content-MD5",
      "Authorization",
      "X-Amz-Date",
      "X-Amz-Content-Sha256",
      "X-Amz-Security-Token"
    ],
    "ExposeHeaders": [
      "ETag",
      "Content-Length"
    ],
    "MaxAgeSeconds": 3600
  }
]

The CORS (Cross-Origin Resource Sharing) policy is crucial for security and determines which domains are allowed to access your R2 bucket's resources. The provided JSON configuration specifies the allowed origins, methods, and headers. It's important to ensure that all your application domains are included in the AllowedOrigins array. This includes both the www and non-www versions of your domain, as well as any subdomains or local development environments. The AllowedMethods array lists the HTTP methods that are permitted for cross-origin requests. Typically, you'll want to include GET, PUT, POST, DELETE, and HEAD. The AllowedHeaders array specifies which headers are allowed in the actual request. It's important to include common headers like Content-Type, Authorization, and any custom headers your application uses. The ExposeHeaders array lists the headers that the browser can access in the response. ETag and Content-Length are commonly exposed. Finally, MaxAgeSeconds specifies the maximum time (in seconds) that a browser can cache the CORS policy. Setting this to a reasonable value, like 3600 (1 hour), can improve performance by reducing the number of preflight requests. Ensuring a properly configured CORS policy is essential for preventing unauthorized access to your R2 bucket.

1.3 Public Access (Custom Domain)

Go to wombie bucket → Settings → Public access.

Option A: R2.dev subdomain (Quick test)

  • Enable "R2.dev subdomain" for immediate public access.
  • URL format: https://pub-<hash>.r2.dev/path/to/file
  • ⚠️ Not recommended for production (no custom domain, no caching control).

Option B: Custom Domain (Recommended)

  1. Click "Connect Domain".
  2. Enter: files.wombie.com (or r2.wombie.com).
  3. Cloudflare will auto-create the DNS record.
  4. SSL is auto-configured.
  5. URL format: https://files.wombie.com/path/to/file

Using a custom domain is highly recommended for production environments as it provides better control over branding and caching. The R2.dev subdomain is suitable for quick testing but lacks the benefits of a custom domain. When connecting a custom domain, Cloudflare automatically handles DNS record creation and SSL configuration, simplifying the setup process. Choose a subdomain that is relevant to your storage purpose, such as files.wombie.com or r2.wombie.com. This makes it easier to identify and manage your R2 assets. Once the custom domain is connected, you can access your files using the specified URL format. This allows you to serve your content through a branded domain, improving user trust and SEO. Additionally, custom domains enable you to leverage Cloudflare's caching capabilities, which can significantly improve performance and reduce bandwidth costs. By using a custom domain, you gain full control over your R2 storage and ensure a consistent and professional user experience.

1.4 Cache Rules (Optional but Recommended)

Go to Cloudflare Dashboard → Websites → wombie.com → Rules → Cache Rules

Create a rule for R2 assets:

If: Hostname equals "files.wombie.com"
Then:
  - Cache eligibility: Eligible for cache
  - Edge TTL: Override - 1 year (for immutable assets)
  - Browser TTL: Override - 1 week
  - Cache key: Include query string

Setting up cache rules is essential for optimizing the performance of your R2 assets. By defining cache rules, you can control how Cloudflare caches your files, reducing latency and improving the user experience. The recommended configuration includes setting the cache eligibility to