Obtener y ejecutar el contenedor de Nginx

Para iniciar, descarguemos la imagen oficial de Nginx y ejecutemos un contenedor básico.

$ docker pull nginx
$ docker run --name servidor-nginx-prueba -p 9090:80 -d nginx

Preparar la estructura de diretcorios

Creemos directorios en el host para almacenar contenido web, registros y configuraciones personalizadas.

$ mkdir -p ~/proyecto-nginx/www ~/proyecto-nginx/logs ~/proyecto-nginx/conf

Copiar archivos de configuración iniciales

Extraigamos el archivo de configuración predeterminado del contenedor en ejecución para usarlo como base.

$ docker cp ID_CONTENEDOR:/etc/nginx/nginx.conf ~/proyecto-nginx/conf/nginx.conf

• www: Se mapeará como el directorio raíz de documentos en el contenedor.
• logs: Almacenará los archivos de registro generados por Nginx.
• conf: Contendrá las configuraciones principales que se aplicarán al contenedor.

Ejecutar Nginx con volúmenes montados

Configuremos el contneedor para que utilice nuestros directorios locales, asegurando persistencia y personalización.

$ docker run -d -p 9091:80 \
    --name servidor-nginx-prod \
    -v ~/proyecto-nginx/www:/var/www/html \
    -v ~/proyecto-nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
    -v ~/proyecto-nginx/logs:/var/log/nginx \
    nginx

• -p 9091:80: Redirige el puerto 80 del contenedor al puerto 9091 del host.
• --name servidor-nginx-prod: Asigna un nombre identificativo al contenedor.
• -v ~/proyecto-nginx/www:/var/www/html: Sincroniza el directorio local www con la ruta de contenido web del conteneder.
• -v ~/proyecto-nginx/conf/nginx.conf:/etc/nginx/nginx.conf: Sustituye la configuración predeterminada por la nuestra.
• -v ~/proyecto-nginx/logs:/var/log/nginx: Centraliza los registros en el host.

Desplegar archivos estáticos

Ubica los archivos de tu aplicación web, como HTML, CSS y JavaScript, en el directorio ~/proyecto-nginx/www. Para aplicar cambios en la configuración sin detener el servicio, envía una señal al contenedor o reinícialo.

$ docker kill -s HUP nombre-del-contenedor
$ docker restart nombre-del-contenedor

Configurar Nginx para aplicaciones SPA (Single Page Application)

Para que las rutas de aplicaciones basadas en frameworks como Vue.js o React funcionen correctamente, modifica el bloque de servidor en nginx.conf usando try_files.

location / {
    try_files $uri $uri/ /index.html;
}

A continuación, un ejemplo de archivo nginx.conf completo adaptado para una aplicación con modo historial HTML5.

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log info;
pid        /tmp/nginx.pid;

events {
    worker_connections  1024;
    multi_accept on;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  avanzado  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  avanzado;

    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;

    keepalive_timeout  65;

    gzip  on;
    gzip_types text/plain text/css application/json application/javascript text/xml;

    include /etc/nginx/conf.d/*.conf;

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

        root /var/www/html;
        index index.htm;

        location / {
            try_files $uri $uri/ @redirects;
        }

        location @redirects {
            rewrite ^(.*)$ /index.htm last;
        }

        location ~* \.(?:ico|css|js|woff2?|ttf|svg|png|jpg|jpeg|gif)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
            access_log off;
        }
    }
}