Parte 2 Deploying Your FastAPI and React.js CRUD App on Render.com
En la Parte 1 construimos una app CRUD full stack con FastAPI en el backend y React en el frontend. Ahora la pondremos en producción en Render, una plataforma gratuita y amigable para principiantes. Publicaremos el backend como Web Service y el frontend como Static Site, resolveremos errores frecuentes como CORS e importaciones y repasaremos buenas prácticas para un despliegue estable.
Este contenido está pensado para principiantes. Partimos de que tienes el proyecto en un repositorio Git como GitHub y que ya funciona en local.
Además, te presentamos a Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad, automatización de procesos, servicios cloud AWS y Azure, servicios inteligencia de negocio y power bi, con soluciones de ia para empresas y agentes IA. Si necesitas un equipo experto para llevar tu idea a producción, descubre nuestro enfoque orientado a resultados en software a medida y aplicaciones a medida o escala tu infraestructura con servicios cloud AWS y Azure.
Requisitos previos
1 Cuenta en render punto com. 2 Proyecto en un repositorio Git con una estructura similar a esta backend con main.py models.py schemas.py database.py y requirements.txt, y frontend con src App.js App.css package.json y public. 3 Conocer comandos básicos de Git como git add git commit y git push. 4 Tener requirements.txt en backend. Si no lo tienes, crea uno con los paquetes fastapi uvicorn sqlalchemy databases aiosqlite y python-dotenv. Ejecuta en backend pip install fastapi uvicorn sqlalchemy databases aiosqlite python-dotenv y luego pip freeze > requirements.txt.
Paso 1 Desplegar el backend FastAPI como Web Service
1.1 Preparar el backend
Arreglar importaciones en main.py. Las importaciones relativas pueden fallar en Render. Tienes dos opciones
Opción 1 Importaciones absolutas recomendada cambia a from backend import models, schemas, database en backend main.py.
Opción 2 Estructura de paquete crea un archivo vacío __init__.py en backend y mantén from . import models, schemas, database. En este caso añade la variable de entorno PYTHONPATH en Render como se indica más adelante.
Confirma requirements.txt incluye todas las dependencias. Si falta algo regenera con pip freeze > requirements.txt.
Prueba en local con uvicorn main:app --host 0.0.0.0 --port 8000 y abre http dos puntos barra barra localhost dos puntos 8000 barra docs. Si usas la Opción 2 establece PYTHONPATH con export PYTHONPATH=$PWD en macOS Linux o set PYTHONPATH=%CD% en Windows.
1.2 Despliegue en Render
Creación del Web Service Inicia sesión, elige New y Web Service, conecta tu repo y establece Root Directory en backend si usas monorepo.
Configuración
Nombre sugerido my-crud-api. Entorno Python 3. Rama main. Build Command pip install -r requirements.txt. Start Command para Opción 1 uvicorn main:app --host 0.0.0.0 --port $PORT. Start Command para Opción 2 uvicorn backend.main:app --host 0.0.0.0 --port $PORT. Tipo de instancia Free. Variables de entorno para Opción 2 añade PYTHONPATH con valor barra opt barra render barra project barra src barra backend. Si más adelante usas Postgres, agregarás DATABASE_URL en el Paso 4.
Despliega con Create Web Service, revisa los logs y valida que la ruta barra docs responde.
Paso 2 Desplegar el frontend React como Static Site
2.1 Preparar el frontend
Configura la URL base de la API usando la variable REACT_APP_API_URL para no codificar en duro la dirección. Evita la barra final para que no se generen rutas con doble barra. Asegúrate de que las peticiones Axios usen rutas como barra items.
Prueba en local exportando REACT_APP_API_URL con la URL pública del backend, por ejemplo export REACT_APP_API_URL=https dos puntos barra barra tu-api.onrender.com, ejecuta npm install y luego npm start, y verifica en el navegador que las peticiones van a la URL del backend.
2.2 Despliegue en Render
Crea un Static Site, conecta el mismo repo, define Root Directory en frontend. Configura nombre por ejemplo my-crud-frontend, rama main, Build Command npm install && npm run build, Publish Directory build y agrega la variable REACT_APP_API_URL con la URL pública del backend sin barra final. Despliega y revisa los logs de compilación.
Paso 3 Configurar CORS para la comunicación frontend backend
En el backend añade el middleware de CORS incluyendo como orígenes permitidos la URL del frontend en Render y http dos puntos barra barra localhost dos puntos 3000 para desarrollo. Tras el cambio, haz deploy de nuevo. Prueba en el frontend que la creación de items responde con estado 201.
Paso 4 Persistencia de base de datos
Render tiene un sistema de archivos efímero, por lo que SQLite puede perder datos tras reinicios. Para producción usa PostgreSQL en Render.
1 Crea un servicio PostgreSQL en Render, copia la Internal Database URL. 2 En el backend ajusta database.py para leer la variable de entorno DATABASE_URL y crear el engine con create_engine usando ese valor. Mantén SQLite como valor por defecto solo para desarrollo local. 3 Añade la dependencia de psycopg2-binary en requirements.txt. 4 En el Web Service agrega la variable de entorno DATABASE_URL con el valor provisto por Render. 5 Redeploy.
Errores frecuentes y cómo resolverlos
1 CORS bloquea peticiones Síntoma el navegador muestra error de política CORS. Solución añade el dominio del frontend a allow_origins y redeploy. Opcionalmente valida temporalmente con origen comodín y luego vuelve a orígenes específicos.
2 Doble barra en la URL por ejemplo doble barra items Síntoma 404 en el backend. Solución elimina la barra final del valor de REACT_APP_API_URL y usa rutas frontend del tipo barra items. Redeploy del frontend.
3 Error de importación en backend Síntoma logs con import attempted relative import sin paquete padre. Solución usa importación absoluta from backend import models, schemas, database o aplica la Opción 2 con __init__.py y PYTHONPATH configurado en Render.
4 Datos que desaparecen al redeploy Síntoma la lista de items se vacía. Solución usa PostgreSQL en lugar de SQLite como se describe en el Paso 4.
5 Respuesta lenta del backend Síntoma la primera petición tarda de 10 a 30 segundos. Causa cold start en plan gratuito. Solución evaluar plan de pago o informar a los usuarios del retardo inicial.
Buenas prácticas para principiantes
1 Usa variables de entorno para URLs y credenciales como REACT_APP_API_URL y DATABASE_URL. 2 Prueba en local backend con uvicorn y frontend con npm start apuntando al backend desplegado. 3 Revisa logs de Render en cada build y en tiempo de ejecución. 4 Valida entradas en el frontend para evitar formularios vacíos. 5 Control de versiones con mensajes claros por ejemplo git commit -m Fix_imports o git commit -m Fix_CORS. 6 CORS seguro permite solo los orígenes necesarios en producción. 7 Monitoriza rendimiento y valora instancias siempre encendidas.
Pruebas finales de tu app desplegada
Abre la URL del frontend en Render, realiza operaciones CRUD crear leer actualizar eliminar y verifica estados 200 201 en la pestaña Network del navegador. Ante cualquier error usa logs de Render y consola del navegador para diagnosticar.
Conclusión
Has publicado tu app CRUD de FastAPI y React en Render, solucionado CORS e importaciones y preparado la persistencia con Postgres. A partir de aquí puedes añadir dominios personalizados, autenticación, observabilidad y pruebas automatizadas. Si buscas ir más allá con aplicaciones a medida, agentes IA, ciberseguridad y power bi, en Q2BSTUDIO te acompañamos desde la arquitectura hasta la operación con foco en resultados y escalabilidad. Conoce además cómo optimizar costes y resiliencia con nuestros servicios cloud AWS y Azure o descubre nuestro enfoque de software a medida para lanzar tu siguiente producto digital con calidad de ingeniería.