Files
reactbin/specs/014-r2-cdn-serving/quickstart.md
agatha aaacfae653 Feat: Serve images directly from Cloudflare R2 CDN
API responses now include file_url and thumbnail_url fields. When
S3_PUBLIC_BASE_URL is configured, these point to the CDN domain;
when unset, they fall back to the existing API proxy paths so local
dev requires no additional setup. UI updated to use response URL
fields directly instead of constructing proxy URLs client-side.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 00:17:22 +00:00

1.7 KiB

Quickstart: CDN Image Serving

Local development (no CDN)

No configuration change required. S3_PUBLIC_BASE_URL is unset by default.

docker compose up

Upload an image and inspect the API response:

curl -s http://localhost:8000/api/v1/images | jq '.items[0] | {file_url, thumbnail_url}'

Expected (local dev — relative proxy paths):

{
  "file_url": "/api/v1/images/550e8400-.../file",
  "thumbnail_url": "/api/v1/images/550e8400-.../thumbnail"
}

The UI loads images via these relative paths, which hit the API proxy as before.


Production (CDN configured)

Add S3_PUBLIC_BASE_URL to the Vault secret bundle at reactbin/api/config:

S3_PUBLIC_BASE_URL = https://cdn.reactbin.juggalol.com

Force VSO sync and restart:

kubectl annotate vaultstaticsecret api-secret -n reactbin \
  secrets.hashicorp.com/force-sync=$(date +%s) --overwrite

kubectl rollout restart deployment/api -n reactbin

Upload a test image and inspect the response:

curl -s https://reactbin.juggalol.com/api/v1/images | jq '.items[0] | {file_url, thumbnail_url}'

Expected (production — CDN URLs):

{
  "file_url": "https://cdn.reactbin.juggalol.com/e3b0c44...",
  "thumbnail_url": "https://cdn.reactbin.juggalol.com/e3b0c44....thumb"
}

Open the browser network panel on the library page and confirm image requests go to cdn.reactbin.juggalol.com, not /api/.


Verifying existing images after migration

All existing images were migrated to R2 with the same object keys before this feature was deployed. Once S3_PUBLIC_BASE_URL is configured, the API will return CDN URLs for all images immediately — no per-image migration step is needed.