Настройте страницу обслуживания nginx с изображениями/css и прокси.

Содержание

Вопрос или проблема
Ответ или решение
Конфигурирование страниц технического обслуживания в Nginx с использованием проксирования, изображений и CSS
Основные шаги настройки в Nginx
Объяснение конфигурации
Заключение

Вопрос или проблема

Я прочитал много вопросов о настройке страниц обслуживания nginx, но не могу выяснить, как сделать именно это. Обычно мой nginx просто проксирует все на другой сервис. Для режима обслуживания мне нужно, чтобы он возвращал страницу maintenance.html, но эта страница содержит изображения и ссылки на css. Проблема в том, что если я возвращаю 503 на основе существования файла, это также возвращает 503 для всех изображений. Я вижу, как это избежать без прокси, но когда режим обслуживания не активен, мне нужно, чтобы изображения также проксировались, и я не могу понять, как это сделать. По сути, мне нужно следующее:

если режим обслуживания
   если изображение или css -> отправить /var/www/html/image
   иначе -> отправить /var/www/html/maintenance.html
иначе
   проксировать всё, включая изображения и css
конец

Другие ответы, которые я читал, предполагают, что вы всегда хотите обслуживать изображения из /var/www/html, но я хочу делать это только в режиме обслуживания.

Заранее спасибо.

Ответ или решение

Конфигурирование страниц технического обслуживания в Nginx с использованием проксирования, изображений и CSS

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

Основные шаги настройки в Nginx

Подготовьте файлы: Начните с подготовки файла maintenance.html и всех необходимых статических ресурсов (изображений и CSS). Пусть они будут храниться в директории /var/www/html.
Настройте конфигурацию Nginx: Вам необходимо будет внести изменения в конфигурационный файл вашего Nginx. Этот файл обычно располагается в /etc/nginx/nginx.conf или в файлах конфигурации ваших серверов в /etc/nginx/sites-available/. Вот пример конфигурации, которая соответствует вашим требованиям:

server {
    listen 80;
    server_name yourdomain.com;  # Замените на ваше доменное имя

    # Определите переменную для режима технического обслуживания
    set $maintenance_mode 1;  # Установите 1 для включения режима. Используйте 0, если отключен.

    location / {
        # Если режим обслуживания включен
        if ($maintenance_mode) {
            # Проверяем тип запроса: если это CSS или изображение
            if ($request_uri ~* \.(css|jpg|jpeg|png|gif|ico)$) {
                root /var/www/html;  # Отдаём статические ресурсы
                try_files $uri =404;  # Если файл не найден, возвращаем 404
            }
            # Для всех остальных запросов
            add_header Content-Type text/html;
            return 503;  # Возвращаем код 503
        }

        # Проксирование на другой сервис, когда режим обслуживания отключён
        proxy_pass http://your_backend_service;  # Замените на адрес вашего сервиса
        proxy_set_header Host $host;
        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;
    }

    # Специальный блок для обработки страницы обслуживания
    location = /50x.html {
        root /var/www/html;  # Убедитесь, что файл 50x.html существует
    }

    location = /maintenance.html {
        root /var/www/html;  # Убедитесь, что файл maintenance.html существует
        internal;  # Делаем этот доступ внутренним
    }

    error_page 503 @maintenance;  # Указываем, как обрабатывать код ошибки 503

    location @maintenance {
        return 503;  # Возвращаем 503, когда режим обслуживания активен
    }

    location ~ / {
        # Эта директория должна содержать ваш index.html или основной контент
        root /var/www/html;
        index index.html index.htm;
    }
}

Объяснение конфигурации

maintenance_mode: Переменная, которая управляет, находится ли сервер в режиме обслуживания. Устанавливая ее в 1, мы активируем режим обслуживания. При необходимости, можно изменить значение на 0 для выключения.
Обработчики location: Мы определили различные блоки location для управления как статическими ресурсами, так и динамическими запросами к проксируемому сервису.
Проверка URI: Внутри общего блока location мы проверяем, является ли запрашиваемый ресурс изображением или CSS-файлом. Если да — мы отдаем его из директории /var/www/html. В противном случае возвращаем код 503.
error_page и maintenance: Мы устанавливаем специальную страницу для ошибок, которую будет показывать Nginx, если он вернет 503.

Заключение

С помощью приведенной выше конфигурации Nginx, вы сможете эффективно управлять режимом обслуживания, обеспечивая при этом доступ к статическим ресурсам, таким как изображения и CSS, даже в этом режиме. Не забывайте проверять работоспособность после внесения изменений и перезапускать Nginx (например, с помощью systemctl restart nginx). Этот подход позволит вам улучшить пользовательский опыт, показывая аккуратные страницы технического обслуживания с необходимым контентом.

Пожалуйста, свяжитесь с профессионалом, если вам нужна помощь в сложных сценариях.