{"id":130,"date":"2021-09-09T23:13:06","date_gmt":"2021-09-09T22:13:06","guid":{"rendered":"https:\/\/www.davidestebanmunoz.com\/?p=130"},"modified":"2021-12-30T21:40:36","modified_gmt":"2021-12-30T20:40:36","slug":"this-website","status":"publish","type":"post","link":"https:\/\/www.davidestebanmunoz.com\/?p=130","title":{"rendered":"This website"},"content":{"rendered":"\n

Este art\u00edculo se puede leer en castellano aqu\u00ed<\/a><\/p>\n\n\n\n

This website is accesible at https:\/\/www.davidestebanmunoz.com<\/a><\/p>\n\n\n\n

NGINX, Letsencrypt, MariaDB and WORDPRESS dockers have been used, all of them, over an Oracle VPS.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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

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.<\/p>\n\n\n\n

This is docker-compose recipe used for this blue stack:<\/p>\n\n\n\n

\n\nversion: \"3.3\"\nservices:\n  nginx-proxy:\n    image: jwilder\/nginx-proxy\n    ports:\n      - 80:80\n      - 443:443\n    networks:\n      - nginx-proxy\n    volumes:\n      - \/var\/run\/docker.sock:\/tmp\/docker.sock:ro\n      - \/home\/ubuntu\/dockers\/proxy\/data\/vhost.d:\/etc\/nginx\/vhost.d\n      - \/home\/ubuntu\/dockers\/proxy\/data\/certs:\/etc\/nginx\/certs\n      - \/home\/ubuntu\/dockers\/proxy\/data\/html:\/usr\/share\/nginx\/html\n\n \n  ssl-generator:\n    image: jrcs\/letsencrypt-nginx-proxy-companion\n    volumes_from:\n      - nginx-proxy\n    volumes:\n      - \/var\/run\/docker.sock:\/var\/run\/docker.sock:ro\n    networks:\n      - nginx-proxy\n \nnetworks:\n  nginx-proxy:\n<\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
This is docker-compose recipe used for green stack:<\/p>\n\n\n\n
version: '3.3'\nservices:\n\n\n    db:\n        image: mariadb:10.5\n        container_name: db\n        restart: unless-stopped\n        env_file: .env\n        environment:\n            - MYSQL_DATABASE=$WP_MYSQL_DATABASE\n            - MYSQL_USER=$WP_MYSQL_USER\n            - MYSQL_PASSWORD=$WP_MYSQL_PASSWORD\n            - MYSQL_ROOT_PASSWORD=$WP_MYSQL_ROOT_PASSWORD\n        volumes:\n            - \"\/home\/ubuntu\/dockers\/web\/db:\/var\/lib\/mysql\"\n        #command: '--default-authentication-plugin=mysql_native_password'\n        networks:\n          - wp\n\n    wordpress:\n        depends_on:\n          - db\n        image: wordpress:5.8.2-fpm-alpine\n        container_name: wordpress\n        restart: unless-stopped\n        env_file: .env\n        environment:\n          - WORDPRESS_DB_HOST=db:3306\n          - WORDPRESS_DB_USER=$WP_MYSQL_USER\n          - WORDPRESS_DB_PASSWORD=$WP_MYSQL_PASSWORD\n          - WORDPRESS_DB_NAME=$WP_MYSQL_DATABASE\n        volumes:\n            - \"\/home\/ubuntu\/dockers\/web\/html:\/var\/www\/html\"\n        networks:\n          - wp\n\n    web_nginx:\n        image: nginx\n        depends_on:\n          - wordpress\n        container_name: nginx\n        networks:\n          - nginx_nginx-proxy\n          - wp\n        environment:\n            - LETSENCRYPT_HOST=www.davidestebanmunoz.com,davidestebanmunoz.com\n            - VIRTUAL_HOST=www.davidestebanmunoz.com,davidestebanmunoz.com\n        volumes:\n            - \"\/home\/ubuntu\/dockers\/web\/nginx\/etc_nginx:\/etc\/nginx\"\n            - \"\/home\/ubuntu\/dockers\/web\/html:\/var\/www\/html\"\n            \n\nnetworks:\n    wp:\n    nginx_nginx-proxy:\n        external: true\n<\/code><\/pre>\n\n\n\n
As can be seen we have a .env file where we store the DB user and passwords, avoiding including them into docker-compose. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Setting nginx service into nginx_nginx-proxy network allows previously seen blue stack nginx to route traffic here.<\/p>\n\n\n\n
Green stack’s nginx configuration file can be seen here:<\/p>\n\n\n\n
server {\n        listen 80;\n        listen [::]:80;\n\n        server_name davidestebanmunoz.com www.davidestebanmunoz.com;\n\n        index index.php index.html index.htm;\n\n        root \/var\/www\/html;\n\n        location ~ \/.well-known\/acme-challenge {\n                allow all;\n                root \/var\/www\/html;\n        }\n\n        location \/ {\n                try_files $uri $uri\/ \/index.php$is_args$args;\n        }\n\n        location ~ \\.php$ {\n                try_files $uri =404;\n                fastcgi_split_path_info ^(.+\\.php)(\/.+)$;\n                fastcgi_pass wordpress:9000;\n                fastcgi_index index.php;\n                include fastcgi_params;\n                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\n                fastcgi_param PATH_INFO $fastcgi_path_info;\n        }\n\n        location ~ \/\\.ht {\n                deny all;\n        }\n\n        location = \/favicon.ico {\n                log_not_found off; access_log off;\n        }\n        location = \/robots.txt {\n                log_not_found off; access_log off; allow all;\n        }\n        location ~* \\.(css|gif|ico|jpeg|jpg|js|png)$ {\n                expires max;\n                log_not_found off;\n        }\n}\n<\/code><\/pre>\n\n\n\n
We only listen at port 80, without SSL because the blue stack nginx will solve the HTTPs connection and SSL security.<\/p>\n\n\n\n
Inside WordPress, Ignite free theme has been used, modifying its PHP, HTML and CSS code in order to get the desired design.<\/p>\n\n\n\n