Como subir una aplicación backend y frontend a Fly.io y Vercel

July 13, 2023

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 entorno DATABASE_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,