Directorio de artículos
Nginx es un servidor proxy inverso y HTTP de alto rendimiento, que se puede utilizar para implementar proyectos front-end, proporcionar servicios de archivos estáticos, equilibrio de carga, almacenamiento en caché y otras funciones. Este artículo presentará cómo usar Nginx para implementar proyectos front-end.
1. Instalar Nginx
Primero, debe instalar Nginx, que se puede compilar e instalar a través del código fuente o instalar a través de un administrador de paquetes. Por ejemplo, puede usar el siguiente comando para instalar en Ubuntu:
sudo apt-get update
sudo apt-get install nginx
Una vez instalado, Nginx se puede iniciar con el siguiente comando:
sudo systemctl start nginx
2. Configurar Nginx
El archivo de configuración de Nginx se encuentra en /etc/nginx/nginx.conf, que se puede abrir y editar con un editor de texto. Los elementos de configuración que deben modificarse incluyen:
- servidor: defina un host virtual para manejar las solicitudes de los clientes.
- ubicación: Defina la ruta URL de la solicitud y el método de procesamiento correspondiente.
- raíz: especifique el directorio raíz del sitio web, que es el directorio de salida del paquete del proyecto front-end.
Por ejemplo, el siguiente es un archivo de configuración de Nginx simple:
http {
server {
listen 80;
server_name example.com;
location / {
root /var/www/example/dist;
index index.html;
}
}
}
En la configuración anterior, se supervisa el puerto 80. Al solicitar example.com, la solicitud se reenviará al directorio /var/www/example/dist y se devolverá el archivo index.html.
3. Empaquetar el proyecto front-end
Antes de implementar el proyecto front-end, primero debe empaquetarse. Por lo general, los proyectos front-end se empaquetan con herramientas como Webpack para convertir el código fuente en archivos estáticos. Los archivos empaquetados generalmente se almacenan en el directorio dist.
4. Implementar el proyecto front-end
Copie el archivo del proyecto front-end empaquetado en el directorio raíz del sitio web especificado por Nginx (como el directorio /var/www/example/dist en el archivo de configuración anterior). Visite example.com en su navegador para ver la página del proyecto front-end.
5. Configuración HTTPS
Si necesita usar el protocolo HTTPS para proporcionar un acceso seguro, debe configurar HTTPS. Aquí hay un ejemplo simple de configuración de HTTPS:
http {
server {
listen 80;
server_name example.com;
location / {
root /var/www/example/dist;
index index.html;
}
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name example.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
location / {
root /var/www/example/dist;
index index.html;
}
}
}
En la configuración anterior, el puerto 80 se escucha primero y las solicitudes HTTP se redirigen al protocolo HTTPS. Luego escuche en el puerto 443 y use el certificado SSL para proporcionar servicios HTTPS.
Cabe señalar que el certificado SSL debe comprarse a una CA o generarse usted mismo, y puede usar herramientas como Certbot para obtener automáticamente un certificado gratuito. Además, se debe abrir el puerto 443 del firewall para permitir el acceso externo a los servicios HTTPS.
6. Equilibrio de carga
Si el proyecto front-end necesita manejar una gran cantidad de solicitudes simultáneas, es posible que una sola instancia de Nginx no pueda satisfacer la demanda. En este momento, puede usar la función de equilibrio de carga de Nginx para distribuir solicitudes a varias instancias de Nginx para mejorar el rendimiento y la disponibilidad del sistema.
El siguiente es un ejemplo de una configuración de equilibrio de carga simple:
http {
upstream backend {
server 127.0.0.1:8080;
server 127.0.0.1:8081;
server 127.0.0.1:8082;
}
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://backend;
}
}
}
En la configuración anterior, upstream se usa para definir un grupo de servidores de equilibrio de carga llamado backend, que contiene tres instancias de Nginx. Luego use proxy_pass en el servidor para reenviar la solicitud a cualquier instancia de Nginx en el grupo de back-end.
Cabe señalar que la configuración del equilibrio de carga debe tener en cuenta la retención de sesiones y las estrategias de reenvío de solicitudes entre varias instancias de Nginx para garantizar que las solicitudes se puedan distribuir correctamente a cada instancia y que la información de la sesión se pueda compartir correctamente entre instancias.
7. Almacenamiento en caché
Nginx también puede actuar como un servidor de caché, mejorando el rendimiento de la aplicación. Cuando una aplicación procesa recursos estáticos o páginas dinámicas, Nginx puede almacenar en caché estos recursos para evitar cálculos repetidos y transmisiones de red.
Aquí hay un ejemplo de una configuración de caché simple:
http {
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://backend;
proxy_cache my_cache;
proxy_cache_valid 200 60m;
}
}
}
En la configuración anterior, proxy_cache_path se usa para definir una ruta de caché denominada my_cache, y el tiempo de caducidad de la caché se establece en 60 minutos. Luego use proxy_cache en la ubicación del servidor para especificar el uso del grupo de caché my_cache y use proxy_cache_valid para establecer el período de validez del caché.
Cabe señalar que la configuración de la memoria caché debe tener en cuenta la estrategia de limpieza y actualización de la memoria caché para evitar que caduquen o se utilicen de forma indebida los datos de la memoria caché.
Resumir
Este artículo presenta siete usos comunes de Nginx, incluido el proxy inverso, el servicio de archivos estáticos, la aceleración de contenido dinámico, el almacenamiento en caché HTTP, el acceso seguro HTTPS, el equilibrio de carga y el almacenamiento en caché. Estos usos se basan en el modelo de E/S de red eficiente de Nginx y el lenguaje de configuración flexible, que puede ayudar a los desarrolladores a optimizar mejor el rendimiento y la disponibilidad de las aplicaciones web.