Vercel lanza Vercel Services—implementación unificada de frontend y backend en un proyecto

Vercel ha introducido una nueva capacidad llamada Vercel Services, que permite ejecutar múltiples marcos — por ejemplo, un frontend Next.js y un backend FastAPI — dentro de un único Proyecto Vercel con despliegues compartidos y redes internas entre servicios.

Cómo configurar Vercel Services

Los servicios se describen en el archivo vercel.json bajo la clave "services": para cada servicio, especifica la ruta (root) y el marco o punto de entrada (entrypoint), y el enrutamiento de tráfico público se configura mediante rewrites. El tráfico público puede dirigirse solo al servicio de frontend, dejando el backend accesible exclusivamente desde dentro del proyecto.

• Configuración de servicios — a través de la clave "services" en vercel.json
• Ejemplo de la documentación de Vercel: servicio my_frontend en Next.js y servicio my_backend en FastAPI (entrypoint main:app)
• Backend en el ejemplo no tiene ruta pública — solo accesible al servicio my_frontend a través de la red interna
• El panel Deployments muestra visualización del gráfico de servicios, y la interfaz Logs permite filtrar logs por servicio individual
• El comando vercel dev inicia automáticamente todos los servicios localmente, replicando el ambiente de producción

Qué problema resuelve la combinación de servicios

Previamente, los equipos que combinaban un frontend JavaScript y, por ejemplo, un backend Python en un solo producto típicamente tenían que dividirlos entre diferentes plataformas en la nube: Vercel históricamente ha sido fuerte en despliegue de frontend basado en Next.js, mientras que los servicios de backend en FastAPI, Django o Flask típicamente iban a plataformas de hosting separadas. En la práctica, esto significaba dos sistemas CI/CD independientes, dos conjuntos de logs y monitoreo, y sincronización manual de versiones de frontend y backend con cada lanzamiento. Vercel Services cierra esta brecha: la configuración de múltiples marcos completos y servicios se describe en un archivo vercel.json, en lugar de ensamblarse manualmente desde configuraciones de diferentes plataformas.

Qué proporcionan los despliegues atómicos y los service bindings

Los despliegues atómicos garantizan que frontend, backend y otros servicios del proyecto se desplieguen y reviertan en sincronización, no por separado. Los despliegues de vista previa compartida muestran cómo un único cambio afecta todos los servicios a la vez. Una configuración separada de bindings permite que los servicios se llamen entre sí directamente, sin pasar por la internet pública: por ejemplo, la clave BACKEND_INTERNAL_URL se pasa automáticamente a las variables de entorno del frontend y señala la dirección interna del backend.

Qué significa esto

Vercel Services cierra una brecha prolongada entre las partes frontend y backend de un único producto, que previamente a menudo vivían en diferentes nubes con sus propios procesos de desarrollo y despliegue. Para equipos que combinan un frontend JavaScript y, por ejemplo, un backend Python en FastAPI, esto significa despliegue unificado, flujo de vista previa compartida, y conectividad interna directa entre servicios sin proxies inversos y configuración CORS. Para la plataforma, esto también es una forma de retener dentro de su ecosistema equipos que previamente se fueron con la porción de backend del proyecto a hostings de terceros simplemente porque Vercel no ofrecía una forma conveniente de mantener el stack completo en un único lugar.

Preguntas frecuentes

¿Qué es Vercel Services?

Es una capacidad de Vercel para ejecutar múltiples servicios — por ejemplo, un frontend Next.js y un backend FastAPI — dentro de un único Proyecto Vercel con enrutamiento compartido, despliegues atómicos y escalado automático; la configuración se especifica en vercel.json bajo la clave "services".

¿Necesitan los servicios un proxy inverso para comunicarse entre sí?

No. Según la documentación de Vercel, los servicios pueden conectarse a una tabla de enrutamiento compartida y su interacción configurarse a través de bindings sin proxy inverso y sin configuración CORS.