update env vars and deployments for containers

This commit is contained in:
2025-08-10 10:53:54 +01:00
parent 00c4c986ea
commit f400736df2
4 changed files with 159 additions and 0 deletions

17
.env.production Normal file
View File

@@ -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

134
DEPLOYMENT.md Normal file
View File

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

View File

@@ -49,8 +49,12 @@ services:
build: build:
context: ./frontend context: ./frontend
dockerfile: Dockerfile dockerfile: Dockerfile
args:
- REACT_APP_API_URL=${REACT_APP_API_URL:-http://backend:5000/api}
container_name: scoffer-frontend container_name: scoffer-frontend
restart: unless-stopped restart: unless-stopped
environment:
- REACT_APP_API_URL=${REACT_APP_API_URL:-http://backend:5000/api}
ports: ports:
- "3000:80" - "3000:80"
depends_on: depends_on:

View File

@@ -1,6 +1,10 @@
# Multi-stage build for React TypeScript app # Multi-stage build for React TypeScript app
FROM node:18-alpine as build 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 # Set working directory
WORKDIR /app WORKDIR /app