Tutorial Git: Desplegar en Vercel desde GitHub

Introducción a Vercel: Plataforma de hosting para frontends y serverless

Vercel es una plataforma de alojamiento en la nube especializada en aplicaciones front-end y funciones serverless. Se ha diseñado para simplificar el proceso de despliegue y escalado de aplicaciones web modernas.

Una de las ventajas principales de Vercel es su capacidad para automatizar el ciclo de vida de una aplicación web. Al conectar un repositorio, se permite que cada cambio realizado en el código se despliegue automáticamente, asegurando que la aplicación esté siempre actualizada y disponible para los usuarios.

Las funciones serverless permiten que se pueda añadir lógica backend a las aplicaciones sin preocuparse por la infraestructura subyacente. Vercel se encarga de gestionar la ejecución y el escalado de estas funciones.

Además, Vercel proporciona una red de distribución de contenidos (CDN) global. Esto garantiza que las aplicaciones se sirvan desde ubicaciones cercanas al usuario final, mejorando la velocidad de carga y la experiencia del usuario.

Conexión con GitHub: Autenticación y selección de repositorio

Conectar Vercel con GitHub permite automatizar el despliegue de proyectos al integrar ambos servicios. Para iniciar el proceso, se debe acceder a la plataforma de Vercel y entrar en la cuenta personal o crear una nueva si aún no se dispone de una.

Una vez dentro del panel de control de Vercel, se selecciona la opción "Importar proyecto". Al hacerlo, Vercel ofrecerá varios servicios de control de versiones; se elige GitHub para continuar. A continuación, Vercel solicitará permiso para acceder a la cuenta de GitHub, lo que implica autenticar la conexión entre ambas plataformas.

Durante la autenticación, GitHub presentará una pantalla donde se deben autorizar los permisos solicitados por Vercel. Es posible otorgar acceso a todos los repositorios o seleccionar únicamente aquellos específicos que se desean desplegar. Para mayor seguridad, se recomienda seleccionar repositorios específicos, asegurando así que Vercel solo interactúa con los proyectos elegidos.

Después de otorgar los permisos necesarios, se regresa automáticamente a Vercel. Aquí, se mostrará una lista con los repositorios disponibles en GitHub. Se procede a elegir el repositorio que se quiere desplegar. Si se tienen muchos repositorios, se puede utilizar el campo de búsqueda para encontrar el proyecto.

Al seleccionar el repositorio, Vercel detectará automáticamente la configuración del proyecto y presentará opciones adicionales. Se debe confirmar la rama predeterminada para el despliegue, que generalmente es main o master, aunque se puede cambiar si se trabaja en una rama diferente.

Antes de finalizar, se revisan las opciones de configuración ofrecidas por Vercel, como las variables de entorno o los scripts de build. Si no se requieren ajustes especiales, se puede proceder con la configuración predeterminada.

Finalmente, se hace clic en "Desplegar" para iniciar el proceso. Vercel comenzará a construir y desplegar la aplicación automáticamente. A partir de este momento, cada vez que se realice un commit y se ejecute un push al repositorio en GitHub, Vercel actualizará el despliegue de forma continua.

Configuración de proyectos: Frameworks soportados (Next.js, React, etc.)

Al importar un proyecto en Vercel, se hace una detección automática del framework que se utiliza. Vercel es compatible con una muchos frameworks como Next.js, React, Vue.js, Angular y Svelte.

Ejemplo Angular:

Cuando se identifica el framework, Vercel establece los comandos de build y las rutas de salida de forma predeterminada. Por ejemplo, en proyectos Next.js, se utiliza el comando next build y se sirve la aplicación optimizada. 

En este caso hace la build de Angular:

Se pueden personalizar los ajustes de compilación si se necesita. En la sección de configuración del proyecto dentro del panel de Vercel, se pueden modificar los comandos de build y las carpetas de output. Si se quiere especificar una versión particular de Node.js o del framework, se pueden establecer mediante el archivo package.json o configurando las variables de entorno correspondientes.

Una vez termina ya está desplegado:

Para proyectos que no utilizan un framework reconocido, se puede seleccionar la opción "Other" durante la configuración. Esto permite proporcionar manualmente los comandos necesarios para construir y desplegar la aplicación. Se suele indicar el comando de compilación y la carpeta donde se generan los archivos estáticos.

Pulsando ha generando un dominio para la aplicación:

Vercel soporta también proyectos monorepo, facilitando el despliegue de múltiples aplicaciones desde un solo repositorio. Si se trabaja con un monorepo, se configura el directorio raíz para apuntar al subdirectorio específico del proyecto que se quiere desplegar.

Aquí hay una lista de frameworks soportados por Vercel:

• Next.js
• React
• Vue.js (incluyendo Nuxt.js y Vue CLI)
• Angular
• Svelte (SvelteKit)
• Gatsby
• Eleventy
• Ember.js
• Preact
• Blitz.js

Durante la configuración, si se quieren agregar variables de entorno, se pueden definir en la sección correspondiente.

Para proyectos que incluyen funciones serverless, Vercel detecta automáticamente las API Routes o funciones definidas. En el caso de Next.js, las API Routes permiten crear endpoints backend de forma sencilla, y Vercel se encarga de su despliegue sin necesidad de configuración adicional.

Es importante verificar que todas las dependencias estén correctamente declaradas en el archivo package.json. Se evita así errores durante el proceso de compilación y despliegue. Además, se recomienda probar localmente el proyecto antes de hacer un push al repositorio para asegurarse de que funciona como se espera.

Si se quiere consultar documentación específica sobre la configuración de un framework en particular, Vercel proporciona guías detalladas en su sitio web.

Despliegue automático: commit y push para despliegue automático

Una vez establecida la integración entre Vercel y GitHub, el proceso de despliegue automático se habilita sin necesidad de configuraciones adicionales. Cada modificación realizada en el código fuente que se confirme y envíe al repositorio remoto desencadena una nueva versión desplegada de la aplicación.

Al realizar cambios en el proyecto, se sigue el flujo habitual de Git. Por ejemplo, si se edita el archivo app.js, se añade al área de preparación con git add app.js. Luego, se confirma el cambio con un mensaje claro mediante git commit -m "Añade funcionalidad de autenticación". Finalmente, se sube el commit al repositorio remoto con git push origin main.

git add app.js
git commit -m "Añade funcionalidad de autenticación"
git push origin main

Al ejecutar git push, se envían los commits al repositorio de GitHub en la rama especificada. Vercel detecta automáticamente este evento y comienza el proceso de compilación y despliegue de la aplicación. Este procedimiento incluye:

• Instalación de dependencias definidas en package.json.
• Ejecución del comando de build configurado en Vercel.
• Optimización y empaquetado de los recursos.
• Actualización del entorno de producción con los cambios nuevos.

Este mecanismo asegura que cada vez que se haga push a la rama principal, la aplicación refleje las últimas actualizaciones sin intervención manual.

Además, si se trabaja con ramas diferentes a main, Vercel crea despliegues previos para cada push realizado. Esto permite visualizar y probar los cambios en un entorno similar al de producción antes de fusionarlos. Cada despliegue previo tiene una URL única que se puede compartir con el equipo para realizar revisiones o demostraciones.

En el panel de Vercel, se pueden monitorizar los logs del despliegue y el estado actual de la aplicación. Si se detecta un problema, se accede a los detalles del error para solucionarlo.

Por otro lado, Vercel permite configurar qué ramas se deben desplegar automáticamente mediante la sección de ajustes del proyecto. Si se quiere, se pueden limitar los despliegues automáticos a determinadas ramas o configurar entornos específicos para cada una.