diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..2b70fff --- /dev/null +++ b/.env.production @@ -0,0 +1,17 @@ +# Production Environment Configuration +# Copy this to .env for server deployment + +# MongoDB Configuration (uses Docker Compose service names) +MONGODB_HOST=mongodb +MONGODB_PORT=27017 +MONGODB_DATABASE=scoffer + +# JWT Secret for Backend (CHANGE THIS IN PRODUCTION!) +JWT_SECRET=your-super-secret-jwt-key-change-this-in-production + +# Frontend API URL for server deployment +# Replace 'your-domain.com' with your actual domain +REACT_APP_API_URL=https://your-domain.com/api + +# Alternative: If backend runs on different port/subdomain +# REACT_APP_API_URL=https://api.your-domain.com diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..0b15f41 --- /dev/null +++ b/DEPLOYMENT.md @@ -0,0 +1,134 @@ +# 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 + +#### Option A: Single Domain Setup +If serving everything from one domain (e.g., `https://yourapp.com`): + +1. Set up reverse proxy (nginx/traefik) 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. Update your `.env`: + ``` + REACT_APP_API_URL=https://api.yourapp.com + ``` + +### 4. SSL/HTTPS Setup + +For production, ensure HTTPS is configured: +- Use Let's Encrypt with certbot +- Configure your reverse proxy for SSL termination +- Update `REACT_APP_API_URL` to use `https://` + +## 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; + } +} +``` diff --git a/docker-compose.yml b/docker-compose.yml index 2ac0dcb..5b799e2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -49,8 +49,12 @@ services: build: context: ./frontend dockerfile: Dockerfile + args: + - REACT_APP_API_URL=${REACT_APP_API_URL:-http://backend:5000/api} container_name: scoffer-frontend restart: unless-stopped + environment: + - REACT_APP_API_URL=${REACT_APP_API_URL:-http://backend:5000/api} ports: - "3000:80" depends_on: diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 83ca72f..b5d9c42 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,6 +1,10 @@ # Multi-stage build for React TypeScript app FROM node:18-alpine as build +# Accept build arguments +ARG REACT_APP_API_URL +ENV REACT_APP_API_URL=$REACT_APP_API_URL + # Set working directory WORKDIR /app