Configurar un subdominio como «CDN» en NGINX (+ configuración de WordPress y W3 Total Cache)

ACTUALIZACIÓN: se ha añadido CORS (Cross-origin resource sharing) al CDN «falso». Basado en: https://gist.github.com/alexjs/4165271

Lo habitual es servir tu página web desde un único dominio, que incluye todas tus páginas «generadas por el servidor» y también las imágenes y los recursos (JavaScript, CSS y otros archivos) de tu sitio.

Esto puede ralentizar tu página. La mayoría de los navegadores abren como máximo dos o cuatro conexiones simultáneas al descargar una página del servidor web, así que las demás conexiones tienen que esperar. Hay además otro problema: tu dominio podría enviar cookies junto con tus recursos, lo que también puede reducir el rendimiento de la página.

La mejor solución a este problema es invertir en una CDN (Content Delivery Network) de verdad. Las CDN están optimizadas para servir imágenes y recursos (sin cookies), tienen sus propios dominios, liberan de carga a tu servidor y están distribuidos en varios centros de datos (así tus usuarios descargarán los recursos más rápido porque están cerca de ellos).

El problema: las CDN cuestan dinero.

Si puedes permitírtelo, adelante, contrata una (tu página cargará más rápido). Si no, puedes obtener algunas de las ventajas de tener una CDN configurando un subdominio que sirva este contenido. No es una CDN de verdad porque no es una «red» (los datos no se distribuyen en varios centros de datos) y tu servidor tiene que cargar y servir los recursos, pero puedes beneficiarte de más conexiones simultáneas y librarte de las cookies. Puedes ver un ejemplo en esta página 🙂

Como uso NGINX como servidor web, voy a mostrarte cómo configurar en él un subdominio de «CDN falsa».

Primero tienes que crear una nueva configuración de subdominio/servidor en «/etc/nginx/sites-available» con este contenido:

 1server {
 2    listen   80; ## listen for ipv4
 3    listen   [::]:80; ## listen for ipv6
 4    server_name cdn.yourdomain.com;
 5    access_log /var/log/nginx/cdn.yourdomain.com.access.log;
 6    error_log  /var/log/nginx/cdn.yourdomain.com.error.log;
 7
 8    root /var/www/your/web/folder/;
 9    
10    include sites-available/cdn.conf;
11}

Tienes dos opciones:

– usar la misma carpeta de contenido de tu instalación o página web actual (te lo recomiendo si lo haces con WordPress o si no quieres mover ni copiar tus archivos de una carpeta a otra). En este caso la línea «root /var/www/your/web/folder/;» tiene que apuntar a tu carpeta web actual o a tu instalación de WordPress.

– configurar una carpeta nueva y vacía (cambia la línea «root /var/www/your/web/folder/;» según corresponda) y mover ahí tus recursos.

Como ves, hay un include («include sites-available/cdn.conf;»). Voy a mostrarte el contenido del archivo cdn.conf (tiene algunas adiciones para instalaciones de WordPress):

Cambia la línea 7 para redirigir a tus usuarios a una página de error o crea la página 404.html en tu carpeta web.

El archivo está comentado, por si quieres saber más. La configuración incluye algunas ventajas como:

– Sin ejecución de PHP en el subdominio.

– Caché máxima del navegador para imágenes, CSS y otros archivos estáticos.

– No se envían cookies en el subdominio.

Ahora tienes que crear un enlace simbólico del primer archivo que has creado en «/etc/nginx/sites-enabled» y reiniciar nginx.

Tu subdominio debería funcionar ya. Si has elegido la primera opción (usar la misma carpeta de contenido de tu instalación o página web actual), puedes acceder a los mismos archivos a través de tu nuevo subdominio. Por ejemplo, en mi servidor:

http://jesus.perezpaz.es/wp-content/uploads/2013/03/mc-1-280×300.jpg -> http://cdn-jesus.perezpaz.es/wp-content/uploads/2013/03/mc-1-280×300.jpg

Es la misma imagen, pero una se sirve con la configuración por defecto del servidor y la otra con todas las mejoras del nuevo subdominio.

Si has elegido la segunda opción, puedes subir tus recursos a la nueva carpeta y ver el subdominio funcionando.

Se podrían hacer optimizaciones más genéricas en tu configuración de NGINX. Puedes buscarlas en Internet, hay muchos sitios con esa información 🙂

Configuración de WordPress y W3 Total Cache

Ya tienes en marcha tu nueva «CDN» y quieres usarlo en WordPress… es fácil 🙂

Voy a usar el plugin W3 Total Cache, porque lo uso para otras mejoras de rendimiento.

En la sección «General Settings» (Performance>General Settings), activa «CDN» y usa «Generic Mirror» como «CDN Type». Pulsa «Save all Settings».

Ve a la sección «CDN» (Performance>CDN). Busca la sección «Configuration» e introduce tu nuevo subdominio en «Replace site’s hostname with».

Pulsa «Test Mirror» y, si aparece «Test passed», vuelve a pulsar «Save all Settings».

Puedes echar un vistazo a las distintas configuraciones de esa página (las configuraciones por defecto deberían funcionar bien).

Hemos configurado la nueva «CDN» y se usará para las subidas nuevas y para los recursos, pero también podemos cambiar las imágenes y las subidas de las entradas antiguas.

Para ello, en la parte superior de la misma página (Performance>CDN) encontrarás un botón «modify attachment URLs». Haz clic, introduce el dominio de tu blog o página (no el del nuevo subdominio «CDN») en «Domains to rename» y haz clic en «Start». En un momento todas tus imágenes antiguas se servirán a través de tu nuevo CDN.