Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

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;
}
view rawserver.conf hosted with ❤ by GitHub

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):
# -------------------------------------------------
# CDN CONFIGURATION
# -------------------------------------------------
# Show "Not Found" 404 errors in place of other NGINX errors
error_page 403 /404;
error_page 404 /404;
error_page 405 /404;
error_page 500 501 502 503 504 /404;
location /404 {
return 301 $parent_site/404/;
}
# Prevent access to any files starting with a dot, like .htaccess
# or text editor temp files
location ~ /\. { deny all; }
# Prevent access to any files starting with a $ (usually temp files)
location ~ ~$ { deny all; }
# Prevent access to php files
location ~ \.php$ { deny all; }
# Keep images and CSS and other static files around in browser cache for as long as possible,
location ~* .(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|html|txt|htm)$ {
expires max;
log_not_found off;
access_log off;
add_header Cache-Control public;
# don't send cookies
fastcgi_hide_header Set-Cookie;
# CORS config
set $cors "true";
# Determine the HTTP request method used
if ($request_method = 'OPTIONS') {
set $cors "${cors}options";
}
if ($request_method = 'GET') {
set $cors "${cors}get";
}
if ($request_method = 'POST') {
set $cors "${cors}post";
}
if ($cors = "true") {
# Catch all incase there's a request method we're not dealing with properly
add_header 'Access-Control-Allow-Origin' '*';
}
if ($cors = "trueget") {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($cors = "trueoptions") {
add_header 'Access-Control-Allow-Origin' '*';
# Om nom nom cookies
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
# Custom headers and headers various browsers *should* be OK with but aren't
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
# Tell client that this pre-flight info is valid for 20 days
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($cors = "truepost") {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
# Protects the readme.html|license.txt files from being accessed
# (for wordpress installations)
location ~ /(\.|readme.html|license.txt) { deny all; }
view rawcdn.conf hosted with ❤ by GitHub

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”.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas