# 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:

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

Then edit `.env` to set your actual domain:
```bash
# Replace with your actual domain
REACT_APP_API_URL=https://your-domain.com/api
```

### 2. Build and Deploy

```bash
# 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

```nginx
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;
    }
}
```