WES Docker Architecture & Setup Guide

Overview

WES (Webflow Export System) is a sophisticated multi-service Docker application designed to process Webflow pages and deploy them to various hosting platforms. The architecture follows a microservices pattern with five main containers orchestrated through Docker Compose.

Service Architecture

1. wesapache - Reverse Proxy & Load Balancer

• Base Image: Ubuntu 22.04
• Purpose: Acts as the main entry point and reverse proxy for all services
• Port: 80 (HTTP)
• Key Features:
  • Domain-based routing to different services
  • WebSocket proxy support for real-time connections
  • CORS headers management
  • Security headers (Server token hiding)

2. wesapi - Laravel Backend API

• Base Image: PHP 8.2-FPM (Multi-stage build)
• Purpose: Core business logic, API endpoints, and database operations
• Port: 8080 (Internal)
• Key Features:
  • Laravel 8 framework
  • PHP-FPM + Nginx configuration
  • Queue processing with Supervisor
  • Database migrations and caching
  • Composer dependency management

3. wesreact - React Frontend

• Base Image: Node.js (built from wes-react directory)
• Purpose: User interface and frontend application
• Port: 3000 (Internal)
• Key Features:
  • React 18 with TypeScript
  • Ant Design components
  • Real-time WebSocket integration
  • Build process with Create React App

4. wessocket - WebSocket Server

• Base Image: Node.js 18 Alpine
• Purpose: Real-time communication and broadcasting
• Port: 6001
• Key Features:
  • Socket.IO server implementation
  • Redis adapter for scaling
  • CORS configuration for cross-origin connections
  • Custom Socket.IO server (not Laravel Echo Server)

5. wesbeanstalk - Queue Service

• Base Image: Ubuntu Latest
• Purpose: Background job processing and task queue management
• Port: 11300
• Key Features:
  • Beanstalkd queue server
  • Job queue management for Laravel
  • Background task processing

Docker Network Architecture

The application uses two separate Docker networks for security and organization:

Frontend Network

• Services: wesapache, wesreact, wessocket
• Purpose: Handles public-facing traffic and user interactions
• Security: Limited access to backend services

Backend Network

• Services: wesapache, wesapi, wessocket, wesbeanstalk
• Purpose: Internal service communication and data processing
• Security: Protected from direct external access

Network Communication Flow

Internet → wesapache (Port 80) → {
    Default traffic → wesreact (Port 3000)
    API requests (api.hellowes.com) → wesapi (Port 8080)
    WebSocket (socket.hellowes.com) → wessocket (Port 6001)
    Queue jobs → wesbeanstalk (Port 11300)
}

Detailed Service Configurations

wesapache Configuration

Location: docker/8.2/000-default.conf

The Apache reverse proxy handles sophisticated routing based on ServerName:

# Default traffic to React frontend
ProxyPass / http://wesreact:3000/

# API routing
<VirtualHost *:80>
  ServerName api.hellowes.com
  ProxyPass / http://wesapi:8080/
</VirtualHost>

# WebSocket routing
<VirtualHost *:80>
  ServerName socket.hellowes.com
  ProxyPass /socket.io/ ws://wessocket:6001/socket.io/
</VirtualHost>

Security Features:

• Server token hiding (Header unset Server)
• CORS headers for API endpoints
• WebSocket timeout configurations
• SSL/HTTPS support (Port 443 configurations)

wesapi Build Process

Multi-stage Docker build:

Stage 1: Build Stage

• Installs PHP extensions (GD, Redis, SSH2, etc.)
• Composer dependency installation
• File permissions setup

Stage 2: Production Stage

• Copies built application from Stage 1
• Nginx + PHP-FPM configuration
• Supervisor for process management
• Laravel-specific optimizations

Key Components:

# PHP Extensions
RUN docker-php-ext-install gd tidy mbstring xml zip mysqli pdo pdo_mysql pcntl
RUN pecl install redis ssh2-1.3.1

# Process Management
COPY docker/8.2/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
COPY docker/8.2/start.sh /start.sh

Startup Process (docker/8.2/start.sh):

1. Set file permissions
2. Install Composer dependencies
3. Start PHP-FPM in background
4. Start Supervisor for queue processing
5. Run database migrations
6. Start Nginx in foreground

wessocket Implementation

Custom Socket.IO Server (not Laravel Echo Server):

const io = new Server(6001, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

// Redis configuration for scaling
const redis = new Redis({
  host: process.env.REDIS_HOST,
  password: process.env.REDIS_PASSWORD,
  port: 6379,
});

Features:

• Redis adapter for horizontal scaling
• Environment-based Redis configuration
• CORS support for cross-origin requests
• Connection logging and error handling

wesreact Build Process

Note: The Dockerfile.app file appears to be corrupted/binary. The React app is typically built using:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Environment Variables

Critical Environment Variables

# Redis Configuration (for wessocket)
REDIS_HOST=wesredis
REDIS_PASSWORD=

# Database Configuration (for wesapi)
DB_CONNECTION=mysql
DB_HOST=
DB_PORT=3306
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=

# Laravel Configuration
APP_ENV=production
APP_KEY=

Docker Compose Commands

Development Workflow

# Start all services
docker-compose up

# Build and start (after code changes)
docker-compose up --build

# Start specific service
docker-compose up wesapi

# View logs
docker-compose logs -f wesapi

# Execute commands in running container
docker-compose exec wesapi php artisan migrate
docker-compose exec wesreact npm run build

# Stop all services
docker-compose down

# Remove volumes (clean slate)
docker-compose down -v

Production Deployment

# Build production images
docker-compose -f docker-compose.yml build

# Start in detached mode
docker-compose up -d

# Scale specific services
docker-compose up --scale wessocket=3

AWS Elastic Beanstalk Configuration

The application includes AWS deployment configuration via Dockerrun.aws.json:

Key Features:

• Multi-container Docker deployment
• ECR image references
• Port mappings and volume mounts
• Environment variable configuration
• Memory and CPU allocations

ECR Images:

• 985542660797.dkr.ecr.us-east-1.amazonaws.com/edgarallan/wesapi
• 985542660797.dkr.ecr.us-east-1.amazonaws.com/edgarallan/wesreact
• 985542660797.dkr.ecr.us-east-1.amazonaws.com/edgarallan/wessocket

Troubleshooting

Common Issues

1. Service Communication Problems

# Check network connectivity
docker-compose exec wesapi ping wesreact
docker network ls
docker network inspect wes-docker-app_frontend

2. Port Conflicts

# Check port usage
netstat -tulpn | grep :80
netstat -tulpn | grep :3000

3. Permission Issues

# Fix Laravel permissions
docker-compose exec wesapi chown -R www-data:www-data /var/www/html/storage
docker-compose exec wesapi chmod -R 755 /var/www/html/storage

4. Database Connection Issues

# Check Laravel configuration
docker-compose exec wesapi php artisan config:cache
docker-compose exec wesapi php artisan migrate:status

5. Queue Processing Issues

# Check Beanstalkd connection
docker-compose exec wesapi php artisan queue:work --tries=3
telnet localhost 11300

Monitoring and Debugging

Container Health Checks:

# Check container status
docker-compose ps

# View container logs
docker-compose logs -f --tail=100 wesapi

# Monitor resource usage
docker stats

# Enter container for debugging
docker-compose exec wesapi bash

Service-Specific Debugging:

Laravel API:

# Check Laravel logs
docker-compose exec wesapi tail -f /var/www/html/storage/logs/laravel.log

# Clear caches
docker-compose exec wesapi php artisan cache:clear
docker-compose exec wesapi php artisan config:clear

React Frontend:

# Check build status
docker-compose exec wesreact npm run build

# Development mode
docker-compose exec wesreact npm start

WebSocket Server:

# Test WebSocket connection
curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Sec-WebSocket-Key: test" -H "Sec-WebSocket-Version: 13" http://localhost:6001/socket.io/

Security Considerations

Network Security

• Services isolated in separate networks
• No direct external access to backend services
• Apache proxy filters and validates requests

Container Security

• Non-root user execution where possible
• Minimal base images (Alpine for Node.js)
• Secret management via environment variables
• Server header hiding for information disclosure prevention

Application Security

• CORS configuration for cross-origin requests
• CSP (Content Security Policy) implementation
• JWT authentication through Laravel Passport
• Input validation and sanitization

Performance Optimization

Docker Optimizations

• Multi-stage builds to reduce image size
• Layer caching optimization
• Minimal base images
• Dependency installation before code copying

Application Optimizations

• Redis caching for sessions and queues
• Laravel optimization commands
• Static asset optimization
• Database query optimization

Scaling Considerations

• Horizontal scaling support via Redis adapter
• Load balancing through Apache proxy
• Stateless service design
• Queue-based background processing

This comprehensive setup allows for robust development, testing, and production deployment of the WES application with proper service isolation, security, and scalability.