{"id":176,"date":"2021-09-09T20:29:47","date_gmt":"2021-09-09T19:29:47","guid":{"rendered":"https:\/\/www.davidestebanmunoz.com\/?p=176"},"modified":"2021-12-30T21:40:42","modified_gmt":"2021-12-30T20:40:42","slug":"esta-web","status":"publish","type":"post","link":"https:\/\/www.davidestebanmunoz.com\/?p=176&lang=es","title":{"rendered":"Esta web"},"content":{"rendered":"\n

This article can be read in english here<\/a><\/p>\n\n\n\n

Esta web, es accesible en https:\/\/www.davidestebanmunoz.com<\/a><\/p>\n\n\n\n

Se han utilizado los dockers NGINX, Letsencrypt, MariaDB y WORDPRESS, montados sobre un VPS Oracle.<\/p>\n\n\n\n

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

Se han utilizado 2 stacks docker diferentes, el azul aparecer\u00e1 en m\u00e1s proyectos , el verde es espec\u00edfico de este sitio web.<\/p>\n\n\n\n

En el stack azul, Nginx actua como proxy inverso, redirigiendo las peticiones a los servicios internos deseados, en base al dominio. El contenedor de Letsencrypt es utilizado para generar y auto renovar los certificados HTTPS.<\/p>\n\n\n\n

Esta es la receta utilizada para el docker-compose del stack azul:<\/p>\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\n<\/code><\/pre>\n\n\n\n
Tal y como se puede observar ambos servicios tienen una conexi\u00f3n a \/var\/run\/docker.sock . Esto les permite detectar cuando hay otros contenedores  que requieran ser accesibles a trav\u00e9s de HTTP\/HTTPS tal y como veremos despu\u00e9s.<\/p>\n\n\n\n
Echando un vistazo al stack verde , observamos 3 contenedores, un nginx como servidor web, un wordpress-fpm para instalar wordpress y procesar los ficheros PHP y un mariaDB para actuar como base de datos SQL de backend para docker.<\/p>\n\n\n\n
Esta es la receta de docker-compose utilizada para el stack verde:<\/p>\n\n\n\n
\nversion: '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\/data\/db:\/var\/lib\/mysql\"\n        #command: '--default-authentication-plugin=mysql_native_password'\n        networks:\n          - david\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\/data\/html:\/var\/www\/html\"\n        networks:\n          - david\n\n    web_nginx:\n        image: nginx\n        depends_on:\n          - wordpress\n        container_name: nginx\n        networks:\n          - proxy_nginx-proxy\n          - david\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\/data\/nginx\/etc_nginx:\/etc\/nginx\"\n            - \"\/home\/ubuntu\/dockers\/web\/data\/html:\/var\/www\/html\"\n\nnetworks:\n    david:\n    proxy_nginx-proxy:\n        external: true\n\n<\/code><\/pre>\n\n\n\n
Tal y como se puede observar , tenemos un fichero .env donde guardamos los usuarios y contrase\u00f1as de la base de datos evitando incluirlas en el docker-compose. <\/p>\n\n\n\n
Otro punto interesante son las variables de entorno LETSENCRYPT_HOST y  VIRTUAL_HOST . Estas variables generan una notificaci\u00f3n al stack azul visto anteriormente y los Nginx y Letsencrypt del stack azul generaran los ficheros de configuraci\u00f3n adecuados y certificados HTTPS adecuados.<\/p>\n\n\n\n
Configurar el servicio nginx dentro de la red nginx_nginx-proxy permite al nginx del stack azul, enviar el tr\u00e1fico hasta el nginx de la red verde.<\/p>\n\n\n\n
El fichero de configuraci\u00f3n del Nginx del stack verde se puede observar aqui:<\/p>\n\n\n\n
\nserver {\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
Solamente escuchamos en el puerto 80, sin SSL porque ser\u00e1 el nginx del stack azul el encargado de resolver la problem\u00e1tica de las conexiones HTTPs y securizarlas con SSL.<\/p>\n\n\n\n
Respecto al WordPress se ha utilizado la plantilla gratuita Ignite , modificando su c\u00f3digo PHP, HTML y CSS para adecuarla al dise\u00f1o deseado.<\/p>\n\n\n\n