¿Cuáles son los pasos para desplegar la aplicación en Vercel?
Los pasos par desplegar una aplicación en Vercel son los siguientes:
- Asegúrate de tener una cuenta en https://vercel.com/
- Dentro de Vercel conecta el repo del proyecto desde GitHub para que realice el despliegue. New > Project > Import Git Repository > “Elegir el Proyecto” > Deploy
El proyecto generará un error pero esto es normal.
env.mjs
El archivo env.mjs contiene una serie de validadores que se aseguran que las variables estén correctamente definidas antes de lanzar el proyecto, por ello hemos visto un error durante el despliegue anterior.
.env
El archivo .env no forma parte de los archivos del repositorio, pero es utilizado para guardar de manera local la configuración de las variables de entorno.
Por default el T3 Stack viene configurado para trabajar con una base de datos sqlite:
DATABASE_URL="file:./db.sqlite"
En nuestro caso vamos a configurar una base de datos mysql en Planet Scale.
Crear una base de datos en Planet Scale
Asegúrate de tener una cuenta en planetscale.com, se pueden crear bases de datos Hobby que son gratuitas, pero toma en cuenta que para ello requerirás una tarjeta de crédito, que es necesaria solo para identificar que eres una persona que no desea abusar de los servicios ofrecidos por Planet Scale.
Completa la información para crear una nueva base de datos:
- Nombre: elige_uno
- Region: la_que_utilices_en_vercel
Presiona Create para completar la creación de la base de datos.
Para obtener la configuración para conectar a la base de datos, elige Connect > Connect With > Prisma. El cuadro texto te mostrara el string que deberás utilizar dentro del archivo .env, en mi caso:
DATABASE_URL='mysql://****:****@aws.connect.psdb.cloud/chirp?sslaccept=strict'
Es importante recordar que el archivo .env no debe ser agregado al repositorio, por ello se incluye listado dentro del archivo gitignore.
Configuración del schema.prisma
El archivo schema.prisma contiene la información sobre el gestor utilizado por Prisma, en nuestro caso vamos a actualizar de sqlite a mysql.
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
relationMode = "prisma"
}
Para poder escalar en producción Planet Scale no soporta el uso de relaciones como es el caso de MySQL, sin embargo Prisma emula el uso de estas relaciones de manera que el ORM pueda seguir proporcionando esta funcionalidad.
Conectarse a prisma studio
Prisma Studio es una herramienta que nos permite trabajar directamente con la base de datos como si de un gestor se tratara, para abrirlo utilizamos.
pnpm prisma studio
Al intentar entrar dentro de la base de datos de prueba, esta nos va a lanzar un error debido a que no hemos sincronizado los cambios que realizamos en el prisma.schema con la base de datos en Planet Scale.
pnpm prisma db push
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": MySQL database "chirp" at "aws.connect.psdb.cloud"
🚀 Your database is now in sync with your Prisma schema. Done in 2.19s
Vuelve a intentar abrir prisma studio y agregar/eliminar registros dentro de la base de datos.
Al empujar los cambios a Vercel, la configuración de la base de datos también se va a actualizar.
Actualizar la configuración de la base de datos en Vercel
Ahora hay que ir a Vercel y agregar en las variables de entorno la variable DATABASE_URL, con su respectivo valor. Pera ello dirígete dentro del proyecto, en Settings > Environment Variables y agrega DATABASE_URL
Empuja nuevamente los cambios a GitHub, esto también generara un nuevo despliegue en Vercel con la configuración de la base de datos actualizada.
Dentro de Vercel ve a la sección de Deployments (Despliegues) y cuando finalice el despliegue - sin problemas en esta ocasión - da click sobre el botón Visit (Visitar) para ir al sitio del proyecto.
En esta lección hemos podido realizar el primer despliegue de nuestra aplicación dentro de Vercel, además aprendimos a utilizar prisma studio que nos permite agregar, modificar y eliminar registros directamente en nuestra base de datos, para ello configuraramos una base de datos en planetscale.com, que es un servicio de almacenamiento de bases de datos autoescalables en la nube.