DEV Community: Ezechiel Kiregha

Comprehensive Guide to Setting Up Load Balancing with Traefik, Docker, Django, and React

Ezechiel Kiregha — Sun, 15 Dec 2024 15:02:16 +0000

This documentation covers the successful setup and configuration of load balancing for Docker services using Traefik 2. It demonstrates how to serve a Django API backend and a React frontend through Traefik, with detailed explanations of configurations and implementation steps.

Backend Configuration

Backend 1 Dockerfile

# Backend 1 Dockerfile
FROM python:3.12-alpine

# Prevent Python from writing bytecode and buffer output
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# Set work directory
WORKDIR /app

# Copy project files
COPY . .

# Create virtual environment and install dependencies
RUN python3 -m venv /opt/venv1 && \
    /opt/venv1/bin/pip install --no-cache-dir --upgrade pip && \
    /opt/venv1/bin/pip install --no-cache-dir -r requirements.txt

# Create entrypoint script
RUN echo '#!/bin/sh' > /entrypoint.sh && \
    echo 'set -e' >> /entrypoint.sh && \
    echo '/opt/venv1/bin/python manage.py makemigrations --noinput' >> /entrypoint.sh && \
    echo '/opt/venv1/bin/python manage.py migrate --noinput' >> /entrypoint.sh && \
    echo '/opt/venv1/bin/python manage.py collectstatic --noinput' >> /entrypoint.sh && \
    echo 'exec "$@"' >> /entrypoint.sh && \
    chmod +x /entrypoint.sh

# Entrypoint
ENTRYPOINT ["/entrypoint.sh"]

Django Configuration in `settings.py`

ALLOWED_HOSTS = ["*"]

CORS_ALLOWED_ORIGINS = [
    "http://localhost",
    "http://localhost:80",
]

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

Frontend Configuration

Frontend Dockerfile

# Base image
FROM node:20-alpine AS builder

# Set build-time environment variable
ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=${REACT_APP_API_URL:-/}

# Set working directory
WORKDIR /opt/web

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy source code
COPY . .

# Build the application
RUN npm run build

# Production stage
FROM nginx:latest

# Copy Nginx configuration template
COPY nginx.conf /etc/nginx/default.conf

# Copy built assets from builder stage
COPY --from=builder /opt/web /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Default command
CMD ["nginx", "-g", "daemon off;"]

Nginx Configuration

http {
    include       mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri /index.html;
        }

        location /static/ {
            root /usr/share/nginx/html;
        }

        location /api/ {
            proxy_pass http://traefik:80;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

Docker Compose Configuration

`docker-compose.yml`

services:
  traefik:
    image: traefik:latest
    command:
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
      - "--log.level=DEBUG"
    ports:
      - "80:80"
      - "8080:8080"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
    networks:
      - portfolio-network

  frontend__24673_ui:
    build:
      context: ./frontend-elearning
      dockerfile: Dockerfile
    volumes:
      - static_volume:/usr/share/nginx/html/static
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.frontend__24673_ui.rule=PathPrefix(`/`)"
      - "traefik.http.services.frontend__24673_ui.loadbalancer.server.port=80"
    networks:
      - portfolio-network
    depends_on:
      - backend_24673_1
      - backend_24673_2

  backend_24673_1:
    build: ./backend-1
    command: /opt/venv1/bin/gunicorn -b 0.0.0.0:8000 --worker-class=gevent --worker-connections=1000 --workers=3 elearning.wsgi
    volumes:
      - static_volume:/app/static
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.backend_24673_1.rule=PathPrefix(`/api`)"
      - "traefik.http.services.backen_24673_1.loadbalancer.server.port=8000"
      - "traefik.http.middlewares.backend_24673_1-stripprefix.stripprefix.prefixes=/api"
      - "traefik.http.routers.backend_24673_1.middlewares=backend_24673_1-stripprefix"
    networks:
      - portfolio-network

  backend_24673_2:
    build: ./backend-1
    command: /opt/venv1/bin/gunicorn -b 0.0.0.0:8001 --worker-class=gevent --worker-connections=1000 --workers=3 elearning.wsgi
    volumes:
      - static_volume:/app/static
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.backend_24673_2.rule=PathPrefix(`/api`)"
      - "traefik.http.services.backend_24673_2.loadbalancer.server.port=8001"
      - "traefik.http.middlewares.backend_24673_2-stripprefix.stripprefix.prefixes=/api"
      - "traefik.http.routers.backend_24673_2.middlewares=backend_24673_2-stripprefix"
    networks:
      - portfolio-network

volumes:
  static_volume:

networks:
  portfolio-network:
    driver: bridge

Axios API Configuration

Axios Instance

import axios from 'axios';

const baseurl = process.env.REACT_APP_API_URL || '/';

const AxiosInstance = axios.create({
    baseURL: baseurl,
    timeout: 10000,
    headers: {
        "Content-Type": 'application/json',
        Accept: 'application/json',
    },
});

// Adding an Axios interceptor
AxiosInstance.interceptors.response.use(
    response => response, // Pass through successful responses
    async error => {
        const config = error.config;
        if (!config._retry) {
            config._retry = true; // Mark request as retried
            return AxiosInstance(config); // Retry the request
        }
        return Promise.reject(error); // Reject if retry also fails
    }
);

export default AxiosInstance;

This documentation provides the necessary configuration and setup steps to implement a load-balanced, containerized deployment of a Django-React application with Traefik. Each component is explained for clarity, ensuring reproducibility for similar projects.

INSY 8211 & Intro to Linux Administration - part_1 [Network and Web Server Configuration]

Ezechiel Kiregha — Sun, 15 Dec 2024 14:53:27 +0000

Overview

This guide documents the complete process of configuring two secure websites hosted locally on Apache2 and Nginx servers. It includes subinterface creation, IP assignments, DNS resolution, TLS encryption, ModSecurity setup, OWASP Core Rule Set (CRS) integration, and vulnerability testing. By the end, your web servers will be protected against SQL Injection, XSS, and Command Injection attacks.

1. Network Configuration

Subinterface Creation and IP Assignment

Create subinterfaces using ip commands.

ifconfig
sudo nmcli connection add type vlan con-name wlp2s010 dev wlp2s0 id 10
sudo nmcli connection add type vlan con-name wlp2s020 dev wlp2s0 id 20
sudo nmcli connection modify wlp2s010 ipv4.addresses "192.168.1.10/24" ipv4.method manual
sudo nmcli connection up wlp2s010
sudo nmcli connection modify wlp2s020 ipv4.addresses "192.168.1.20/24" ipv4.method manual
sudo nmcli connection up wlp2s020
ifconfig

Verify the configuration with:
```
ip addr show
```

2. Web Server Setup

Host Websites Locally

Install Apache2 and Nginx:

sudo apt update && sudo apt install apache2 nginx -y

Configure Apache2:

Edit /etc/apache2/sites-available/24673.auca.ac.rw:

<VirtualHost *:80>
    ServerName 24673.auca.ac.rw
    DocumentRoot /var/www/24673.auca.ac.rw
</VirtualHost>

- Enable site and restart Apache2:

    ```
    sudo a2ensite 24673.auca.ac.rw.conf
    sudo systemctl restart apache2
    ```

Configure Nginx:

Edit /etc/nginx/sites-available/portfolio:

server {
    listen 80;
    server_name portfolio.auca.ac.rw;
    root /var/www/portfolio;
}

- Enable site and restart Nginx:

    ```
    sudo ln -s /etc/nginx/sites-available/portfolio /etc/nginx/sites-enabled/
    sudo systemctl restart nginx
    ```

Add hostnames to /etc/hosts:

192.168.1.10    24673.auca.ac.rw
192.168.1.20    portfolio.auca.ac.rw

3. Enable HTTPS with Self-Signed Certificates

Create Certificates

Generate certificates:

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-keyout /etc/ssl/private/24673.key -out /etc/ssl/certs/24673.crt
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-keyout /etc/ssl/private/portfolio.key -out /etc/ssl/certs/portfolio.crt
sudo nano /etc/apache2/sites-available/24673.auca.ac.rw
sudo a2enmod ssl
sudo systemctl restart apache2.service
sudo nano /etc/nginx/sites-available/portfolio.auca.ac.rw

Update server configurations for HTTPS.

Apache2:

   <VirtualHost *:443>
       ServerName 24673.auca.ac.rw
       SSLEngine on
       SSLCertificateFile /etc/ssl/certs/server.crt
       SSLCertificateKeyFile /etc/ssl/private/server.key
   </VirtualHost>

Nginx:

   server {
       listen 443 ssl;
       server_name portfolio.auca.ac.rw;
       ssl_certificate /etc/ssl/certs/server.crt;
       ssl_certificate_key /etc/ssl/private/server.key;
   }

Reload services:

sudo systemctl reload apache2
sudo systemctl reload nginx

4. ModSecurity and OWASP CRS Setup

Install ModSecurity

Install dependencies:

sudo git clone --depth 1 https://github.com/SpiderLabs/ModSecurity-nginx 
cd ModSecurity
sudo git submodule init
sudo git submodule update
sudo ./configure --add-dynamic-module=../ModSecurity-nginx --with-cc-opt='-g -O2 -fno-omit-frame-pointer -mno-omit-leaf-frame-pointer -ffile-prefix-map=/build/nginx-DlMnQR/nginx-1.24.0=. -flto=auto -ffat-lto-objects -fstack-protector-strong -fstack-clash-protection -Wformat -Werror=format-security -fcf-protection -fdebug-prefix-map=/build/nginx-DlMnQR/nginx-1.24.0=/usr/src/nginx-1.24.0-2ubuntu7.1 -fPIC -Wdate-time -D_FORTIFY_SOURCE=3' --with-ld-opt='-Wl,-Bsymbolic-functions -flto=auto -ffat-lto-objects -Wl,-z,relro -Wl,-z,now -fPIC' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=stderr --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --modules-path=/usr/lib/nginx/modules --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --with-compat --with-debug --with-pcre-jit --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_auth_request_module --with-http_v2_module --with-http_dav_module --with-http_slice_module --with-threads --with-http_addition_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_secure_link_module --with-http_sub_module --with-mail_ssl_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-stream_realip_module --with-http_geoip_module=dynamic --with-http_image_filter_module=dynamic --with-http_perl_module=dynamic --with-http_xslt_module=dynamic --with-mail=dynamic --with-stream=dynamic --with-stream_geoip_module=dynamic
cd /opt/ModSecurity
sudo ./build.sh
sudo make
sudo make install

Enable ModSecurity in Apache2:

sudo a2enmod security2
sudo systemctl restart apache2

Configure Nginx for ModSecurity:

load_module modules/ngx_http_modsecurity_module.so;

Enable ModSecurity:

modsecurity on;
modsecurity_rules_file /etc/nginx/modsec/main.conf;

OWASP Core Rule Set (CRS) Configuration

Download CRS:

git clone https://github.com/coreruleset/coreruleset.git /etc/nginx/modsec/crs

Link CRS files:

cp /etc/nginx/modsec/crs/crs-setup.conf.example /etc/nginx/modsec/crs/crs-setup.conf
cp /etc/nginx/modsec/crs/rules/*.conf /etc/nginx/modsec/rules/

Update ModSecurity configuration to include CRS:

include /etc/nginx/modsec/crs/crs-setup.conf;
include /etc/nginx/modsec/rules/*.conf;

5. Testing and Validating Security

Vulnerability Testing

Use tools like curl or browsers to simulate attacks:

SQL Injection:

```
curl -X POST 'http://24673.auca.ac.rw/create' -d "course=network'--&code=234"
```

XSS:

```
curl 'http://portfolio.auca.ac.rw/?search=<script>alert("XSS")</script>'
```

Command Injection:

```
curl 'http://portfolio.auca.ac.rw/?cmd=;ls'
```

Analyze Logs

Inspect /var/log/modsec_audit.log for details:

```
cat /var/log/modsec_audit.log
```

Verify Blocked Requests

Ensure blocked requests meet anomaly thresholds configured in CRS:

```
SecAction \
    "id:900110,\
    phase:1,\
    pass,\
    t:none,\
    nolog,\
    tag:'OWASP_CRS',\
    ver:'OWASP_CRS/4.10.0-dev',\
    setvar:tx.inbound_anomaly_score_threshold=5,\
    setvar:tx.outbound_anomaly_score_threshold=4"
```

6. Firewall Configuration

Allow Necessary Ports

Enable HTTP, HTTPS, and SSH and so on:

```
ufw app list
sudo ufw app list
sudo ufw allow apache OpenSSH
sudo ufw allow Apache
sudo ufw allow Apache Full
sudo ufw allow 'Apache Full'
sudo ufw allow 'Apache HTTP'
sudo ufw allow 'Apache secure'
sudo ufw allow CUPS
sudo ufw allow 'Nginx Full'
sudo ufw allow 'Nginx HTTPS'
sudo ufw allow 'Nginx HTTP'
sudo ufw allow OpenSSH
sudo ufw allow 8000
sudo ufw allow 3000
sudo ufw enable
```

Verify Status

```
sudo ufw status
```

Conclusion

Congratulations! You have successfully configured and secured your web servers with Apache2, Nginx, ModSecurity, and OWASP CRS. This guide showcases your journey of creating a robust web environment, thoroughly tested against common vulnerabilities. I really consider sharing this experience as a blog post on this different platforms daily.dev, dev.to, and a comprehensive README.md on my GitHub.