Deployment

This guide covers deploying the Tesis Rutas platform to production, including both the FastAPI backend and React frontend.

Deployment Architecture

Tesis Rutas consists of two separate applications:

Backend

FastAPI application that needs a Python-compatible hosting service

Frontend

React + Vite application that can be deployed to static hosting

Prerequisites

Before deploying, ensure you have:

Configuration ready

All environment variables configured (see Configuration guide)

External services active

MongoDB Atlas cluster running
Cloudinary account configured
JWT secret key generated

Code tested locally

Application runs successfully in development

Backend Deployment

The FastAPI backend can be deployed to various platforms that support Python applications.

Deployment Options

Railway
Render
Heroku
Docker

Railway provides easy deployment for Python applications.

Install Railway CLI

npm install -g @railway/cli

railway login

Initialize project

From your project root:

railway init

Add environment variables

In the Railway dashboard, add all required environment variables:

MONGO_URI
MONGO_DB
CLOUDINARY_CLOUD_NAME
CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET
JWT_SECRET_KEY
JWT_ALGORITHM
JWT_EXPIRE_MINUTES

Deploy

railway up

Railway will automatically detect your Python application and deploy it.

Railway provides a free tier with 500 hours/month, perfect for small projects.

Render offers free hosting for web services.

Create Render account

Create new Web Service

Click “New +” → “Web Service”
Connect your Git repository
Configure the service:
- Name: tesis-rutas-backend
- Environment: Python 3
- Build Command: pip install -r requirements.txt
- Start Command: uvicorn src.infrastructure.api.main:app --host 0.0.0.0 --port $PORT

Add environment variables

In the “Environment” section, add:

MONGO_URI=your_mongodb_uri
MONGO_DB=turismo_digital_uce
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
JWT_SECRET_KEY=your_secret_key
JWT_ALGORITHM=HS256
JWT_EXPIRE_MINUTES=60

Deploy

Click “Create Web Service” - Render will build and deploy automatically.

Heroku is a popular platform for deploying Python applications.

Install Heroku CLI

Download from heroku.com/cli

heroku login

Create Heroku app

heroku create tesis-rutas-backend

Create Procfile

Create a file named Procfile in your project root:

web: uvicorn src.infrastructure.api.main:app --host 0.0.0.0 --port $PORT

Set environment variables

heroku config:set MONGO_URI=your_mongodb_uri
heroku config:set MONGO_DB=turismo_digital_uce
heroku config:set CLOUDINARY_CLOUD_NAME=your_cloud_name
heroku config:set CLOUDINARY_API_KEY=your_api_key
heroku config:set CLOUDINARY_API_SECRET=your_api_secret
heroku config:set JWT_SECRET_KEY=your_secret_key
heroku config:set JWT_ALGORITHM=HS256
heroku config:set JWT_EXPIRE_MINUTES=60

Deploy to Heroku

git push heroku main

Heroku no longer offers a free tier. Consider Railway or Render for free hosting.

Deploy using Docker for any cloud provider.

Create Dockerfile

Create a Dockerfile in your project root:

FROM python:3.11-slim

WORKDIR /app

# Copy requirements and install dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Copy application code
COPY . .

# Expose port
EXPOSE 8000

# Run the application
CMD ["uvicorn", "src.infrastructure.api.main:app", "--host", "0.0.0.0", "--port", "8000"]

Build Docker image

docker build -t tesis-rutas-backend .

Run container locally (test)

docker run -p 8000:8000 \
  -e MONGO_URI=your_mongodb_uri \
  -e MONGO_DB=turismo_digital_uce \
  -e CLOUDINARY_CLOUD_NAME=your_cloud_name \
  -e CLOUDINARY_API_KEY=your_api_key \
  -e CLOUDINARY_API_SECRET=your_api_secret \
  -e JWT_SECRET_KEY=your_secret_key \
  tesis-rutas-backend

Deploy to cloud

Push to any Docker-compatible cloud service:

Google Cloud Run
AWS ECS/Fargate
Azure Container Instances
DigitalOcean App Platform

Verify Backend Deployment

After deployment, test your backend:

curl https://your-backend-url.com/

You should receive:

{"message": "API de Turismo Digital UCE funcionando correctamente 🚀"}

Frontend Deployment

The React frontend is a static site that can be deployed to various hosting platforms.

Update API Base URL

Before building, update the API endpoint in your frontend configuration to point to your deployed backend:

// frontend/src/config/api.js (or similar)
const API_BASE_URL = 'https://your-backend-url.com';

Deployment Options

Vercel (Recommended)
Netlify
GitHub Pages

Vercel is optimized for React and Vite applications.

Install Vercel CLI

npm install -g vercel

Navigate to frontend directory

cd frontend

Deploy to Vercel

vercel

Follow the prompts:

Set up and deploy? Yes
Which scope? Select your account
Link to existing project? No
Project name: tesis-rutas
Directory: ./frontend
Override build settings? No

Production deployment

For production:

vercel --prod

Vercel automatically detects Vite projects and configures the build settings. The default domain will be https://tesis-rutas.vercel.app.

Netlify provides easy deployment for static sites.

Build the frontend

cd frontend
npm run build

This creates a dist directory with the production build.

Install Netlify CLI

npm install -g netlify-cli

Deploy to Netlify

netlify deploy

When prompted:

Create new site? Yes
Publish directory: dist

Production deployment

netlify deploy --prod

Deploy to GitHub Pages for free static hosting.

Install gh-pages

cd frontend
npm install --save-dev gh-pages

Update package.json

Add these scripts to frontend/package.json:

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "homepage": "https://your-username.github.io/tesis-rutas"
}

Deploy

npm run deploy

Your site will be available at https://your-username.github.io/tesis-rutas

Post-Deployment Configuration

After deploying both frontend and backend:

Update CORS settings

Update the allowed origins in src/infrastructure/api/main.py:

origins = [
    "http://localhost:5173",                    # Local dev
    "https://tesis-rutas.vercel.app",          # Production frontend
    "https://www.your-custom-domain.com",      # Custom domain (if any)
]

Redeploy the backend after making this change.

Test the full application

Visit your frontend URL
Test user authentication
Test route creation and destination management
Verify image uploads work correctly

Set up custom domain (optional)

Configure custom domains:

Frontend: Follow your hosting provider’s custom domain guide
Backend: Most platforms provide custom domain settings in their dashboard

Environment-Specific Settings

# src/config/settings.py
class Settings(BaseSettings):
    app_name: str = "FARM Turismo API"
    debug: bool = False  # ← Disable debug in production
    # ... other settings

Always set debug: bool = False in production to prevent exposing sensitive error information.

Monitoring and Maintenance

Health Checks

Monitor your deployment health:

# Backend health check
curl https://your-backend-url.com/

# Frontend availability
curl https://your-frontend-url.com/

Common Issues

CORS errors in production

Problem: Frontend can’t connect to backend due to CORS policySolution:

Verify your frontend URL is added to the origins list in src/infrastructure/api/main.py
Ensure you redeploy the backend after updating CORS settings
Check that the frontend is using HTTPS (not HTTP) if the backend uses HTTPS

Environment variables not loading

Problem: Application can’t find configuration in productionSolution:

Verify all environment variables are set in your hosting platform’s dashboard
Check for typos in variable names (they are case-sensitive)
Restart your application after adding environment variables

Database connection fails

Problem: Can’t connect to MongoDB Atlas from productionSolution:

Whitelist your hosting provider’s IP addresses in MongoDB Atlas
Or allow access from anywhere (0.0.0.0/0) for testing
Verify the MongoDB URI is correct and includes credentials

Build fails on deployment

Problem: Frontend or backend build fails during deploymentSolution:

Check build logs for specific errors
Ensure all dependencies are listed in requirements.txt or package.json
Verify Python/Node.js versions match your local environment

Scaling Considerations

As your application grows:

Database indexing

Add indexes to MongoDB collections for better query performance

CDN for media

Cloudinary automatically provides CDN for images

Caching

Implement Redis for session/data caching

Load balancing

Use multiple backend instances with a load balancer

Rollback Strategy

If a deployment fails:

Identify the issue

Check logs in your hosting platform’s dashboard

Revert to previous version

Most platforms support instant rollback to previous deployments

Fix locally

Reproduce and fix the issue in your local environment

Redeploy

Deploy the fixed version

Next Steps

Monitor logs

Set up logging and monitoring for your production application

Backup strategy

Implement regular MongoDB backups using Atlas automated backups

CI/CD

Set up automated deployments with GitHub Actions or similar

Performance testing

Use tools like Lighthouse to test frontend performance

Setup

Development

Integration

Deployment Architecture

Backend

Frontend

Prerequisites

Backend Deployment

Deployment Options

Verify Backend Deployment

Frontend Deployment

Update API Base URL

Deployment Options

Post-Deployment Configuration

Environment-Specific Settings

Monitoring and Maintenance

Health Checks

Common Issues

Scaling Considerations

Database indexing

CDN for media

Caching

Load balancing

Rollback Strategy

Next Steps

Monitor logs

Backup strategy

CI/CD

Performance testing

Build docs developers (and LLMs) love

Setup

Development

Integration

​Deployment Architecture

Backend

Frontend

​Prerequisites

​Backend Deployment

​Deployment Options

​Verify Backend Deployment

​Frontend Deployment

​Update API Base URL

​Deployment Options

​Post-Deployment Configuration

​Environment-Specific Settings

​Monitoring and Maintenance

​Health Checks

​Common Issues

​Scaling Considerations

Database indexing

CDN for media

Caching

Load balancing

​Rollback Strategy

​Next Steps

Monitor logs

Backup strategy

CI/CD

Performance testing

Build docs developers (and LLMs) love

Deployment Architecture

Prerequisites

Backend Deployment

Deployment Options

Verify Backend Deployment

Frontend Deployment

Update API Base URL

Deployment Options

Post-Deployment Configuration

Environment-Specific Settings

Monitoring and Maintenance

Health Checks

Common Issues

Scaling Considerations

Rollback Strategy

Next Steps