146 lines
3.9 KiB
Markdown
146 lines
3.9 KiB
Markdown
# 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;
|
|
}
|
|
}
|
|
```
|