Habilitar HTTPS en WordPress local con Docker

Por ciertos motivos, he necesitado estos días poder tener un entorno local con WordPress. Y uno de los requisitos que necesitaba era habilitar HTTPS.

Vamos a ver como se podría hacer (se puede hacer de muchas formas, lógicamente).

La configuración de carpetas para montar este esquema ha sido esta:

.
├── README.md
├── docker-compose.yml
├── proxy
│   ├── certs
│   │   ├── dev.mydomain.local.crt-key.pem
│   │   └── dev.mydomain.local.crt.pem
│   └── conf
│       └── nginx.conf
└── uploads.ini

Al ser entorno local utilicé Docker con el siguiente yaml para poder usar docker-compose, donde levantaba WordPress y MySQL

mysql:
    image: mysql:5.7
    restart: always
    ports:
      - 8081:3306
    environment:
      MYSQL_USER: wordpress
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - mysql
    image: wordpress
    ports:
      - 8080:80
    restart: always
    volumes:
      - /Users/Path/wordpress/wp-content/themes:/var/www/html/wp-content/themes/
      - /Users/Path/wordpress/wp-content/plugins:/var/www/html/wp-content/plugins/
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    environment:
      WORDPRESS_DB_HOST: mysql:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress

Por temas de probar ciertos plugins y templates, necesité montar mi directorio local dentro del contenedor, por eso se usa el parámetro “volumes”.

Dentro de “volumes” también incluí el fichero uploads.ini para poder subir ficheros de cierto peso dentro de WordPress.

file_uploads = On
memory_limit = 500M
upload_max_filesize = 500M
post_max_size = 500M
max_execution_time = 600

Si levantamos esto, y accedemos a http://localhost:8080 deberíamos ver la pantalla de instalación de WordPress.

HTTPS?

Fui siguiendo los pasos necesarios y me topé con un problema. Necesito habilitar HTTPS dentro del contenedor. Por simplifcar use como se ve en el yaml, la imagen oficial de WordPress la cual usa si no me equivoco un servidor tipo Apache. Es un poco difícil customizar la imagen nativa de WordPress y empecé a buscar y observé diversas opciones.

Comentar también que tengo Mac para el desarrollo. De tal modo que estuve mirando y vi una posible solución que me cuadraba bastante, porque la verdad es que había miles de guías al respecto.

Además podemos establecer un nombre de dominio porque a continuación vamos a configurar los certifiados SSL. Yo he puesto “dev.mydomain.local” pero cualquiera que os parezca os debería funcionar.

Necesitaremos poder resolver un dominio local modificando el fichero /etc/hosts

Elegiremos que dominio vamos a usar

127.0.0.1 dev.mydomain.local

MKCERT

En mi caso, primera vez que oía hablar de este comando. No me extenderé pero básicamente es como un Let’sEncrypt, pero solo para local, por lo que tengo entendido. Es decir, para producción NO ES.

Instalación y uso

brew update
brew install mkcert nss
mkcert-install
mkcert mkcert dev.mydomain.local.crt

Created a new certificate valid for the following names 
 - "dev.mydomain.local.crt"

The certificate is at "./dev.mydomain.local.crt.pem" and the key at "./dev.mydomain.local.crt-key.pem" ✅

It will expire on 6 May 2024 ?

Dejaremos los certificados dentro de la carpeta proxy/certs

Nginx como proxy

La idea era como decimos montar Nginx como proxy y desde ahí, de algún modo, configurar HTTPS y redigir todo hacia el contenedor de WordPress.

Primero, necesitaremos añadir a nuestro YAML la parte donde configuramos Nginx.

proxy:
    image: nginx:1.19.10-alpine
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./proxy/conf/nginx.conf:/etc/nginx/nginx.conf
      - ./proxy/certs:/etc/nginx/certs
    depends_on:
      - wordpress

Aquí vamos a compartir también volúmenes con el contenedor:

• proxy/conf/nginx.conf Para configurar Nginx
• proxy/certs/ Donde guardaremos los certificados que serán utilizados por el contenedor Nginx

Necesitaremos la configuración básica de Nginx para luego hacer el proxy_pass hacia nuestro WordPress.

events {
  worker_connections 1024;
}

http {
  server {
    listen 80;
    server_name dev.mydomain.local;
    return 301 https://$host$request_uri;
  }

  server {
    listen 443 ssl;
    server_name dev.mydomain.local;

    ssl_certificate /etc/nginx/certs/dev.mydomain.local.crt.pem;
    ssl_certificate_key /etc/nginx/certs/dev.mydomain.local.crt-key.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
      proxy_buffering off;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header Host $http_host;

      proxy_redirect off;
      proxy_pass http://wordpress:80;
    }
    }
}

Una vez llegado este momento deberíamos poder levantar finalmente nuestro entorno como

# docker-compose up  -d     
Starting docker_mysql_1 ... done
Starting docker_wordpress_1 ... done
Starting docker_proxy_1     ... done

Links

• https://dev.to/vishalraj82/using-https-in-docker-for-local-development-nc7