R2 è l'S3 che già conosci, con una fattura che non punisce il traffico

La maggior parte delle guide "R2 quickstart" ti mostra la dashboard e si ferma. R2 in produzione è la pipeline di upload qui sotto: il client non riceve mai la secret key, il file va dritto a R2 senza fare proxy dal tuo server e la riga di metadati canonica viene scritta solo dopo che l'upload è andato a buon fine. Tre file; niente costi a sorpresa, niente credenziali trapelate, niente file orfani nel bucket.

1. URL di upload pre-firmato

Una Server Action emette un URL PUT pre-firmato con TTL breve. Il client fa upload diretto su R2 usando quell'URL; il server non vede mai i byte.

// app/[lang]/(app)/upload/actions.ts
'use server'

import { z } from 'zod'
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
import { PutObjectCommand } from '@aws-sdk/client-s3'
import { randomUUID } from 'crypto'
import { r2 } from '@/lib/r2/client'
import { getServerSession } from '@/lib/auth/server'

const Input = z.object({
  filename: z.string().min(1).max(255),
  contentType: z.enum(['image/jpeg', 'image/png', 'image/webp', 'application/pdf']),
  size: z.number().int().positive().max(50 * 1024 * 1024),
})

export async function requestUploadUrl(
  raw: unknown,
): Promise<{ ok: true; key: string; url: string } | { ok: false; error: string }> {
  const session = await getServerSession()
  if (!session) return { ok: false, error: 'unauthorised' }

  const parsed = Input.safeParse(raw)
  if (!parsed.success) return { ok: false, error: 'invalid input' }

  const key = `${session.tenantId}/${randomUUID()}-${parsed.data.filename}`

  const url = await getSignedUrl(
    r2,
    new PutObjectCommand({
      Bucket: process.env.R2_BUCKET!,
      Key: key,
      ContentType: parsed.data.contentType,
      ContentLength: parsed.data.size,
    }),
    { expiresIn: 60 },
  )

  return { ok: true, key, url }
}

2. Il client R2

L'AWS SDK punta a R2 cambiando una sola riga di config: l'endpoint. Tutto il resto resta standard, così tooling AWS e CLI esistenti funzionano senza modifiche.

// src/lib/r2/client.ts
import { S3Client } from '@aws-sdk/client-s3'

export const r2 = new S3Client({
  region: 'auto',
  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
  },
})

3. Il client fa upload diretto su R2

Il browser usa l'URL pre-firmato con una singola richiesta PUT. L'evento di progress guida la UI; niente round-trip al server per ogni chunk.

// app/[lang]/(app)/upload/UploadForm.tsx
'use client'

import { useState } from 'react'
import { requestUploadUrl } from './actions'
import { confirmUpload } from './confirm'

export function UploadForm() {
  const [progress, setProgress] = useState(0)
  const [error, setError] = useState<string | null>(null)

  async function handleFile(file: File) {
    setError(null)
    setProgress(0)

    const reqResult = await requestUploadUrl({
      filename: file.name,
      contentType: file.type,
      size: file.size,
    })
    if (!reqResult.ok) {
      setError(reqResult.error)
      return
    }

    await new Promise<void>((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open('PUT', reqResult.url)
      xhr.setRequestHeader('Content-Type', file.type)
      xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
          setProgress(Math.round((e.loaded / e.total) * 100))
        }
      })
      xhr.addEventListener('load', () => {
        if (xhr.status === 200) resolve()
        else reject(new Error(`R2 returned ${xhr.status}`))
      })
      xhr.addEventListener('error', () => reject(new Error('upload failed')))
      xhr.send(file)
    })

    await confirmUpload({ key: reqResult.key, size: file.size })
  }

  return (
    <div>
      <input
        type="file"
        onChange={(e) => {
          const file = e.target.files?.[0]
          if (file) void handleFile(file)
        }}
      />
      {progress > 0 && progress < 100 ? <progress value={progress} max={100} /> : null}
      {error ? <p role="alert">{error}</p> : null}
    </div>
  )
}

4. Lo step di conferma scrive la riga di metadati

Il client dice al server "l'upload è riuscito per questa chiave". Il server verifica che l'oggetto esista in R2 (richiesta HEAD), poi scrive la riga canonica files.

// app/[lang]/(app)/upload/confirm.ts
'use server'

import { HeadObjectCommand } from '@aws-sdk/client-s3'
import { z } from 'zod'
import { r2 } from '@/lib/r2/client'
import { createServerClient } from '@/lib/supabase/server'
import { getServerSession } from '@/lib/auth/server'

const Input = z.object({
  key: z.string().min(1).max(500),
  size: z.number().int().positive(),
})

export async function confirmUpload(
  raw: unknown,
): Promise<{ ok: true; id: string } | { ok: false; error: string }> {
  const session = await getServerSession()
  if (!session) return { ok: false, error: 'unauthorised' }

  const parsed = Input.safeParse(raw)
  if (!parsed.success) return { ok: false, error: 'invalid input' }

  // Lega la chiave al tenant autenticato; il prefisso codifica il tenant.
  if (!parsed.data.key.startsWith(`${session.tenantId}/`)) {
    return { ok: false, error: 'invalid key' }
  }

  // Verifica che l'oggetto sia atterrato davvero su R2.
  let head
  try {
    head = await r2.send(
      new HeadObjectCommand({
        Bucket: process.env.R2_BUCKET!,
        Key: parsed.data.key,
      }),
    )
  } catch {
    return { ok: false, error: 'object not found in R2' }
  }

  const supabase = await createServerClient()
  const { data, error } = await supabase
    .from('files')
    .insert({
      tenant_id: session.tenantId,
      uploader_id: session.userId,
      r2_key: parsed.data.key,
      content_type: head.ContentType ?? 'application/octet-stream',
      size_bytes: head.ContentLength ?? parsed.data.size,
      status: 'ready',
    })
    .select('id')
    .single()

  if (error) return { ok: false, error: error.message }
  return { ok: true, id: data.id }
}

5. Cosa ti compra questo

Il server non vede mai i byte, quindi l'upload scala indipendentemente dal tuo budget di esecuzione delle funzioni. Il prefix R2 codifica il tenant, quindi un client malevolo non può fare upload nel namespace di un altro tenant nemmeno con un signed URL leakato. La riga canonica di metadati viene scritta solo dopo che l'upload riesce, quindi i file orfani nel bucket non sono un problema. La fattura cala su costo di storage e costo per richiesta; l'egress è zero che tu serva il file una volta o un milione.

Questo è la voce di costo che il marketing di R2 mette in vetrina, configurata in un flusso reale di produzione invece di lasciata come screenshot in un tour della dashboard.