¿Qué es Vercel y cómo beneficia al despliegue de APIs?
Vercel es una poderosa plataforma diseñada para facilitar el despliegue y la gestión de aplicaciones. Es especialmente popular en proyectos frontend, pero también permite integrar y desplegar APIs en backend, haciendo posible un flujo de desarrollo más ágil y eficiente. Una de sus mayores ventajas es la capacidad de automatizar el ciclo de integración y despliegue directamente desde el repositorio de código fuente, lo que se traduce en que cualquier cambio en la rama principal del repositorio puede llevar a un nuevo deployment sin necesidad de ejecutar comandos manuales.
¿Cómo crear una cuenta en Vercel?
Para comenzar a usar Vercel, necesitarás crear una cuenta. Puedes iniciar sesión o registrarte de las siguientes maneras:
Con una cuenta existente de GitHub, GitLab o Bitbucket, lo cual es recomendable para integrar directamente con tu repositorio.
Utilizando un correo electrónico y contraseña.
¿Cómo desplegar una API con Vercel?
Login en Vercel: Accede a tu cuenta en Vercel y vincula tu repositorio de GitHub, seleccionando el proyecto que deseas desplegar.
Configurar el entorno de trabajo: Vercel requiere que el código productivo resida en la rama principal (main o master). Asegúrate de mover todo el código necesario a esa rama y realizar un merge si es necesario.
git checkout main
git merge rama19
Agregar el proyecto: Vercel te permitirá seleccionar el framework correcto para tu proyecto. Aunque está más orientado al frontend, se pueden desplegar aplicaciones backend como aquellas desarrolladas en Express.js.
¿Cómo preparar tu proyecto para Vercel?
Organizar la estructura de archivos: Vercel solicita que las APIs estén dentro de una carpeta específica llamada /api. Todos los archivos de servicios y middlewares deben moverse allí.
mkdir api
mv index.js api/
Modificar las rutas en el package.json: Si has cambiado la ubicación de tus archivos, actualiza las rutas en los scripts de inicio y desarrollo.
Configuraciones de endpoints: Es necesario prefijar las rutas con /api para cumplir con los requisitos de Vercel.
Leer el puerto desde una variable de entorno, asegurando la buena práctica para adaptarse a múltiples plataformas.
¿Cómo configurar vercel.json?
Este archivo define cómo Vercel gestionará tu aplicación. Un aspecto crucial es redirigir el tráfico correctamentemente para que funcione como un backend:
Una vez completados los ajustes, solo necesitas hacer commit a la rama principal, ya que Vercel detectará el cambio y gestionará el despliegue automáticamente:
gitadd.git commit -m "deploy"git push origin main
Podrás observar el proceso completo de despliegue desde la consola de Vercel, verificando que todo esté listo y funcionando.
¿Qué esperar después del despliegue?
Con tu API ahora en producción, se genera una URL donde esta es accesible. Asegúrate de probar cada endpoint y verificar que todas las funciones respondan adecuadamente. Además, puedes reemplazar el dominio generado por Vercel por uno personalizado para una presentación más profesional.
Con los conocimientos sobre Heroku y Vercel, ya posees herramientas robustas para el despliegue y la administración de tus APIs en producción. ¡Sigue perfeccionando tus habilidades y explorando nuevas tecnologías para mantenerte siempre a la vanguardia!
Tuve un problema con los limites de Vercel, al inicio pense que era por el numero de endpoints finales, pero solo configuré el archivo vercel.json quedó así:
Gracias brother, tuve el mismo error, pero no sabia como solucionarlo, aunque no entendí el por que fue.
Muchas gracias genio.
Es segunda vez que hago este curso y la vez anterior no tenía esta clase. Gracias por mantener la calidad y los cursos actualizados. Ahora iré a hacer deploy en mi cuenta de Vercel. Excelente :smirk_cat:
Martes 20-02-2024:
tener en cuenta por si les aparece un error.
vercel.json:
{"rewrites":[{"source":"/api/(.*)","destination":"/api"}],"builds":[{"src":"/api/index.js","use":"@now/node"}]}```2. npm install @hapi/boom@9.1.4.3.module.exports= app;(al final de api/index.js)
Me salía el error de "Function_Invocation_Failed" al intentar acceder al servidor a través del dominio que da Vercel en el navegador.
Me di cuenta que esto ocurre por un bug en la versión 10.0.1 de @hapi/boom. Lo que hice fue hacer un downgrade de esa versión a la versión que se utiliza en el curso (npm i @hapi/boom@9.1.4).
Además, en la documentación de Vercel pone que hay que hacer un module.exports = app al final del index.js que tenemos en la carpeta api. Con estos cambios debería funcionar.
Documentación Vercel:
Espero les sirva!
Es verdad, genera conflictos con las nuevas versiones y simplemente haciendo la instalación de esa versión (npm i @hapi/boom@9.1.4) se soluciona.
GRACIAS!!! NICO, por actualizar el curso!! gracias Platzi
mi backend en render
Que bien que actualicen con clases así ahora que heroku ya no es gratis
Hola!! Tendrás para compartir tu repositorio?? Después de hacer el deploy en vercel me dejó de funcionar la petición de buscar producto por ID, y no me doy cuenta donde puede estar el problema... Quisiera comparar mi código con el tuyo a ver en qué le pifié!
Prrrooooooooofff eres un chido!
Después de batallar un poco se logró, deben tener en cuenta que es posible que tengan que cambiar algunas rutas al mover las carpetas (esto se comprueba corriendo en local). Y también tuve que ajustar la referencia en el package.json.
Además, actualmente el ajuste en vercel.json está obsoleto, del comentario de Alejandro Chavez, hay que cambiar el "@now/node" por "@vercel/node"
Y yo no tengo ni un commit, como que la rama 19 ajajajaaj
Esta es la configuración recomendada del archivo vercel,json marcada por vercel! me funciono para hacer el deploy!
Muchisimas gracias 💖, con tu comentario pude hacer deploy.
Es importante que la version quede en 2 o superior, eso me causaba error al momento de mandalo a vercel.
ami no me funciono ni heroku ni vercel pero despues de buscar por todo internet porfin me funciono una : fl0
cuando intento logearme con github me dice "account not found" pero tambien recivi el correo de github diciendo que se habia conectado.. alguien mas le pasa?
Cuando cree la carpeta api, me cambio las rutas en los require('./ejemplo') y ahora me dice que no puede encontrar esos modulos :'(
El problema es la white list el profesor no nos explico bien como configurarlo en vercel.
Ganial el curso, pero no me funciono el despliegue en Vercel. Arroja un error 500 al momento de modificar los endpoints. Segui todo los pasos del cursos. Las consultas con Insomnia funcionan perfectamente.
cuando ejecuto npm run dev, tambien funciona correctamente.
Me salía el error de "Function_Invocation_Failed" al intentar acceder al servidor a través del dominio que da Vercel en el navegador.
Me di cuenta que esto ocurre por un bug en la versión 10.0.1 de @hapi/boom. Lo que hice fue hacer un downgrade de esa versión a la versión que se utiliza en el curso (npm i @hapi/boom@9.1.4).
Además, en la documentación de Vercel pone que hay que hacer un module.exports = app al final del index.js que tenemos en la carpeta api. Con estos cambios debería funcionar.
Documentación Vercel:
Buenas, lograste corregirlo, ya hice lo q los demás han recomendado y nada
Genialllll, se siente bien al obtener este primer resultado. Ahora a seguir practiando, gracias teacher. :)
Vercel también es otra alternativa a Heroku. Nos permite lograr algo muy interesante en nuestro flujo de desarrollo, y es que nos permite unificar todo el ciclo de integración y despliegue a través del mismo repositorio, lo que nos evita tener que unirnos a vercel o sus servidores para correr comandos de despliegue. En cambio, lo que hace vercel es mantenerce leyendo la rama master del proyecto. Inmediatamente hacemos un nuevo commit, genera un despliegue a producción de forma automática.