Cómo generar URLs pre-firmadas para Supabase…

How to Generate Pre-signed URLs for Supabase Storage with Cloudflare Workers

ℹ️ Available today with LaunchFast Starter Kits

En esta guía, aprenderás a generar URLs pre-firmadas para Supabase Storage con Astro en Cloudflare Workers. Pasarás por el proceso de configurar un nuevo proyecto Astro, habilitar la renderización del lado del servidor usando el adaptador de Cloudflare, obtener las credenciales de Supabase y luego crear funciones para generar URLs pre-firmadas para la recuperación y carga desde Supabase Storage.

Requisitos previos

Para seguir, necesitarás:

Node.js 20 o posterior
Una cuenta de Supabase

Tabla de Contenidos

Crear una nueva aplicación Astro
Integrar el adaptador de Cloudflare en tu proyecto Astro
Crear un proyecto Supabase
Configurar el Bucket de Supabase Storage
Configurar las Políticas RLS de Supabase Storage
Generar las URLs pre-firmadas
Desplegar en Cloudflare Workers

Crear una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Abre tu terminal y ejecuta el siguiente comando:

npm create astro@latest my-app

npm create astro es la forma recomendada de crear rápidamente un proyecto Astro.

Cuando se te pregunte, elige:

Use minimal (empty) template cuando se te pregunte cómo iniciar el nuevo proyecto.
Yes cuando se te pregunte si deseas instalar dependencias.
Yes cuando se te pregunte si deseas inicializar un repositorio git.

Una vez hecho esto, puedes moverte al directorio del proyecto y comenzar la aplicación:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321. A continuación, ejecuta el siguiente comando para instalar la biblioteca necesaria para construir la aplicación:

npm install

No se necesitan bibliotecas adicionales, ya que usaremos la API nativa fetch para comunicarnos directamente con la API REST de Supabase.

Integrar el adaptador de Cloudflare en tu proyecto Astro

Para generar URLs pre-firmadas para cada objeto dinámicamente, habilitarás la renderización del lado del servidor en tu proyecto Astro a través del adaptador de Cloudflare. Ejecuta el siguiente comando:

npx astro add cloudflare

Cuando se te pregunte, elige lo siguiente:

Y cuando se te pregunte si deseas instalar las dependencias de Cloudflare.
Y cuando se te pregunte si deseas realizar cambios en el archivo de configuración de Astro.

Has habilitado con éxito la renderización del lado del servidor en Astro.

Para asegurarte de que la salida sea desplegable en Cloudflare Workers, crea un archivo wrangler.toml en la raíz del proyecto con el siguiente código:

name = "supabase-storage-astro-workers"
main = "dist/_worker.js"
compatibility_date = "2025-04-01"
compatibility_flags = [ "nodejs_compat" ]

[assets]
directory="dist"
binding="ASSETS"

[vars]
SUPABASE_URL=""
SUPABASE_ANON_KEY=""
SUPABASE_BUCKET_NAME=""

Después de eso, asegúrate de tener tanto un archivo .env como un archivo wrangler.toml con las variables definidas para que puedan ser accedidas durante npm run dev y cuando se despliegue en Cloudflare Workers respectivamente.

Además, actualiza el archivo astro.config.mjs con lo siguiente para poder acceder a estas variables en el código de manera programática:

// ... Importaciones existentes...
import { defineConfig, envField } from 'astro/config'

export default defineConfig({
  env: {
    schema: {
      SUPABASE_URL: envField.string({ context: 'server', access: 'secret', optional: false }),
      SUPABASE_ANON_KEY: envField.string({ context: 'server', access: 'secret', optional: false }),
      SUPABASE_BUCKET_NAME: envField.string({ context: 'server', access: 'secret', optional: false }),
    }
  }
  // adaptador
})

Crear un proyecto Supabase

Ve a supabase.com e inicia sesión en tu cuenta.
Haz clic en New Project para crear un nuevo proyecto.
Completa los detalles del proyecto:
- Name: Elige un nombre para tu proyecto
- Database Password: Establece una contraseña segura para tu base de datos
- Region: Selecciona la región más cercana a tus usuarios
Haz clic en Create new project y espera a que el proyecto se configure.
Una vez que el proyecto esté listo, ve a la pestaña Settings en el panel de tu proyecto.
Navega a la sección API Keys para encontrar tu clave API y copia el siguiente valor:
- Clave anon public (esta será tu SUPABASE_ANON_KEY)
Navega a la sección Data API para encontrar la URL de tu proyecto y copia el siguiente valor:
- Project URL (esta será tu SUPABASE_URL)

Configurar el Bucket de Supabase Storage

En el panel de Supabase, navega a Storage en la barra lateral izquierda.
Haz clic en Create a new bucket.
Introduce un nombre para el bucket (este será el valor de tu SUPABASE_BUCKET_NAME).
Elige si el bucket debe ser público o privado:
- Public: Cualquier persona con la URL puede acceder a los archivos
- Private: Los archivos requieren autenticación para acceder
Haz clic en Create bucket.

Configurar las Políticas RLS de Supabase Storage

Las políticas de Row Level Security (RLS) controlan el acceso a tus buckets de almacenamiento. Para las URLs pre-firmadas, necesitarás crear políticas que permitan a los usuarios autenticados subir y descargar archivos.

En el panel de Supabase, ve a Storage > Policies.
Selecciona tu bucket y haz clic en New Policy.
Para el acceso de carga, crea una política con la siguiente configuración:
- Policy Name: Allow authenticated uploads
- Allowed Operations: INSERT
- Target roles: anon
- Policy Definition: bucket_id = ‘your-bucket-name’
Para el acceso de descarga, crea otra política:
- Policy Name: Allow authenticated downloads
- Allowed Operations: SELECT
- Target roles: anon
- Policy Definition: bucket_id = ‘your-bucket-name’
Haz clic en Review y luego en Save policy.

Generar las URLs pre-firmadas

1. Acceder a las Variables de Entorno

El primer paso es acceder a las variables de entorno necesarias durante el tiempo de ejecución para comunicarse con la API REST de Supabase. Desde Astro 5.6 y posteriores, la forma en que deseas acceder a las variables de entorno en tiempo de ejecución en tu código es utilizando la función getSecret de astro:env/server para mantener las cosas agnósticas al proveedor. Esto es crucial para almacenar información sensible de manera segura sin codificarla directamente en tu aplicación. Recuperarás las siguientes variables:

URL del Proyecto Supabase
Clave Anon de Supabase
Nombre del Bucket de Supabase Storage

import { getSecret } from 'astro:env/server'

const body = JSON.stringify({ expiresIn: 60 * 60 })

const SUPABASE_URL = getSecret('SUPABASE_URL')
const SUPABASE_BASE_STORAGE_API = `${SUPABASE_URL}/storage/v1`

const headers = new Headers()
headers.append('x-upsert', 'true')
headers.append('Content-Type', 'application/json')
headers.append('Authorization', `Bearer ${getSecret('SUPABASE_ANON_KEY')}`)

2. URL Pre-firmada para GET un Objeto de Storage (recuperar)

La función getSupabaseObject a continuación recupera la URL pre-firmada de un objeto desde Supabase Storage usando la API REST. Genera una URL firmada que te permite acceder al archivo de manera segura durante un tiempo limitado.

// ...Código existente...

export async function getSupabaseObject(objectPath: string) {
  try {
    const objectCall = await fetch(`${SUPABASE_BASE_STORAGE_API}/object/sign/${getSecret('SUPABASE_BUCKET_NAME')}/${objectPath}`, {
      body,
      headers,
      method: 'POST',
    })
    const objectResp = await objectCall.json()
    if (!objectCall.ok) throw new Error(JSON.stringify(objectResp))
    return [SUPABASE_BASE_STORAGE_API, objectResp.signedURL].join('')
  } catch (e: any) {
    const tmp = e.message || e.toString()
    console.log(tmp)
    return
  }
}

3. URL Pre-firmada para PUT un Objeto de Storage (cargar)

La función uploadSupabaseObject a continuación es responsable de generar una URL pre-firmada para cargar un archivo a Supabase Storage usando la API REST. Crea una URL firmada que te permite cargar archivos de manera segura.

// ...Código existente...

export async function uploadSupabaseObject(file: { name: string; type: string }) {
  try {
    const objectCall = await fetch(`${SUPABASE_BASE_STORAGE_API}/object/upload/sign/${getSecret('SUPABASE_BUCKET_NAME')}/${file.name}`, {
      body,
      headers,
      method: 'POST',
    })
    const objectResp = await objectCall.json()
    if (!objectCall.ok) throw new Error(JSON.stringify(objectResp))
    return [SUPABASE_BASE_STORAGE_API, objectResp.url].join('')
  } catch (e: any) {
    const tmp = e.message || e.toString()
    console.log(tmp)
    return
  }
}

4. Crear un Endpoint del Servidor (una Ruta API) en Astro

import type { APIContext } from 'astro'
import { getSupabaseObject, uploadSupabaseObject } from '../../storage/supabase'

// Define una función asincrónica llamada GET que acepta un objeto de solicitud.
export async function GET({ request }: APIContext) {
  // Extrae el parámetro 'file' de la URL de la solicitud.
  const url = new URL(request.url)
  const file = url.searchParams.get('file')

  // Verifica si el parámetro 'file' existe en la URL.
  if (file) {
    try {
      const filePublicURL = await getSupabaseObject(file)
      // Devuelve una respuesta con la URL pública de la imagen y un código de estado 200.
      return new Response(filePublicURL)
    } catch (error: any) {
      // Si ocurre un error, registra el mensaje de error y devuelve una respuesta con un código de estado 500.
      const message = error.message || error.toString()
      console.log(message)
      return new Response(message, { status: 500 })
    }
  }
  // Si el parámetro 'file' no se encuentra en la URL, devuelve una respuesta con un código de estado 400.
  return new Response('Invalid Request.', { status: 400 })
}

export async function POST({ request }: APIContext) {
    // Extrae los parámetros de la URL de la solicitud.
    const url = new URL(request.url)
    const name = url.searchParams.get('name')
    const type = url.searchParams.get('type')

    if (!name || !type) {
      return new Response('Invalid Request. Missing name or type.', { status: 400 })
    }

    try {
      // Genera una URL de carga para el archivo
      const uploadUrl = await uploadSupabaseObject({ name, type })
      // Devuelve una respuesta de éxito con la URL de carga
      return new Response(uploadUrl)
    } catch (error: any) {
      // Si hubo un error durante el proceso de carga, devuelve una respuesta 500 con el mensaje de error
      const message = error.message || error.toString()
      console.log(message)
      return new Response(message, { status: 500 })
    }
}

Desplegar en Cloudflare Workers

Para hacer que tu aplicación sea desplegable en Cloudflare Workers, crea un archivo llamado .assetsignore en el directorio public con el siguiente contenido:

_routes.json
_worker.js

A continuación, necesitarás usar la CLI de Wrangler para desplegar tu aplicación en Cloudflare Workers. Ejecuta el siguiente comando para desplegar:

npm run build && npx wrangler@latest deploy

Conclusión

En este artículo, aprendiste cómo integrar Supabase Storage con Astro y Cloudflare Workers para cargas y recuperaciones de archivos. Siguiendo los pasos de implementación, puedes cargar y recuperar archivos de Supabase Storage de manera segura, asegurando que tu aplicación web tenga una solución de almacenamiento robusta y flexible.

Si deseas explorar secciones específicas con más detalle, ampliar ciertos conceptos o cubrir temas relacionados adicionales, por favor házmelo saber y estaré encantado de ayudarte.

Cómo generar URLs pre-firmadas para Supabase Storage con Astro en Cloudflare Workers