Despliegue
En este articulo vamos a ver como desplegar una aplicación backend y frontend en fly.io y vercel. Esta el proyecto que vamos a subir en este repositorio, la carpeta de back será la que desplegaremos en fly.io y la carpeta de front será la que desplegaremos en vercel.
Back
- Registrarse en https://fly.io/
- Instalar flyctl https://fly.io/docs/hands-on/install-flyctl/
- Crear un servicio para la BBDD con este script:
fly pg create --name DATABASE_NAME --region cdg
- Crear un servicio para la aplicación con este script:
fly deploy
- Vamos a subir la aplicación a fly.io
fly deploy
- Vamos a inserir la variable de entorno en fly.io
fly pg attach NOMBRE_DE_BBDD
Poner atención a los siguientes puntos:
- en el
db.js
acordarse de poner la variable de entornoDATABASE_URL
ej.
const SLONIK_URL = process.env.DATABASE_URL;
- en el
cors.js
añadir en la whitelist la url del front ej.
const whitelist = [
"http://localhost:3000",
"https://deploy-example.vercel.app",
];
- de haber creado las tablas en la BBDD
fly postgres connect -a DDBB_NAME
Front
- Registrarse en https://vercel.com/
- Instalar vercel https://vercel.com/download
- Crear un servicio para la aplicación con este script:
vercel
- Vamos a subir la aplicación a vercel
vercel --prod
Poner atención a los siguientes puntos:
- en el
.env
acordarse de poner la url del back ej.
const VITE_API_URL = "https://deploy-example.fly.dev";
- en el axios create acordarse de la variable de entorno
baseURL: import.meta.env.VITE_API_URL,