This website

Este artículo se puede leer en castellano aquí

This website is accesible at https://www.davidestebanmunoz.com

NGINX, Letsencrypt, MariaDB and WORDPRESS dockers have been used, all of them, over an Oracle VPS.

2 different dockers stacks have been used, the blue one will appear in more projects and the green one is specific of this website.

Looking at blue stack Nginx works as a reverse proxy, redirecting requests to desired internal services, based on the domain requested. Letsencrypt docker is used to generate and auto renew the HTTPS certificate.

This is docker-compose recipe used for this blue stack:

version: "3.3"
services:
  nginx-proxy:
    image: jwilder/nginx-proxy
    ports:
      - 80:80
      - 443:443
    networks:
      - nginx-proxy
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - /home/ubuntu/dockers/proxy/data/vhost.d:/etc/nginx/vhost.d
      - /home/ubuntu/dockers/proxy/data/certs:/etc/nginx/certs
      - /home/ubuntu/dockers/proxy/data/html:/usr/share/nginx/html

 
  ssl-generator:
    image: jrcs/letsencrypt-nginx-proxy-companion
    volumes_from:
      - nginx-proxy
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
    networks:
      - nginx-proxy
 
networks:
  nginx-proxy:

As can be seen, both services, have a connection to /var/run/docker.sock . This allows to detect when other containers need to be accessible as we will see later.

Looking at the green stack, there are 3 containers, nginx for web server, wordpress-fpm to install wordpress and process php files and mariaDB to serve as backend SQL DB for wordpress.

This is docker-compose recipe used for green stack:

version: '3.3'
services:


    db:
        image: mariadb:10.5
        container_name: db
        restart: unless-stopped
        env_file: .env
        environment:
            - MYSQL_DATABASE=$WP_MYSQL_DATABASE
            - MYSQL_USER=$WP_MYSQL_USER
            - MYSQL_PASSWORD=$WP_MYSQL_PASSWORD
            - MYSQL_ROOT_PASSWORD=$WP_MYSQL_ROOT_PASSWORD
        volumes:
            - "/home/ubuntu/dockers/web/db:/var/lib/mysql"
        #command: '--default-authentication-plugin=mysql_native_password'
        networks:
          - wp

    wordpress:
        depends_on:
          - db
        image: wordpress:5.8.2-fpm-alpine
        container_name: wordpress
        restart: unless-stopped
        env_file: .env
        environment:
          - WORDPRESS_DB_HOST=db:3306
          - WORDPRESS_DB_USER=$WP_MYSQL_USER
          - WORDPRESS_DB_PASSWORD=$WP_MYSQL_PASSWORD
          - WORDPRESS_DB_NAME=$WP_MYSQL_DATABASE
        volumes:
            - "/home/ubuntu/dockers/web/html:/var/www/html"
        networks:
          - wp

    web_nginx:
        image: nginx
        depends_on:
          - wordpress
        container_name: nginx
        networks:
          - nginx_nginx-proxy
          - wp
        environment:
            - LETSENCRYPT_HOST=www.davidestebanmunoz.com,davidestebanmunoz.com
            - VIRTUAL_HOST=www.davidestebanmunoz.com,davidestebanmunoz.com
        volumes:
            - "/home/ubuntu/dockers/web/nginx/etc_nginx:/etc/nginx"
            - "/home/ubuntu/dockers/web/html:/var/www/html"
            

networks:
    wp:
    nginx_nginx-proxy:
        external: true

As can be seen we have a .env file where we store the DB user and passwords, avoiding including them into docker-compose.

Another interesting point are the environment variables LETSENCRYPT_HOST and VIRTUAL_HOST . Those variables generate a notification to previously seen blue stack so blue stack’s Nginx and letsencrypt dockers detect new services and auto generates configuration for nginx and HTTPS certificates.

Setting nginx service into nginx_nginx-proxy network allows previously seen blue stack nginx to route traffic here.

Green stack’s nginx configuration file can be seen here:

server {
        listen 80;
        listen [::]:80;

        server_name davidestebanmunoz.com www.davidestebanmunoz.com;

        index index.php index.html index.htm;

        root /var/www/html;

        location ~ /.well-known/acme-challenge {
                allow all;
                root /var/www/html;
        }

        location / {
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass wordpress:9000;
                fastcgi_index index.php;
                include fastcgi_params;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                fastcgi_param PATH_INFO $fastcgi_path_info;
        }

        location ~ /\.ht {
                deny all;
        }

        location = /favicon.ico {
                log_not_found off; access_log off;
        }
        location = /robots.txt {
                log_not_found off; access_log off; allow all;
        }
        location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
                expires max;
                log_not_found off;
        }
}

We only listen at port 80, without SSL because the blue stack nginx will solve the HTTPs connection and SSL security.

Inside WordPress, Ignite free theme has been used, modifying its PHP, HTML and CSS code in order to get the desired design.

• Type: Website
• Where: Docker containers on VPS
• Languages and technologies used: PHP, HTML, CSS
• Github repo: no