// DevOps

Integración de las páginas del constructor de sitios en su recurso a través de NGINX

Publicado el 12.10.2025

La integración de una página creada en un constructor de sitios externo en su dominio permite ampliar la funcionalidad y mantener un estilo uniforme de la interfaz. Este artículo explica cómo, mediante un proxy inverso NGINX, integrar páginas desde un servicio externo (por ejemplo, example.website-builder.com) en su sitio your-main-site.com en las rutas /path1/ y /path2/.

⚙️ Principio de funcionamiento

NGINX redirige las solicitudes desde su dominio al sitio externo, actuando como intermediario entre el usuario y el servicio del constructor.

Ejemplo:

/path1/ → muestra la página https://example.website-builder.com/partners
/path2/ → muestra la página https://example.website-builder.com/

El usuario permanece en su dominio (your-main-site.com), y el contenido externo se carga a través del proxy.

🧩 Elementos principales de la configuración

Componente	Propósito
proxy_pass	Redirige las solicitudes al recurso externo
proxy_set_header	Transfiere los encabezados originales y la IP del cliente
proxy_redirect	Reescribe URLs y enlaces
proxy_cookie_domain / proxy_cookie_path	Cambia el dominio y la ruta de las cookies
proxy_buffers, timeouts	Configuraciones de rendimiento y memoria

📜 Configuración de NGINX

server {
    listen 443 ssl;
    server_name your-main-site.com;

    # Certificados SSL
    ssl_certificate     /path/to/your/certificate.crt;
    ssl_certificate_key /path/to/your/private.key;

    # ---------- /path1/ ----------
    location /path1/ {
        proxy_pass https://example.website-builder.com/partners;
        proxy_http_version 1.1;
        proxy_set_header Connection "";

        proxy_set_header Host example.website-builder.com;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host  $host;
        proxy_ssl_server_name on;

        proxy_redirect off;
        proxy_redirect https://example.website-builder.com/partners /path1/;

        proxy_cookie_domain example.website-builder.com your-main-site.com;
        proxy_cookie_path   / /path1/;

        proxy_connect_timeout   5s;
        proxy_send_timeout     30s;
        proxy_read_timeout     30s;
        proxy_buffers           32 16k;
        proxy_busy_buffers_size 32k;
        client_max_body_size    20m;
    }

    # ---------- /path2/ ----------
    location /path2/ {
        proxy_pass https://example.website-builder.com/;
        proxy_http_version 1.1;
        proxy_set_header Connection "";

        proxy_set_header Host example.website-builder.com;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host  $host;
        proxy_ssl_server_name on;

        proxy_redirect off;
        proxy_redirect https://example.website-builder.com/ /path2/;
        proxy_redirect http://example.website-builder.com/ /path2/;

        proxy_cookie_domain example.website-builder.com your-main-site.com;
        proxy_cookie_path   / /path2/;

        proxy_connect_timeout   5s;
        proxy_send_timeout     30s;
        proxy_read_timeout     30s;
        proxy_buffers           32 16k;
        proxy_busy_buffers_size 32k;
        client_max_body_size    20m;
    }
}

🚀 Pasos para la implementación

1. Preparación

Asegúrese de que NGINX esté instalado.
Disponga de privilegios de administrador y de un certificado SSL válido para your-main-site.com.
Verifique la disponibilidad del recurso externo example.website-builder.com.

2. Añadir la configuración

Cree el archivo:

sudo nano /etc/nginx/conf.d/website_builder.conf

Pegue el bloque anterior y guarde los cambios.

3. Comprobación y reinicio

sudo nginx -t
sudo systemctl reload nginx

4. Pruebas

Abra:

Compruebe la correcta carga de las páginas, los enlaces y las cookies.

🧠 Recomendaciones

Área	Consejo
Seguridad	Use HTTPS en ambos extremos, configure los encabezados `Content-Security-Policy`, `X-Frame-Options`.
Rendimiento	Configure los tiempos de espera, el caché (`proxy_cache`), optimice el tamaño de los buffers.
Monitorización	Habilite los logs `access_log` y `error_log` para analizar el tráfico.
Compatibilidad de URL	Verifique la corrección de todos los enlaces relativos después del proxy.

🧩 Errores frecuentes y soluciones

Problema	Posible solución
404 Not Found	Verifique la exactitud de `proxy_pass` y la disponibilidad del sitio externo.
Bucles de redirección	Asegúrese de que `proxy_redirect` no entre en conflicto con redirecciones externas.
Las cookies no se guardan	Configure correctamente `proxy_cookie_domain` y `proxy_cookie_path`.
Contenido mixto	Todos los recursos deben cargarse por HTTPS.
Respuestas lentas	Aumente los tiempos de espera o optimice el servidor externo.

✅ Conclusión

Configurar un proxy inverso con NGINX permite integrar páginas del constructor de sitios en su dominio, manteniendo una interfaz y estilo uniformes. Esta integración:

crea una experiencia de usuario fluida;
facilita la implementación de landing pages externas o páginas de socios;
aumenta la seguridad y el control sobre el contenido.

Siguiendo los pasos indicados, podrá integrar el sitio externo en su proyecto en cuestión de minutos, sin lógica compleja ni código adicional.

Etiquetas:

#nginx #reverse proxy #integración web #devops #site-builder #ssl

¿Te ayudó? Apóyame Apóyame en Boosty

// Reviews

Reseñas relacionadas

Llegué con una solicitud costosa para la configuración de un servidor VPS, pero durante la consulta Mikhail propuso una solución mucho más sencilla y económica. Al final ahorré dinero y tiempo. Mikhail — un verdadero experto que trabaja por el resultado del cliente, no por la factura. ¡Lo recomiendo!

Llegué con una solicitud costosa para la configuración de un servidor VPS, pero durante la consulta Mikhail propuso una solución mucho más simple y económica. Al final ahorré presupuesto y tiempo. Mikhail es un …

kfhzasorin