Dockeriza WordPress con SSL en localhost en macOS

En este tutorial, aprenderás cómo dockerizar un sitio web de WordPress con SSL en tu Mac utilizando el dominio localhost. Asegúrate de seguir cada paso detalladamente para configurar correctamente tu entorno local.

Estructura de Archivos

Antes de comenzar, asegúrate de tener la siguiente estructura de archivos en tu proyecto:

Proyecto
├── docker-compose.yml
├── db
│   └── ... (datos de MariaDB)
├── wordpress
│   └── ... (datos de WordPress)
└── nginx
    ├── conf.d
    │   └── default.conf
    ├── ssl
    │   ├── fullchain.pem
    │   └── privkey.pem

Paso 1: Configurar Docker Compose

Comienza configurando tu archivo docker-compose.yml para definir los servicios de WordPress y la base de datos MySQL (MariaDB):

version: '3.9'
services:
  db:
    image: mariadb:latest
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_PASSWORD: contraseña
      MYSQL_DATABASE: midb
      MYSQL_USER: miusuario
      MYSQL_PASSWORD: mipassword
    volumes:
      - ./db:/var/lib/mysql
    ports:
      - "3306:3306"

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      - ./wordpress:/var/www/html
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: miusuario
      WORDPRESS_DB_PASSWORD: mipassword
      WORDPRESS_DB_NAME: midb

  nginx:
    image: nginx:latest
    ports:
      - "443:443"
      - "80:80"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./nginx/ssl:/etc/nginx/ssl
    depends_on:
      - wordpress

Paso 2: Generar Certificados SSL para localhost

Para asegurar tu sitio web con SSL, necesitas generar certificados SSL autofirmados para localhost. Sigue pasos para generar los archivos fullchain.pem y privkey.pem:

1. Genera una clave privada (privkey.pem)

Abre una terminal y ejecuta el siguiente comando para generar una clave privada:

openssl genpkey -algorithm RSA -out privkey.pem -pkeyopt rsa_keygen_bits:2048

2. Genera una solicitud de firma de certificado (CSR)

A continuación, crea una solicitud de firma de certificado (CSR) utilizando la clave privada generada:

openssl req -new -key privkey.pem -out server.csr

Sigue las instrucciones para completar la solicitud. Asegúrate de introducir localhost como el Common Name (CN).

3. Genera un certificado autofirmado

Usa el siguiente comando para generar un certificado autofirmado válido por 365 días:

openssl x509 -req -days 365 -in server.csr -signkey privkey.pem -out fullchain.pem

Paso 3: Configurar Nginx

Configura Nginx para que utilice los certificados SSL generados. Crea un archivo de configuración en nginx/conf.d/default.conf con el siguiente contenido:

server {
    listen 80;
    server_name localhost;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name wpppppp.test;

    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://wordpress: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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Paso 4: Actualizar el Archivo Hosts

Edita el archivo hosts en tu Mac para que localhost se resuelva correctamente:

sudo nano /etc/hosts

Añade la siguiente línea al archivo:

127.0.0.1 localhost

Guarda y cierra el archivo.

Paso 5: Reiniciar Docker y Navegador

Reinicia tus contenedores de Docker:

docker-compose down
docker-compose up

Reinicia tu navegador para asegurarte de que los cambios en los certificados y en el archivo hosts se apliquen correctamente.

Solución de Problemas en Chrome

Si Chrome muestra advertencias de seguridad, necesitarás añadir el certificado manualmente al almacén de certificados de Chrome.

Añadir Certificado en macOS

1. Abre Acceso a Llaveros (Keychain Access).
2. Arrastra y suelta localhost.crt en el panel de Sistema o Inicio de sesión.
3. Haz clic derecho en el certificado importado, selecciona Obtener información, y en Confianza, selecciona Confiar siempre.

Reiniciar Chrome

Cierra todas las ventanas de Chrome y vuelve a abrir el navegador para que reconozca el certificado como confiable.

Si todavía no te reconoce el certificado continua igualmente. Con Safari no hay ningun problema. A mi ya me va bien así porque solo necesito que sea https para que me dé permisos de copiar / pegar.

Resultado

¡Felicidades! Ahora tienes un entorno de WordPress dockerizado con SSL utilizando localhost en tu Mac. Este entorno te permitirá desarrollar y probar tu sitio web de manera segura con HTTPS en tu entorno local.