4 min

Página web sencilla con Nginx Proxy Manager

Página web sencilla con Nginx Proxy Manager
Imagen de Jackson Sophat / Unsplash

Antes de elegir Ghost como plataforma para alojar este blog estuve valorando la idea de crear un sitio web a base de HTML y CSS a pelo y, de hecho, la tuve durante un tiempo a modo de prueba pero nunca saqué el tiempo necesario para crear algo que se pudiera mostrar.

Lo que sí saqué en claro fue lo necesario para hacerlo funcionar, así que lo dejo aquí escrito por si a alguien, en algún momento, le puede servir de utilidad.

Uso Nginx Proxy Manager como proxy inverso en mis servidores, que no deja de ser una GUI con Nginx corriendo debajo, por lo que debía tener la posibilidad de alojar una web sencilla.

Para hacerlo, empezaré por lo básico: desplegar el contenedor de Nginx Proxy Manager pero vamos a hacerle un pequeño cambio al docker-compose oficial y montar la carpeta que alojará nuestra página (en el ejemplo estará alojada en la carpeta www).

 services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '443:443'
      - '81:81'

    volumes:
      - /home/usuario/docker/npm/data:/data
      - /home/usuario/docker/npm/letsencrypt:/etc/letsencrypt
      - /home/usuario/docker/npm/www:/var/www

Arrancamos el servicio y accedemos por el método que tengáis vosotros para acceder a la carpeta del servidor (una sesión SSH será lo más habitual) para crear el árbol de archivos de la página (para la prueba que yo realicé tenía algo así):

 /home/usuario/docker/npm/www
   └── genscorp 
       ├── estilo.css 
       ├── index.html 
       └── robots.txt

Para poder acceder a nuestra página vamos a tener que crear un nuevo host en Nginx Proxy Manager al que le pondremos el nombre del dominio, la IP a la que se tiene que dirigir y el puerto. Desactivamos las opciones de Cache Assets, Block Common Exploits y Websocket Support para evitar problemas de acceso.

Detalle del Host de Nginx Proxy Manager

Además, en la pestaña Advance debemos indicar la localización en la que están los archivos que forman la web:

 location / {
   root /var/www/genscorp;
}

Por lo que quedaría así:

Detalle de la pestaña Advance en Nginx Proxy Manager
Detalle adicional para utilizar la codificación UTF-8 y que todo se vea como debe.

Lo que vamos a hacer es copiar el archivo nginx.conf y alojarlo en la máquina real de nuestro servidor para, tras esto, montarlo en el contenedor. Así, cuando se actualice el contenedor, no se sobreescribirán los cambios que se hagan.

Esto yo lo hice a lo bruto: desde Portainer accedí a la consola del contenedor de Nginx. Me dirigí a la ubicación del archivo nginx.conf (/etc/nginx/nginx.conf), copié directamente los datos del archivo y los pegué en un nuevo archivo en el servidor.

Detalle de la consola del contenedor de Nginx Proxy Manager. Se muestra que hice un cd /etc/nginx y un cat nginx.conf

Creamos un nuevo volumen en el contenedor para este archivo, por lo que el docker-compose final me quedó tal que así:

 services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '443:443'
      - '81:81'

    volumes:
      - /home/usuario/docker/npm/data:/data
      - /home/usuario/docker/npm/letsencrypt:/etc/letsencrypt
      - /home/usuario/docker/npm/www:/var/www
      - /home/usuario/docker/npm/nginx/nginx.conf:/etc/nginx/nginx.conf

Y por último, editamos el archivo nginx.conf para añadirle la linea charset UTF-8; dentro de la sección http

Por lo que queda así:

 # run nginx in foreground
daemon off;
pid /run/nginx/nginx.pid;
user npm;

# Set number of worker processes automatically based on number of CPU cores.
worker_processes auto;

# Enables the use of JIT for regular expressions to speed-up their processing.
pcre_jit on;

error_log /data/logs/fallback_error.log warn;

# Includes files with directives to load dynamic modules.
include /etc/nginx/modules/*.conf;

events {
        include /data/nginx/custom/events[.]conf;
}

http {
        charset                       UTF-8;
        include                       /etc/nginx/mime.types;
        default_type                  application/octet-stream;
        sendfile                      on;
        server_tokens                 off;
        tcp_nopush                    on;
        tcp_nodelay                   on;
        client_body_temp_path         /tmp/nginx/body 1 2;
        keepalive_timeout             90s;
        proxy_connect_timeout         90s;
        proxy_send_timeout            90s;
        proxy_read_timeout            90s;
        ssl_prefer_server_ciphers     on;
        gzip                          on;
        proxy_ignore_client_abort     off;
        client_max_body_size          2000m;
        server_names_hash_bucket_size 1024;
        proxy_http_version            1.1;
        proxy_set_header              X-Forwarded-Scheme $scheme;
        proxy_set_header              X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header              Accept-Encoding "";
        proxy_cache                   off;
        proxy_cache_path              /var/lib/nginx/cache/public  levels=1:2 keys_zone=public-cache:30m max_size=192m;
        proxy_cache_path              /var/lib/nginx/cache/private levels=1:2 keys_zone=private-cache:5m max_size=1024m;

        log_format proxy '[$time_local] $upstream_cache_status $upstream_status $status - $request_method $scheme $host "$request_uri" [Client $remote_addr] [Length $body_bytes_sent] [Gzip $gzip_ratio] [Sent-to $server] "$http_user_agent" "$http_referer"';
        log_format standard '[$time_local] $status - $request_method $scheme $host "$request_uri" [Client $remote_addr] [Length $body_bytes_sent] [Gzip $gzip_ratio] "$http_user_agent" "$http_referer"';

        access_log /data/logs/fallback_access.log proxy;

        # Dynamically generated resolvers file
        include /etc/nginx/conf.d/include/resolvers.conf;

        # Default upstream scheme
        map $host $forward_scheme {
                default http;
        }

        # Real IP Determination

        # Local subnets:
        set_real_ip_from 10.0.0.0/8;
        set_real_ip_from 172.16.0.0/12; # Includes Docker subnet
        set_real_ip_from 192.168.0.0/16;
        # NPM generated CDN ip ranges:
        include conf.d/include/ip_ranges.conf;
        # always put the following 2 lines after ip subnets:
        real_ip_header X-Real-IP;
        real_ip_recursive on;

        # Custom
        include /data/nginx/custom/http_top[.]conf;

        # Files generated by NPM
        include /etc/nginx/conf.d/*.conf;
        include /data/nginx/default_host/*.conf;
        include /data/nginx/proxy_host/*.conf;
        include /data/nginx/redirection_host/*.conf;
        include /data/nginx/dead_host/*.conf;
        include /data/nginx/temp/*.conf;

        # Custom
        include /data/nginx/custom/http[.]conf;
}

stream {
        # Files generated by NPM
        include /data/nginx/stream/*.conf;

        # Custom
        include /data/nginx/custom/stream[.]conf;
}

# Custom
include /data/nginx/custom/root[.]conf;

Ya podríamos arrancar el servicio y acceder a nuestra página.

CC BY NC SA