update env vars and deployments for containers
This commit is contained in:
17
.env.production
Normal file
17
.env.production
Normal 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
134
DEPLOYMENT.md
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -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:
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user