Встраивание страниц конструктора сайтов в ваш ресурс через NGINX

Опубликовано 12.10.2025

🌐 Встраивание страницы конструктора сайтов в ваш ресурс через NGINX

Интеграция страницы, созданной во внешнем конструкторе сайтов, в ваш домен позволяет расширить функциональность и сохранить единый стиль интерфейса. Эта статья объясняет, как с помощью обратного прокси NGINX встроить страницы из внешнего сервиса (например, example.website-builder.com) в ваш сайт your-main-site.com по путям /path1/ и /path2/.

⚙️ Принцип работы

NGINX перенаправляет запросы с вашего домена к внешнему сайту, выступая посредником между пользователем и сервисом конструктора.

Пример:

/path1/ → отображает страницу https://example.website-builder.com/partners
/path2/ → отображает страницу https://example.website-builder.com/

Пользователь остаётся на вашем домене (your-main-site.com), а внешний контент загружается через прокси.

🧩 Основные элементы конфигурации

Компонент	Назначение
proxy_pass	Перенаправляет запросы на внешний ресурс
proxy_set_header	Передаёт исходные заголовки и IP клиента
proxy_redirect	Переписывает URL-адреса и ссылки
proxy_cookie_domain / proxy_cookie_path	Изменяет домен и путь для cookie
proxy_buffers, timeouts	Настройки производительности и памяти

📜 Конфигурация NGINX

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

    # 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;
    }
}

🚀 Шаги по внедрению

1. Подготовка

Убедитесь, что установлен NGINX.
У вас есть права администратора и валидный SSL-сертификат для your-main-site.com.
Проверьте доступность внешнего ресурса example.website-builder.com.

2. Добавление конфигурации

Создайте файл:

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

Вставьте приведённый выше блок и сохраните изменения.

3. Проверка и перезапуск

sudo nginx -t
sudo systemctl reload nginx

4. Тестирование

Откройте:

Проверьте корректность загрузки страниц, ссылок и cookie.

🧠 Рекомендации

Направление	Совет
Безопасность	Используйте HTTPS на обеих сторонах, настройте заголовки `Content-Security-Policy`, `X-Frame-Options`.
Производительность	Настройте таймауты, кэширование (`proxy_cache`), оптимизируйте размер буферов.
Мониторинг	Включите логи `access_log` и `error_log` для анализа трафика.
Совместимость URL	Проверяйте корректность всех относительных ссылок после проксирования.

🧩 Частые ошибки и решения

Проблема	Возможное решение
404 Not Found	Проверьте правильность `proxy_pass` и доступность внешнего сайта.
Циклы редиректов	Убедитесь, что `proxy_redirect` не конфликтует с внешними перенаправлениями.
Cookie не сохраняются	Настройте `proxy_cookie_domain` и `proxy_cookie_path` корректно.
Смешанный контент	Все ресурсы должны грузиться по HTTPS.
Медленные ответы	Увеличьте таймауты или оптимизируйте внешний сервер.

✅ Заключение

Настройка обратного прокси через NGINX позволяет встроить страницы из конструктора сайтов в ваш домен, сохранив единый интерфейс и стиль. Такая интеграция:

создаёт бесшовный пользовательский опыт;
упрощает внедрение внешних лендингов или партнёрских страниц;
повышает безопасность и контроль над контентом.

Следуя приведённым шагам, вы сможете интегрировать внешний сайт в свой проект за несколько минут, без сложной логики или дополнительного кода.

Теги: #nginx #reverse proxy #веб-интеграция #devops #site-builder #ssl

Поддержать на Boosty

Отзывы по теме

Михаил - великолепный исполнитель! Чувствуется, что человек с огромным опытом. Работа была сделано четко, в срок. Пришлось повозиться из-за неидеальности проекта, который устанавливали на сервер, но Михаил внимательно и вдумчиво подсказывал как и что сделать. В итоге все заработало! Всем рекомендую для кого, важно качество работы!

N_Konstantin · Настройка vps, настройка сервера

Освоившийся покупатель

10.10.2025 · ⭐ 5/5

Михаил - великолепный исполнитель! Чувствуется, что человек с огромным опытом. Работа была сделано четко, в срок. Пришлось повозиться из-за неидеальности проекта, который устанавливали на сервер, но Михаил внимательно и вдумчиво подсказывал как и что сделать. В итоге все заработало! Всем рекомендую для кого, важно качество работы!