Страница обслуживания для nginx

Maintenance page 503 error или страница обслуживания для веб сервера nginx.
Иногда, при проведении работ на сервере требуется закрыть доступ для посетителей, но чтобы сделать это красиво, нужно добавить специальную страницу.

Откроем файл nginx с директивой server и добавим следующее:

           if (-f $document_root/error503.html) {
                return 503;
           }
           error_page 503 @maintenance;
           location @maintenance {
                rewrite ^(.*)$ /error503.html break;
           }

if (-f $document_root/error503.html) {

return 503;

}

error_page 503 @maintenance;

location @maintenance {

rewrite ^(.*)$ /error503.html break;

}

Такая конфигурация запретит доступ всем, даже нам, поэтому есть способ использовать функцию geo

geo $maintenance {
    default yes;
    192.168.1.0/24 no;
}
    if ($maintenance = yes) {
    return 503;
    }

geo $maintenance {

default yes;

192.168.1.0/24 no;

}

if ($maintenance = yes) {

return 503;

}

Таким образом мы запрещаем доступ всем, кроме тех IP с которых будем заходить, и наличие файла error503.html необязательно.

Создаем страницу error503.html содержимое берем ниже.
На английском языке

<!DOCTYPE html>
<html>
    <head>
        <title>Site is down for maintenance</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style type="text/css">
            body { text-align: center; padding: 10%; font: 20px Helvetica, sans-serif; color: #333; }
            h1 { font-size: 50px; margin: 0; }
            article { display: block; text-align: left; max-width: 650px; margin: 0 auto; }
            a { color: #dc8100; text-decoration: none; }
            a:hover { color: #333; text-decoration: none; }
            @media only screen and (max-width : 480px) {
                h1 { font-size: 40px; }
            }
        </style>
    </head>
    <body>
        <article>
            <h1>Site is temporarily unavailable.</h1>
            <p>Scheduled maintenance is currently in progress. Please check back soon.</p>
            <p>We apologize for any inconvenience.</p>
            <p id="signature">&mdash; <a href="mailto:[Email]">[Name]</a></p>
        </article>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Site is down for maintenance</title>

body { text-align: center; padding: 10%; font: 20px Helvetica, sans-serif; color: #333; }

h1 { font-size: 50px; margin: 0; }

article { display: block; text-align: left; max-width: 650px; margin: 0 auto; }

a { color: #dc8100; text-decoration: none; }

a:hover { color: #333; text-decoration: none; }

@media only screen and (max-width : 480px) {

h1 { font-size: 40px; }

}

</style>

</head>

<body>

<h1>Site is temporarily unavailable.</h1>

<p>Scheduled maintenance is currently in progress. Please check back soon.</p>

<p>We apologize for any inconvenience.</p>

</article>

</body>

</html>

На русском языке

<!DOCTYPE html>
<html>
    <head>
        <title>Site is down for maintenance</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style type="text/css">
            body { text-align: center; padding: 10%; font: 20px Helvetica, sans-serif; color: #333; }
            h1 { font-size: 50px; margin: 0; }
            article { display: block; text-align: left; max-width: 650px; margin: 0 auto; }
            a { color: #dc8100; text-decoration: none; }
            a:hover { color: #333; text-decoration: none; }
            @media only screen and (max-width : 480px) {
                h1 { font-size: 40px; }
            }
        </style>
    </head>
    <body>
        <article>
            <h1>Сайт временно недоступен.</h1>
            <p>Плановое техническое обслуживание в настоящее время в стадии разработки. Пожалуйста, зайдите в ближайшее время.</p>
            <p>Мы приносим свои извинения за доставленные неудобства.</p>
            <p id="signature">&mdash; <a href="mailto:[Email]">[Email]</a></p>
        </article>
    </body>
</html>