Implementar proyectos front-end con nginx

La implementación de proyectos front-end solía consistir en colocar recursos estáticos en el proyecto back-end e implementarlos junto con la implementación back-end. Con la popularidad de los modelos de desarrollo separados de front-end y back-end, los proyectos de front-end se pueden implementar por separado y actualmente la forma más popular es implementar nginx.

Para proyectos front-end, nginxexisten dos funciones principales:

• Alojar recursos estáticos, es decir, servir como servidor de recursos estáticos ;
• Realice un proxy inverso para recursos dinámicos, es decir, servicios de interfaz de proxy en segundo plano para evitar dominios cruzados ;

configuración de enrutamiento

La configuración más común nginxes la configuración de enrutamiento y hay varias formas de escribir la configuración de enrutamiento.

1.=

location = /111/ {
    
    
    default_type text/plain;
    return 200 "111 success";
}

locationSe agrega una entre y la ruta =, lo que significa coincidencia exacta, es decir, solo exactamente lo mismo urlcoincidirá con esta ruta.

Agregado después de la ruta aa, entonces no es una coincidencia exacta, por lo que lo es 404.

2. sin =

Representa coincidencia según el prefijo, seguido de cualquier ruta

location /222 {
    
    
    default_type text/plain;
    // 这里的 $uri 是取当前路径。
    return 200 $uri;
}

3. Admite coincidencias periódicas~

// 匹配以/333/bbb开头，以.html结尾的路径
location ~ ^/333/bbb.*\.html$ {
    
    
    default_type text/plain;
    return 200 $uri;
}

Lo anterior ~distingue entre mayúsculas y minúsculas, si no, distingue entre mayúsculas y minúsculas.~\*

// 匹配以/333/bbb开头，以.html结尾的路径
location ~* ^/333/bbb.*\.html$ {
    
    
    default_type text/plain;
    return 200 $uri;
}

4. ^~Representar prioridad

La siguiente configuración tiene dos rutas que /444comienzan con:

location ~* ^/444/AAA.*\.html$ {
    
    
    default_type text/plain;
    return 200 $uri;
}
location ~ /444/ {
    
    
    default_type text/plain;
    return 200 $uri;
}

Si se accede /444/AAA45.html, llegará directamente a la primera ruta, ¿ /444/qué pasa si quiero acceder a ella? Sólo agrégalo ^.

location ^~ /444/ {
    
    
    default_type text/plain;
    return 200 $uri;
}

Es decir, ^~se puede aumentar la prioridad de la coincidencia de prefijos.

En resumen, locationexisten cuatro tipos de sintaxis:

1. location = /aaaes /aaauna ruta que coincide exactamente;
2. location /bbbes /bbbuna ruta que coincide con el prefijo.
3. location ~ /ccc.*.htmlEs una coincidencia normal, puede agregar una *para indicar que no distingue entre mayúsculas y minúsculas location ~* /ccc.*.html;
4. location ^~ /dddes una coincidencia de prefijo, pero con una prioridad más alta.

La prioridad de estas 4 gramáticas es la siguiente:

Coincidencia exacta (=) > coincidencia de prefijo de alta prioridad (^~) > coincidencia normal (~ / ~*) > coincidencia de prefijo común

raíz y alias

nginxHay dos formas de especificar la ruta del archivo rooty la principal diferencia es cómo interpretar esta última , lo que hará aliasque ambos asigne solicitudes a los archivos del servidor de diferentes maneras root.aliasnginxlocationuri

1. rootEl resultado del procesamiento es: rootruta + locationruta;
2. aliasEl resultado del procesamiento es: aliasreemplazar ruta con locationruta;

aliases la definición de un alias de directorio rooty es la definición del directorio de nivel superior.

Cabe señalar que el final aliasdebe usarse más tarde /, de lo contrario no se encontrará el archivo y rootserá prescindible. Además, aliassólo locationen bloques.

rootEjemplo:

location ^~ /test/ {
    
    
    root /www/root/html/;
} 

Si una uri solicitada es /test/a.html, el servidor web devolverá /www/root/html/test/a.htmlel archivo al servidor.

aliasEjemplo:

location ^~ /test/ {
    
    
    alias /www/root/html/new_test/;
}

Si una uri solicitada es /test/a.html, el servidor web devolverá /www/root/html/new_test/a.htmlel archivo al servidor.

Tenga en cuenta que aquí new_test, debido a que la ruta configurada más tarde aliasse locationdescartará, el directorio actualmente coincidente apuntará al directorio especificado.

directorio secundario

A veces es necesario implementar varios proyectos en un puerto, luego se puede implementar en forma de un directorio secundario.

Habrá algunos inconvenientes al utilizar el directorio secundario para la implementación, como cuando lo solicito http://xxxxxxxx.com/views/basedata, el navegador salta automáticamente a él http://xxxxxxxxm:8100/store/views/basedata/.

¿Cuál es la razón?

El problema más fundamental es que la redirección se activa porque no hay http://xxxxxxxx.com/views/basedataseguidores y la redirección se redirige a , así que evite activar la redirección./nginx301http://xxxxxxxxm:8100/store/views/basedata/

Si puede soportar utilizar http://xxxxxxxxm:8100/store/views/basedata/la última /dirección como esta directamente, entonces no hay problema.

Entonces, ¿por qué se activa la redirección?

Cuando el usuario lo solicita http.xxxxxx.cn/osp, aquí $urise /ospintenta nginxencontrar este archivo en el directorio especificado por aliaso .root

Si hay un archivo{alias指定目录}/osp llamado , tenga en cuenta que es un archivo, no un directorio , y el contenido de este archivo se enviará directamente al usuario.

Obviamente, no hay ningún osparchivo con nombre en el directorio, así que verifiqué osp/y agregué uno /, es decir, para ver si hay un {alias指定目录}/osp/directorio con nombre.

Es decir, cuando accedemos al uri, si el recurso de acceso es un directorio y el uri no /termina con una barra diagonal, entonces nginxel servicio devolverá un salto 301 y la dirección de destino debe agregarse con una barra diagonal/ .

Una de las formas más sencillas es acceder directamente a un archivo específico, por ejemplo http.xxxxxx.cn/osp/index.html, para que no se produzca ninguna redirección. Sin embargo, este método no es lo suficientemente elegante y cada vez se debe ingresar la ruta completa del archivo.

Otra forma es ajustar nginxla configuración de redirección en , nginxtres configuraciones en redirección: absolute_redirect, server_name_in_redirect, port_in_redirect.

absolute_redirectUtilice este comando para controlar nginxsi la dirección de redirección emitida por es una dirección relativa o una dirección absoluta:

1. Si se establece en off, nginxla redirección emitida por será relativa 没有域名和端口y no tendrá nada que ver server_name_in_redirectcon port_in_redirectella.

Después de agregar esta configuración, aunque también se producirá la redirección, no se agregará a la ruta 域名和端口.

2. Si se establece en on, nginxla redirección emitida por será absoluta, solo las configuraciones absolute_redirectde on, server_name_in_redirecty port_in_redirecttendrán efecto.

nginxHabilite gzipla compresión estática para mejorar la eficiencia

gzipEs un formato y también es una herramienta de descompresión en Linux. Después de comprimir gzipel app.jsarchivo, el archivo original se convierte en un .gzarchivo que termina en y el tamaño del archivo se reduce de 42571 a 11862.

Actualmente, existen dos formas de compresión de recursos estáticos:

• Compresión dinámica : antes de que el servidor devuelva archivos estáticos, el servidor comprime cada solicitud para su salida.
• Compresión estática : el servidor utiliza directamente los archivos precomprimidos listos para usar con la extensión .gz para generar directamente.

Sabemos gzipque es CPUintensivo y que la compresión dinámica en tiempo real consume más recursos de la CPU. Para mejorar aún más el rendimiento de nginx, podemos usar la compresión gzip estática para comprimir los archivos que deben comprimirse con anticipación y, cuando llegue la solicitud, enviar los archivos comprimidos directamente, reduciendo así la presión sobre la CPU del servidor y mejorando .gz. actuación.

Por lo tanto, generalmente usamos compresión estática . Hay dos pasos para lograr la compresión estática:

1. Genere un archivo comprimido gzip

Al usar webpackempaquetado, comprimimos el archivo y lo configuramos de la siguiente manera:

const isProduction = process.env.NODE_ENV === 'production'

if (isProduction) {
    
    
  config.plugins.push(
    new CompressionWebpackPlugin({
    
    
      // 采用gzip进行压缩
      algorithm: 'gzip',
      test: /\.js$|\.html$|\.json$|\.css/,
      threshold: 10240
    })
  )
}

Se puede ver que hay un .gzarchivo más que termina en .gz.

2. Habilite módulos que admitan compresión estática en nginx

nginxAgregue la siguiente configuración a la configuración :

gzip_static on;

Si no se agrega, no se encontrará al acceder y se informará un error 404, porque el servidor solo tiene .gzel archivo y no tiene el archivo original.

Resumir

La configuración principal de la implementación del proyecto front-end nginxes básicamente las mencionadas anteriormente.

La primera son locationlas cuatro formas de escribir enrutamiento;

Entonces hay una clara distinción entre rooty alias;

Cuando necesite utilizar enrutamiento secundario cuando hay muchos proyectos, debe prestar atención a la configuración de la redirección;

Si el archivo de su proyecto es grande, puede habilitar gzipla compresión para mejorar la eficiencia de la transmisión.