jesus.perezpaz.es

Configurar subdominio como “CDN” en NGINX (+ configuración para WordPress y W3 Total Cache)

ACTUALIZADO: Añadido CORS (Cross-origin resource sharing) al “falso” CDN. Gracias a https://gist.github.com/alexjs/4165271

Seguramente estés sirviendo tu página web desde un único dominio, el cual genera las páginas dinámicas en el servidor y también entrega las imágenes y otros archivos (como js, css y demás) de tu sitio.

Esto puede ralentizar tu página. la mayoría de navegadores crean un máximo de dos o cuatro conexiones simultáneas cuando descargan una página desde un servidor, así que algunas conexiones tendrán que esperar a que otras terminen. Hay también otro problema, tu dominio puede estar sirviendo cookies junto con tus ficheros, lo que también hace crecer el tiempo de carga de la página.

La mejor solución para este problema es invertir en un CDN. Los CDN están optimizados para servir imágenes y otros archivos estáticos (sin cookies), tienen su propio dominio, descargan a tu servidor de trabajo y están distribuidos en varios centros de datos (tus usuarios descargarán los archivos más rápidamente, ya que estos estarán en un punto más cercano).

El problema de los CDN es que cuestan dinero.

Si puedes permitirte contratar un CDN, hazlo (tu página irá mucho más rápido). Si no puedes permitírtelo puedes aún disfrutar de algunos de los beneficios de tener un CDN, configurando un subdominio para servir el contenido estático. En ningún caso será como un CDN real, porque no es una “Red” (los archivos no están distribuidos en varios centros de datos) y tu servidor tiene que gestionar la entrega de archivos. Pero puedes beneficiarte de varias conexiones simultáneas y el no envío de cookies. Si buscas un ejemplo de esto, lo está viendo ahora mismo en esta página 🙂

Como estoy utilizando NGINX como servidor web, voy a mostrar aquí como configurarlo para tener un subdominio como “falso CDN”.

Primero tienes que crear una nueva configuración de subdominio/servidor en “/etc/nginx/sites-available” con el siguiente contenido:

server {
    listen   80; ## listen for ipv4
    listen   [::]:80; ## listen for ipv6
    server_name cdn.yourdomain.com;
    access_log /var/log/nginx/cdn.yourdomain.com.access.log;
    error_log  /var/log/nginx/cdn.yourdomain.com.error.log;

    root /var/www/your/web/folder/;
    
    include sites-available/cdn.conf;
}

Tienes dos opciones:
– Usar el mismo contenido que tienes actualmente en tu web (recomiendo esto si quieres usarlo junto con wordpress o si no quieres mover de sitio los archivos de una carpeta a otra). En este caso la línea “root /var/www/your/web/folder/;” tendría que apuntar a la misma carpeta que tu actual sitio.

– Configurarlo con una carpeta vacía y mover ahí tus archivos (crea la nueva carpeta y cambia la línea “root /var/www/your/web/folder/;” para apuntar a ella).

Como puedes ver hay un “include” en el archivo (porque uso la misma configuración para varios de mis sitios). El contenido de “cdn.conf” es el siguiente (contiene ciertas partes específicas para usarlo junto con una instalación de wordpress):

Cambia la línea 7 para redirigir a una página de error de tu preferencia o crea el archivo “404.html” en el directorio que has elegido para la web.

El archivo está comentado para que se entienda lo que hace (en inglés, pero creo que no es muy difícil de entender, si no no dudes en preguntar). Las ventajas de esta configuración son:
– No se ejecuta php en el servidor a través de este subdominio.
– La caché para los archivo está definida al máximo posible.
– No se envían cookies junto con los archivos.

Simplemente tendrías que hacer un enlace simbólico del primer archivo que creaste en “/etc/nginx/sites-enabled” y reiniciar NGINX.

Tu subdominio debería estar ya funcionando. Si elegiste la primera opción (Usar el mismo contenido que tienes actualmente en tu web) puedes acceder a los mismos archivos de tu actual dominio a través del 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 es servida con la configuración original del servidor y la segunda a través del nuevo subdominio, con todas las mejoras que hemos incluido.

Si elegiste la segunda opción puedes subir algún archivo a tu nueva carpeta y debería funcionar.

Se pueden hacer más optimizaciones genéricas a la configuración de NGINX. Echa un vistazo por Internet, hay muchos sitios con esta información 🙂

Configuración para WordPress y W3 Total Cache

Ok, tienes tu nuevo “CDN” funcionando y quieres integrarlo con tu actual instalación de WordPress… fácil! 🙂

Voy a mostrarte los pasos utilizando el plugin W3 total cache que es el que yo utilizo.

En la sección “General Settings”(Performance>General Settings), activa “CDN” y usa “Generic Mirror” como “CDN Type”. Después haz click en “Save all Settings”.

Vete a la sección “CDN” (Performance>CDN). Encuentra en la página la sección “Configuration” e ingresa tu nuevo subdominio en donde pone “Replace site’s hostname with”.
Haz click en “Test Mirror” y (si te apareció “Test passed” en verde), haz click en “Save all Settings”.

Puedes echar un vistazo a las diferentes opciones que hay en la página y adaptarlas a tus necesidades (las opciones por defecto deberían funcionar bien).

Hasta ahora hemos configurado el nuevo subdominio para las nuevas imágenes que subamos y los recursos de la página, pero podemos cambiar también las antiguas imágenes que tenemos subidas a las entradas.

Para hacer esto, en la misma página (Performance>CDN), hacemos click en el botón “modify attachment URLs” que aparece en la parte de arriba. después ingresamos la url de nuestra página o blog (atención no la del subdominio que acabamos de crear) en “Domains to rename” y hacemos click en el botón “Start”. En un momento (dependiendo de cuantas imágenes y entradas tengas), tus antiguas imágenes serán servidas a través de tu nuevo “CDN”.

Ir a la portada → ← Volver artás

Comentarios

Un comentario

  1. Francisco says:

    Hola!

    Genial el tuto, me queda una inquietud.

    Cuando pones “Simplemente tendrías que hacer un enlace simbólico del primer archivo que creaste en “/etc/nginx/sites-enabled” y reiniciar NGINX.” te refieres a activar el subdominio, como cuando en apache uno ejecuta el comando a2ensite nombre.conf?

    Gracias

Dejar un comentario

Tu dirección de email no será publicada