scoffer/DEPLOYMENT.md

Server Deployment Guide

Overview

This guide explains how to deploy your recipe management app containers on a server with proper inter-container communication.

Container Communication Setup

Current Configuration

• Backend ↔ Database: ✅ Configured (uses mongodb service name)
• Frontend ↔ Backend: ✅ Now configured (uses backend service name)
• Network: All services on recipe-network

Deployment Steps

1. Environment Configuration

Create a .env file in the project root with your production settings:

# Copy the production template
cp .env.production .env

Then edit .env to set your actual domain:

# Replace with your actual domain
REACT_APP_API_URL=https://your-domain.com/api

2. Build and Deploy

# Build and start all containers
docker-compose up -d --build

# Check container status
docker-compose ps

# View logs
docker-compose logs -f

3. Server Configuration

⚠️ IMPORTANT: If you get net::ERR_SSL_PROTOCOL_ERROR, see HTTPS_SETUP.md for detailed SSL configuration.

SSL Architecture

Internet (HTTPS) → Reverse Proxy (SSL Termination) → Containers (HTTP)

Option A: Single Domain Setup

If serving everything from one domain (e.g., https://yourapp.com):

1. Set up reverse proxy (nginx/traefik) with SSL termination to route:

   • / → Frontend container (port 3000)
   • /api/* → Backend container (port 5000)

2. Update your .env:

   REACT_APP_API_URL=https://yourapp.com/api
   

Option B: Subdomain Setup

If using subdomains (e.g., api.yourapp.com):

1. Set up DNS for subdomains
2. Configure SSL for both domains
3. Update your .env:

   REACT_APP_API_URL=https://api.yourapp.com
   

4. SSL/HTTPS Setup

Critical: SSL termination must happen at the reverse proxy level, NOT at individual containers.

• Containers: Serve HTTP internally (port 5000 for backend, port 80 for frontend)
• Reverse Proxy: Handles HTTPS externally, forwards HTTP to containers
• Frontend Config: Points to external HTTPS URL (https://your-domain.com/api)

For detailed SSL setup instructions, see HTTPS_SETUP.md.

Container Port Mapping

• Frontend: Container port 80 → Host port 3000
• Backend: Container port 5000 → Host port 5000
• Database: Container port 27017 → Host port 27017
• Mongo Express: Container port 8081 → Host port 8081

Environment Variables

Backend Container

• MONGODB_HOST=mongodb (Docker service name)
• MONGODB_PORT=27017
• MONGODB_DATABASE=scoffer
• JWT_SECRET=your-production-secret

Frontend Container

• REACT_APP_API_URL=https://your-domain.com/api

Troubleshooting

Frontend can't connect to backend

1. Check that REACT_APP_API_URL points to the correct domain/port
2. Verify backend container is running: docker-compose ps
3. Check network connectivity: docker-compose exec frontend ping backend

Backend can't connect to database

1. Verify MongoDB container is healthy: docker-compose ps
2. Check backend logs: docker-compose logs backend
3. Test connection: docker-compose exec backend ping mongodb

CORS Issues

If you encounter CORS errors, ensure your backend allows requests from your frontend domain.

Security Notes

1. Change JWT_SECRET in production
2. Use HTTPS for all external communication
3. Restrict database access (remove port mapping in production)
4. Use environment-specific secrets

Example Nginx Configuration

server {
    listen 80;
    server_name yourapp.com;
    
    # Frontend
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # Backend API
    location /api/ {
        proxy_pass http://localhost:5000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}