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

  1. Registrarse en https://fly.io/
  2. Instalar flyctl https://fly.io/docs/hands-on/install-flyctl/
  3. Crear un servicio para la BBDD con este script:
fly pg create --name DATABASE_NAME --region cdg
  1. Crear un servicio para la aplicación con este script:
fly deploy
  1. Vamos a subir la aplicación a fly.io
fly deploy
  1. 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

  1. Registrarse en https://vercel.com/
  2. Instalar vercel https://vercel.com/download
  3. Crear un servicio para la aplicación con este script:
vercel
  1. 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,