Site is under maintenance mode. Please wait few min!
Saltar al contenido

Cómo instalar Vagabundo en un VPS ejecutando Ubuntu 12.04

marzo 4, 2020

 

Introducción

Las cargas más rápido de un sitio web, es más probable que un visitante es para quedarse. Cuando los sitios web están llenos de imágenes y contenido interactivo plazo por los scripts cargados en el fondo, la apertura de un sitio web no es una tarea sencilla. Consiste en solicitar muchos archivos diferente de la del servidor por uno. Reducir al mínimo la cantidad de estas peticiones es una manera de acelerar su sitio web.

Esto se puede hacer de muchas maneras, pero uno de los pasos más importantes a tomar es para configurar el almacenamiento en caché del navegador . Esto le dice al navegador que una vez que los archivos descargados pueden ser reutilizados de copias locales en vez de pedir el servidor para ellos una y otra vez. Para ello, se deben introducir nuevas cabeceras HTTP de respuesta diciendo al navegador cómo comportarse.

Aquí es donde el módulo de cabecera de Nginx entra en juego. Este módulo se puede utilizar para agregar cualquier encabezado arbitrarias a la respuesta, pero su papel principal es cabeceras de caché establecidos correctamente. En este tutorial, vamos a buscar la forma de utilizar el módulo de cabecera de Nginx para implementar el almacenamiento en caché del navegador.

Requisitos previos

Para seguir este tutorial, necesitará:

  • Una CentOS 7 servidor configurado con este tutorial de configuración inicial del servidor, incluyendo un usuario no root sudo.
  • Nginx instalado en el servidor siguiendo el Cómo instalar Nginx en CentOS 7 tutorial.

Una CentOS 7 servidor configurado con este tutorial de configuración inicial del servidor, incluyendo un usuario no root sudo.

Nginx instalado en el servidor siguiendo el Cómo instalar Nginx en CentOS 7 tutorial.

Además del módulo de cabecera, sino que también va a utilizar módulo de mapa de Nginx en este artículo. Para obtener más información sobre el módulo de mapa, se puede leer cómo Módulo mapa del uso de Nginx en CentOS 7.

Paso 1 – Creación de archivos de prueba

En este paso, vamos a crear varios archivos de prueba en el directorio por defecto Nginx. Vamos a utilizar estos archivos más tarde para comprobar el comportamiento predeterminado de Nginx y luego poner a prueba que el almacenamiento en caché del navegador está trabajando.

para tomar una decisión sobre qué tipo de archivo es servido por la red, Nginx no analiza el contenido del archivo; eso sería prohibitivamente lento. En su lugar, sólo se ve la extensión de archivo para determinar el tipo del archivo MIME , lo que denota la finalidad del fichero.

Debido a este comportamiento, el contenido de nuestros archivos de prueba es irrelevante. Al nombrar los archivos de forma adecuada, se puede engañar a Nginx en el pensamiento de que, por ejemplo, un archivo completamente vacío es una imagen y otra es una hoja de estilo.

Crear un archivo llamado test.html en el directorio por defecto usando Nginx truncado. Esta extensión indica que se trata de una página HTML. sudo -s truncado 1k /usr/share
ginx/htmlest.html crear unos archivos más pruebas de la misma manera

sudo truncate -s 1k /usr/share
ginx/htmlest.html

Let de: un archivo de imagen JPG, una hoja de estilo CSS, y uno js archivo JavaScript .

sudo truncate -s 1k /usr/share
ginx/htmlest.jpg
sudo truncate -s 1k /usr/share
ginx/htmlest.css
sudo truncate -s 1k /usr/share
ginx/htmlest.js

  • sudo -s truncado 1k /usr/share
    ginx/htmlest.jpg
  • sudo -s truncado 1k /usr/share
    ginx/htmlest.css
  • sudo -s truncado 1k / usr / share / nginx / html / Test.js

El siguiente paso es comprobar cómo se comporta Nginx con respecto al envío de cabeceras de control de almacenamiento en caché en una instalación nueva con los archivos que acabamos de crear.

Paso 2 – Comprobación del comportamiento predeterminado

Por defecto, todos los archivos tendrá el mismo comportamiento de caché por defecto. Para explorar esto, usaremos el archivo HTML que hemos creado en el paso 1, pero se puede ejecutar estas pruebas con cualquiera de los archivos de ejemplo.

Por lo tanto, vamos a ver si test.html se sirve con cualquier información relacionada con el tiempo que el navegador debe almacenar en caché la respuesta. El siguiente comando solicita un archivo de nuestro servidor Nginx local y muestra las cabeceras de respuesta.

curl -I http://localhostest.html

  • rizo -I http: //localhostest.html

Debería ver varias cabeceras de respuesta HTTP:

Output: Nginx response headersHTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:21:04 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"
Accept-Ranges: bytes

En la penúltima línea se puede ver el encabezado ETag, que contiene un identificador único para este en particular revisión del archivo solicitado. Si se ejecuta el comando anterior rizo en repetidas ocasiones, verá exactamente el mismo valor de ETag.

Al utilizar un navegador web, el valor de ETag se almacena y de vuelta al servidor con la cabecera If-None-Match solicitud cuando el navegador se quiere solicitar el mismo archivo de nuevo enviado – por ejemplo, al actualizar la página.

Nos puede simular esta en la línea de comandos con el comando siguiente. Asegúrese de cambiar el valor de ETag en este comando para que coincida con el valor de ETag en su salida anterior.

curl -I -H 'If-None-Match: "57f6257c-400"' http://localhostest.html

  • rizo -I -H ‘If-None-Match: «57f6257c-400″‘ http: //localhostest.html

La respuesta ahora será diferente:

Output: Nginx response headersHTTP/1.1 304 Not Modified
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:21:40 GMT
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"

Esta vez, Nginx responderá con 304 No modificado . No va a enviar el archivo a través de la red de nuevo; en cambio, le dirá al navegador que puede volver a utilizar el archivo que ya ha descargado localmente.

Esto es útil ya que reduce el tráfico de red, pero no es bastante bueno suficiente para lograr un buen rendimiento de almacenamiento en caché. El problema es que ETag navegador siempre envía una solicitud al servidor preguntando si se puede volver a utilizar su archivo de caché. A pesar de que el servidor responde con un 304 en lugar de enviar el archivo de nuevo, se necesita tiempo para hacer la solicitud y recibir la respuesta.

En el siguiente paso, vamos a utilizar los encabezados de módulo de almacenamiento en caché para anexar información de control. Esto hará que el navegador para almacenar en caché algunos archivos localmente sin pedir explícitamente el servidor si está bien que lo haga.

Paso 3 – Configuración de Cache-Control y Expires Headers

Además de la cabecera de validación del archivo ETag, hay dos cabeceras de respuesta de control de almacenamiento en caché: Cache-Control y expira. Cache-Control es la versión más reciente, que tiene más opciones que expira y es generalmente más útil si se desea un mayor control sobre el comportamiento de la caché.

Si se establecen estas cabeceras, que puede decirle al navegador que el archivo solicitado se puede mantener localmente para una cierta cantidad de tiempo (incluyendo siempre) sin solicitar de nuevo. Si las cabeceras no se han establecido, los navegadores siempre solicitar el archivo desde el servidor, ya sea esperando 200 OK o 304 sin modificar respuestas.

Nos puede utilizar el módulo de cabecera para establecer estas cabeceras HTTP. El módulo de cabecera es un módulo de Nginx núcleo, lo que significa que no necesita ser instalado por separado para ser utilizado.

Para añadir el módulo de cabecera, abra el archivo de configuración del servidor Nginx bloque por defecto en vi (he aquí una breve introducción a VI) o su editor de texto favorito.

sudo vi /etc
ginx
ginx.conf

  • sudo vi /etc
    ginx
    ginx.conf

encontrar el bloque de configuración del servidor, que se ve así:

. . .
server {
listen 80 default_server;
listen [::]:80 default_server;
. . .

Añadir las siguientes dos nuevas secciones aquí: uno antes de que el bloque de servidor, para definir cuánto tiempo se debe almacenar en caché diferentes tipos de archivos, y uno dentro de él, para establecer las cabeceras de almacenamiento en caché de manera apropiada.

. . .
# Expires map
map $sent_http_content_type $expires {
default off;
text/html epoch;
text/css max;
application/javascript max;
~image/ max;
}

server {
listen 80 default_server;
listen [::]:80 default_server;

expires $expires;
. . .

La sección antes del bloque de servidor es un bloque nuevo mapa que define la correlación entre el tipo de archivo y la duración de ese tipo de archivo debe ser almacenado en caché.

Estamos utilizando varias configuraciones diferentes en este mapa:

  • El valor predeterminado se establece en off, que no añade cabeceras de control de caché. Es una apuesta segura para el contenido no tenemos requisitos particulares sobre la forma en la memoria caché debería funcionar. Para el texto
  • / html, que establece el valor de época. Este es un valor especial que resulta explícitamente en ningún almacenamiento en caché, lo que obliga al navegador a preguntar siempre si el sitio en sí es hasta la fecha.
  • Para text / css y aplicación / Javascript, que son hojas de estilo y archivos JavaScript, establezca el valor máximo. Esto significa que el navegador va a almacenar en caché los archivos durante el tiempo que pueda, reduciendo la cantidad de solicitudes considerablemente debido a que normalmente hay muchos de estos archivos.
  • La última opción se aplica a la imagen ~ /, que es una expresión regular que coincida con todos los tipos de archivos que contienen la imagen / en su nombre tipo MIME (como imagen / jpg y la imagen / png). Al igual que las hojas de estilo, a menudo hay una gran cantidad de imágenes en los sitios web que pueden ser almacenados en la caché de forma segura, por lo que establecer esta a un máximo también.

El valor predeterminado se establece en off, que no añade cabeceras de control de caché. Es una apuesta segura para el contenido no tenemos requisitos particulares sobre la forma en la memoria caché debería funcionar. Para el texto

/ html, que establece el valor de época. Este es un valor especial que resulta explícitamente en ningún almacenamiento en caché, lo que obliga al navegador a preguntar siempre si el sitio en sí es hasta la fecha.

Para text / css y aplicación / Javascript, que son hojas de estilo y archivos JavaScript, establezca el valor máximo. Esto significa que el navegador va a almacenar en caché los archivos durante el tiempo que pueda, reduciendo la cantidad de solicitudes considerablemente debido a que normalmente hay muchos de estos archivos.

La última opción se aplica a la imagen ~ /, que es una expresión regular que coincida con todos los tipos de archivos que contienen la imagen / en su tipo MIME nombre (como imagen / jpg y la imagen / png). Al igual que las hojas de estilo, a menudo hay una gran cantidad de imágenes en los sitios web que pueden ser almacenados en la caché de forma segura, por lo que establecer esta a un máximo también.

Dentro del bloque del servidor, la Directiva expira (una parte del módulo de cabeceras) establece los encabezados de control de caché. Utiliza el valor de la variable establecida $ expira en el mapa. De esta manera, las cabeceras resultantes será diferente en función del tipo de archivo.

Guardar y cerrar el archivo de salida.

Para habilitar la nueva configuración, reinicie Nginx.

sudo systemctl restart nginx

  • sudo systemctl reinicio nginx

A continuación, vamos a asegurarnos de nuestras nuevas obras de configuración.

Paso 4 – Pruebas de navegador almacenamiento en caché

Ejecutar la misma petición como antes para el archivo HTML de prueba.

curl -I http://localhostest.html

  • rizo -I http: //localhostest.html

Esta vez la respuesta será diferente. Verá que hay dos cabeceras adicionales de respuesta HTTP:

HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:24:42 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"
Expires: Thu, 01 Jan 1970 00:00:01 GMT
Cache-Control: no-cache
Accept-Ranges: bytes

El expira espectáculos de cabecera una fecha en el pasado y Cache-Control se establece con no-cache, que indica al navegador que siempre pide el servidor si hay una versión más reciente del archivo (usando el encabezado ETag, como antes).

Verás una respuesta de diferencia con el archivo de imagen de prueba.

curl -I http://localhostest.jpg

  • rizo -I http: //localhostest.jpg

HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:25:02 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:46 GMT
Connection: keep-alive
ETag: "57f6257e-400"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Accept-Ranges: bytes

En este caso, caduca muestra la fecha en un futuro lejano, y Cache-Control contiene información max-age, que indica al navegador cuánto tiempo puede almacenar en caché el archivo en cuestión de segundos. Esto le dice al navegador para almacenar en caché la imagen descargada durante todo el tiempo que pueda, por lo que cualquier apariciones posteriores de esta imagen usarán caché local y no enviar una solicitud al servidor en absoluto.

El resultado debe ser similar para ambos Test.js y test.css, ya que tanto los archivos de hojas de estilo y JavaScript se establecen con las cabeceras de caché también.

Esto significa que los encabezados de control de caché se han configurado correctamente y que su página web se beneficiarán de la mejora en el rendimiento y menos peticiones al servidor debido a la caché del navegador. Usted debe personalizar la configuración de almacenamiento en caché basado en el contenido de su sitio web, pero los valores por defecto en este artículo es un lugar razonable para empezar.

Conclusión

El cabeceras módulo se puede utilizar para agregar cualquier encabezado arbitrarias a la respuesta, pero configurar en forma adecuada cabeceras de control de caché es una de sus principales aplicaciones útiles. Aumenta el rendimiento para los usuarios del sitio web, especialmente en redes con alta latencia, como redes de los operadores móviles. También puede conducir a mejores resultados en los motores de búsqueda que las pruebas de velocidad es un factor en sus resultados. Configuración de cabeceras de almacenamiento en caché del navegador es una de las principales recomendaciones de las herramientas de prueba PageSpeed ​​de Google.

información más detallada acerca del módulo de cabeceras se puede encontrar en la documentación oficial módulo de cabeceras de Nginx.