Флаг: English English

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

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

Интеграция страницы, созданной во внешнем конструкторе сайтов, в ваш домен позволяет расширить функциональность и сохранить единый стиль интерфейса. Эта статья объясняет, как с помощью обратного прокси 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

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

Очень доволен работой с Михаилом. Любая, даже на первый взгляд, трудная задача - становится благодаря ему качественно реализованной! Спасибо вам)

Dr-zelenin · Настройка vps, настройка сервера

11.11.2025 · ⭐ 5/5

Очень доволен работой с Михаилом. Любая, даже на первый взгляд, трудная задача - становится благодаря ему качественно реализованной! Спасибо вам)

Михаил очень оперативно помог настроить работу сайта. Сам бы я точно провозился весь день. Приятно, когда профессионал помогает экономить твое время и делает работу на высоком уровне. Рекомендую!

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

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

21.10.2025 · ⭐ 5/5

Михаил очень оперативно помог настроить работу сайта. Сам бы я точно провозился весь день. Приятно, когда профессионал помогает экономить твое время и делает работу на высоком уровне. Рекомендую!

Нужна помощь?

Свяжись со мной и я помогу решить проблему

Kwork LinkedIn Письмо Telegram Upwork GitHub

Похожие посты