Mostrando el Progreso de Carga Con nginx En Debian

Mostrando el Progreso de Carga Con nginx En Debian

Este tutorial muestra cómo usar el módulo de progreso de carga de nginx para cargar uno o varios archivos y mostrar una barra de progreso de carga para el usuario. Esto es útil, por ejemplo, si los usuarios cargan archivos grandes, para que sepan que algo está sucediendo en segundo plano.

¡No emito ninguna garantía de que esto funcione para ti!

1 Instalando nginx-extras

El módulo de progreso de carga de nginx no está habilitado por defecto. Puedes ejecutar

nginx -V

para verificar si está habilitado; deberías ver algo como –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-upload-progress en la salida. Si no está habilitado, instala el paquete nginx-extras:

apt-get install nginx-extras

Después, ejecuta

nginx -V

nuevamente; el módulo de progreso de carga debería aparecer ahora en la salida:

root@server1:/var/www# nginx -V
nginx version: nginx/1.4.4
TLS SNI support enabled
configure arguments: –prefix=/usr/share/nginx –conf-path=/etc/nginx/nginx.conf –error-log-path=/var/log/nginx/error.log –http-client-body-temp-path=/var/lib/nginx/body –http-fastcgi-temp-path=/var/lib/nginx/fastcgi –http-log-path=/var/log/nginx/access.log –http-proxy-temp-path=/var/lib/nginx/proxy –http-scgi-temp-path=/var/lib/nginx/scgi –http-uwsgi-temp-path=/var/lib/nginx/uwsgi –lock-path=/var/lock/nginx.lock –pid-path=/run/nginx.pid –with-pcre-jit –with-debug –with-http_addition_module –with-http_dav_module –with-http_flv_module –with-http_geoip_module –with-http_gzip_static_module –with-http_image_filter_module –with-http_mp4_module –with-http_perl_module –with-http_random_index_module –with-http_realip_module –with-http_secure_link_module –with-http_spdy_module –with-http_stub_status_module –with-http_ssl_module –with-http_sub_module –with-http_xslt_module –with-ipv6 –with-mail –with-mail_ssl_module –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/headers-more-nginx-module –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-auth-pam –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-cache-purge –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-dav-ext-module –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-development-kit –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-echo –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/ngx-fancyindex –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-http-push –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-lua –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-upload-progress –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-upstream-fair –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/ngx_http_substitutions_filter_module
root@server1:/var/www#

Para activar el módulo, necesitamos crear una pequeña zona en nginx.conf (en el contenedor http {}) que se utiliza para rastrear las cargas (en este ejemplo llamo a la zona uploads):

vi /etc/nginx/nginx.conf

| [...] http { [...] # reservar 1MB bajo el nombre 'uploads' para rastrear cargas upload_progress uploads 1m; [...] } [...] |

Recarga nginx después:

/etc/init.d/nginx reload

2 Configurando Tu Vhost

Ahora abre tu archivo de configuración de vhost y coloca lo siguiente dentro del contenedor server {} (si usas ISPConfig, pon esto en el campo de Directivas de nginx del sitio web):

| [...] client_max_body_size 100M; location = /upload.php { try_files $uri =404; include /etc/nginx/fastcgi_params; fastcgi_pass unix:/var/lib/php5-fpm/web1.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_intercept_errors on; ## Rastrear cargas para esta ubicación en la zona definida ## arriba con un tiempo de espera de 60 segundos. track_uploads uploads 60s; } location ^~ /progress { upload_progress_json_output; report_uploads uploads; } [...] |

En mi caso, el archivo que procesa las cargas (es decir, el archivo en el atributo action del formulario HTML de carga) se llama upload.php y reside en la raíz del documento. Si tu archivo tiene un nombre diferente, ajusta location = /upload.php { en consecuencia. También asegúrate de usar las opciones correctas de fastcgi_pass para tu sitio web (probablemente usarás otro socket que el que estoy usando aquí, o estás usando conexiones TCP en lugar de sockets).

En la línea track_uploads es importante que uses el nombre de la zona upload_progress del capítulo 1 (uploads en este caso).

El contenedor location ^~ /progress {} debe tomarse literalmente, lo que significa que no lo cambies (bueno, deberías cambiar la línea report_uploads si tu zona upload_progress no se llama uploads). Esta ubicación se utilizará para consultar a nginx sobre el estado de las cargas de archivos.

Recarga nginx después (a menos que uses ISPConfig, que lo recarga por ti):

/etc/init.d/nginx reload

3 Construyendo Un Formulario de Carga

A continuación, necesitamos un formulario de carga con algo de JavaScript que consulte la ubicación de progreso durante las cargas. Mi archivo se ve así; nómbralo index.html, upload.html, etc. y colócalo en tu raíz del documento:

|

A continuación, coloca el siguiente upload.php en tu raíz del documento:

| "; } } ?> |

upload.php almacena los archivos cargados en un directorio llamado cache, así que no olvides crear ese directorio en tu raíz del documento y darle los permisos adecuados para que PHP pueda escribir en él.

Eso es todo. Ahora puedes llamar al archivo con el formulario de carga en tu navegador y probar a cargar algunos archivos:

4 Enlaces

• Módulo de Progreso de Carga de nginx: http://wiki.nginx.org/HttpUploadProgressModule
• nginx: http://nginx.org
• Debian: http://www.debian.org