Cómo desplegar proyectos Vercel en V2Networks usando Coolify

Requisitos previo

v0 es una herramienta de IA generativa basada en navegador de Vercel que convierte descripciones en lenguaje natural en aplicaciones full-stack desplegables. Produce scaffolding completo del proyecto, incluyendo componentes frontend, lógica backend y archivos de configuración de contenedores.
​
Coolify es una plataforma como servicio auto-alojada que maneja compilaciones de imágenes Docke.
​

Esta guía explica cómo generar una aplicación full-stack con v0, exportar el código fuente a GitHub e implementarla en un servidor V2Networks usando Coolify.
​

Antes de comenzar, necesitas:

v0 genera un proyecto completo a partir de una única instrucción y puede enviar el código resultante directamente a un repositorio de GitHub. La aplicación necesita al menos un Dockerfile para que Coolify pueda compilarla y ejecutarla. Para proyectos con múltiples servicios, como un contenedor de base de datos separado, solicita también un docker-compose.yml.
​

Paso 1: Acceder a v0

Navega a https://v0.app en un navegador web e inicia sesión con tu cuenta.
​

Paso 2: Escribir la descripción de la aplicación

Escribe una descripción detallada de tu aplicación en el campo de instrucción. Especifica la pila de tecnología y todas las características necesarias. Pide a v0 que incluya un Dockerfile, o un docker-compose.yml si el proyecto implica múltiples servicios. v0 genera los archivos fuente, estructura de directorios y configuración de contenedores según tu instrucción.
​

Paso 3: Enviar la instrucción

Haz clic en el botón de flecha para enviar la instrucción.
​

Paso 4: Esperar a que v0 termine de construir la aplicación

Espera a que se complete la construcción.
​

Paso 5: Inspeccionar el resultado

Inspecciona el resultado en el panel de vista previa interactivo. Confirma que las características generadas coincidan con tus requisitos.
​

Paso 6: Abrir configuración del proyecto

Haz clic en el icono de Configuración del proyecto en el encabezado superior en el lado derecho.
​

Paso 7: Seleccionar GitHub

Selecciona GitHub en la barra lateral izquierda.
​

Paso 8: Conectar repositorio

Haz clic en Conectar repositorio.
​

Paso 9: Autorizar v0

Inicia sesión con GitHub y autoriza a v0 para acceder a tus repositorios.
​

Paso 10: Crear repositorio

Ingresa un nombre para tu repositorio y haz clic en Crear repositorio.
​

v0 envía automáticamente el código fuente de tu aplicación al nuevo repositorio. El repositorio ahora contiene todos los archivos generados incluyendo el Dockerfile o docker-compose.yml.

V2Networks permite instalar Coolify con una interfaz web preconfigurada. Inicia sesión para crear la cuenta de administrador antes de conectar cualquier repositorio o proyecto.
​

Paso 1: Encontrar la URL de Coolify

Accede a tu panel de control de V2Networks y localiza la URL de Coolify en las instrucciones de tu servidor. Generalmente está en el formato http://DIRECCIÓN_IP_SERVIDOR:8000
​

Paso 2: Abrir Coolify en el navegador

Abre la URL en un navegador. El asistente de primera ejecución pide una dirección de correo electrónico y contraseña. Ingresa las credenciales para tu cuenta de administrador.
​

Paso 3: Crear cuenta

Coolify abre el panel de control después de que se crea la cuenta. La cuenta de administrador controla todos los despliegues, miembros del equipo y configuración del servidor.
​

Coolify requiere una conexión de fuente de GitHub antes de que pueda extraer código de tus repositorios. Usa el flujo OAuth para otorgar a Coolify acceso de lectura a tus repositorios seleccionados.
​

Paso 1: Ir a Fuentes

Haz clic en Sources en el panel de control de Coolify.
​

Paso 2: Agregar fuente de GitHub

Haz clic en Add Source y selecciona GitHub.
​

Paso 3: Autorizar acceso

Coolify te redirige a GitHub para autorización OAuth. Haz clic en Autorizar para otorgar acceso.
​

Paso 4: Confirmación

GitHub te redirige de regreso a Coolify después de la autorización exitosa. Coolify muestra tu cuenta de GitHub en la lista de Fuentes.
​

Un proyecto de Coolify agrupa aplicaciones y servicios relacionados bajo un espacio de nombres, lo que facilita administrar variables de entorno, dominios y recursos en conjunto.
​

Paso 1: Ir a Proyectos

Haz clic en Projects en el panel de control de Coolify.

Paso 2: Agregar proyecto

Haz clic en Add Project.

Paso 3: Ingresar nombre del proyecto

Ingresa un nombre de proyecto, como mi-app-v0.

Paso 4: Crear proyecto

Haz clic en Create. Coolify muestra la página de detalles del proyecto.

Coolify extrae el código fuente del repositorio de GitHub vinculado, construye una imagen Docker usando el Dockerfile o docker-compose.yml en la raíz del repositorio e inicia los contenedores resultantes.

Paso 1: Agregar recurso

Haz clic en Add Resource en la página de detalles del proyecto.

Paso 2: Seleccionar tipo de recurso

Selecciona Application como tipo de recurso.

Paso 3: Elegir fuente

Elige GitHub como fuente.

Paso 4: Seleccionar repositorio

Selecciona tu repositorio de aplicación v0 del menú desplegable.

Paso 5: Ingresar nombre de rama

Ingresa el nombre de la rama, típicamente main.

Paso 6: Seleccionar pack de construcción

Coolify escanea el repositorio e identifica la configuración del contenedor. Selecciona Docker Compose como pack de construcción para aplicaciones multi-contenedor.

Paso 7: Continuar

Haz clic en Continue.

Paso 8: Dominio temporal

Coolify genera un dominio temporal en el formato IDENTIFICADOR_ALEATORIO.DIRECCIÓN_IP_SERVIDOR.sslip.io para pruebas inmediatas. Configura un dominio personalizado

Paso 9: Guardar

Haz clic en Save. Coolify te redirige a la página de configuración de la aplicación.

Almacena secretos como claves de API y credenciales de base de datos en el administrador de variables de entorno de Coolify en lugar de codificarlos en archivos fuente. Coolify inyecta estos valores en el contenedor en tiempo de ejecución.

Paso 1: Abrir detalles de la aplicación

Abre la página de detalles de la aplicación.

Paso 2: Variables de entorno

Haz clic en Environment Variables.

Paso 3: Agregar variable

Haz clic en +Add para crear una nueva variable.

Paso 4: Ingresar datos de la variable

Ingresa el nombre y valor de la variable. Las variables comunes para aplicaciones v0 incluyen:

Paso 5: Guardar variables

Haz clic en Save después de agregar todas las variables necesarias.

Con el repositorio conectado y las variables de entorno guardadas, desencadena la compilación para compilar e iniciar los contenedores de la aplicación.

Paso 1: Desplegar

Haz clic en Deploy para desencadenar el proceso de despliegue.

Paso 2: Monitorear compilación

Coolify inicia la compilación. Haz clic en Logs para ver la salida en tiempo real.

Coolify funciona a través de los siguientes pasos:

La mayoría de las aplicaciones están en vivo dentro de 3-5 minutos.

Paso 3: Confirmar despliegue

Cuando el despliegue se completa exitosamente, el estado de la aplicación cambia a Running.

Verifica que la aplicación sea accesible antes de cambiar a un dominio de producción.

Paso 1: Ver enlaces

Haz clic en Links en la página de detalles de la aplicación para ver las URL accesibles.

Paso 2: Abrir la aplicación

Haz clic en el enlace del dominio generado por Coolify para abrir tu aplicación.

Paso 3: Verificar funcionalidad

Tu aplicación se carga en http://IDENTIFICADOR_ALEATORIO.DIRECCIÓN_IP_SERVIDOR.sslip.io

Verifica que todas las características funcionen correctamente.

Reemplaza el dominio temporal sslip.io con tu dominio personalizado para uso en producción. Coolify aprovisiona automáticamente certificados TLS de Let's Encrypt.

Paso 1: Abrir configuración

Abre la página de detalles de la aplicación.

Paso 2: Ir a configuración

Selecciona Configuration de la barra lateral izquierda.

Paso 3: Actualizar dominio

Localiza el campo Domains y reemplaza el dominio generado por Coolify con tu dominio personalizado. Ingresa https://app.ejemplo.com en el campo.

Paso 4: Habilitar HTTPS automático

Habilita Automatic HTTPS para aprovisionar certificados de Let's Encrypt.

Paso 5: Guardar cambios

Haz clic en Save.

Paso 6: Redirigir

Haz clic en Redeploy para aplicar la configuración del dominio.

Paso 7: Esperar propagación

Coolify reemite la compilación con el dominio actualizado y solicita un certificado de Let's Encrypt. Permite 2-3 minutos para que se complete el proceso.

Paso 8: Verificar certificado

Abre el dominio en un navegador y confirma que aparezca el icono de candado en la barra de direcciones, indicando un certificado TLS activo.

Coolify puede ejecutar un contenedor de PostgreSQL administrado dentro del mismo proyecto. El contenedor de base de datos comparte una red interna de Docker con tu aplicación, manteniendo la cadena de conexión fuera del internet público.

Paso 1: Volver a detalles del proyecto

Regresa a la página de detalles del proyecto.

Paso 2: Agregar recurso

Haz clic en Add Resource.

Paso 3: Seleccionar tipo de base de datos

Selecciona Database.

Paso 4: Elegir PostgreSQL

Elige PostgreSQL como tipo de base de datos.

Paso 5: Nombre de base de datos

Ingresa un nombre para la base de datos, como app-bd.

Paso 6: Crear base de datos

Haz clic en Create. Coolify genera la base de datos y sus credenciales automáticamente.

Paso 7: Copiar cadena de conexión

Copia la cadena de conexión interna de la página de detalles de la base de datos.

Paso 8: Actualizar variables de entorno

Abre la sección Environment Variables de tu aplicación.

Paso 9: Establecer DATABASE_URL

Establece DATABASE_URL en la cadena de conexión copiada.

Paso 10: Reiniciar

Haz clic en Restart para aplicar la nueva conexión.

Coolify admite despliegue continuo a través de webhooks de GitHub, reconstruyendo y redesplegando automáticamente tu aplicación en cada push.

Paso 1: Abrir detalles de la aplicación

Abre la página de detalles de la aplicación.

Paso 2: Ir a configuración

Haz clic en Settings.

Paso 3: Habilitar despliegue automático

Habilita Automatic Deployment.

Paso 4: Copiar URL del webhook

Coolify muestra una URL de webhook. Copia la URL.

Paso 5: Abrir configuración del repositorio

Abre tu repositorio de GitHub y haz clic en Settings.

Paso 6: Agregar webhook

Haz clic en Webhooks en la barra lateral izquierda, luego haz clic en Add webhook.

Paso 7: Pegar URL del webhook

Pega la URL copiada en el campo Payload URL.

Paso 8: Establecer tipo de contenido

Establece el tipo de contenido en application/json.

Paso 9: Seleccionar evento push

Selecciona Just the push event.

Paso 10: Guardar webhook

Haz clic en Add webhook para guardar.

Paso 11: Verificar webhook

GitHub envía un payload de prueba a Coolify. Verifica que el webhook muestre una marca de verificación verde.

Realiza un pequeño cambio de código para confirmar que Coolify detecte la actualización y redirigir automáticamente.

Paso 1: Editar archivo

Edita cualquier archivo en tu código de aplicación.

Paso 2: Preparar cambios

Prepara los cambios:

Paso 3: Confirmar cambios

Confirma los cambios:

Paso 4: Enviar a GitHub

Envía a GitHub:

Paso 5: Despliegue automático

Coolify detecta el evento push e inicia un nuevo despliegue automáticamente.

Paso 6: Ver historial de despliegues

Abre la página de detalles de la aplicación en Coolify.

Paso 7: Ver despliegues

Haz clic en Deployments para ver el historial de despliegues.

Paso 8: Verificar estado

La entrada más reciente aparece en la parte superior con un estado Building.

Paso 9: Ver registros

Haz clic en Logs para seguir la salida de compilación en tiempo real.

Paso 10: Completar despliegue

Cuando la compilación se completa, el estado de despliegue cambia a Finished y la aplicación se reinicia con el código actualizado.

Agrega un flujo de trabajo de GitHub Actions para ejecutar pruebas automatizadas en cada push. Coolify solo recibe el desencadenador del webhook después de que todas las verificaciones del flujo de trabajo pasen, evitando que compilaciones rotas lleguen a producción.

Paso 1: Crear directorio de flujos de trabajo

Crea el directorio de flujos de trabajo de GitHub Actions:

Paso 2: Crear archivo de flujo de trabajo

Abre un nuevo archivo de flujo de trabajo en un editor de texto:

Paso 3: Agregar configuración de flujo de trabajo

Pega la siguiente configuración en el archivo. Actualiza los comandos de prueba para que coincidan con tu pila de aplicación.

Guarda y cierra el archivo.

Paso 4: Preparar archivo de flujo de trabajo

Prepara el archivo de flujo de trabajo:

Paso 5: Confirmar cambios

Confirma los cambios:

Paso 6: Enviar a GitHub

Envía a GitHub:

Paso 7: GitHub Actions ejecuta pruebas

GitHub Actions ejecuta las pruebas en cada push. Coolify despliega la aplicación solo después de que el flujo de trabajo se complete exitosamente.