1. Введение
30.07.2020 Приехав утром в компанию, я по привычке открыл домашнюю страницу Nuggets, чтобы посмотреть, есть ли интересующие меня статьи, но неожиданно увидел следующий сюрприз:
Да, я проапгрейдился до Lv3.Это признание и поощрение за мое упорство в написании более года.Не могу скрыть своего счастья.Я отправился на отправку точки кипения самородков, чтобы отметить этот момент, а затем продолжил работу.
Выйдя поесть в 12:00 и вернувшись на место, я снова открыл домашнюю страницу Nuggets. К сожалению, я больше не могу получить к ней доступ. Советы следующие:
В настоящее время, если вы посетите все статьи Nuggets, вы увидите страницу, подобную приведенной выше, информирующую вас о том, что сайт будет поддерживаться и обновляться, это очень внимательно, и этот интерфейс очень красивый, мне нравится это очень.
2. Думай
Что вы чувствуете, когда видите эту страницу?
Может быть, вы думаете, что это очень просто, может быть, вы думаете, что это очень низко, это 2020 год, и сервис можно так долго останавливать, а в интернет-компании нельзя останавливаться ни на минуту.
Если оставить в стороне интернет-компанию, я считаю, что она очень профессионально занимается апгрейдом и обслуживанием Наггетов.Почему?
Поскольку многие обновления веб-сайтов вообще не подсказывают пользователям, и я даже делаю для вас специальную страницу, я думаю, что это красиво, я не верю, что вы никогда не видели следующее:
Я помню, когда я был на своей первой работе, однажды ночью, когда я опубликовал пост, я заметил, что во время релиза, когда к нашему доменному имени обращались, мы перескакивали на страницу уведомления о техническом обслуживании, такую как Nuggets. подумал, что это хороший опыт. Таким образом, пользователь знает, почему сайт недоступен.
Но в своей более поздней работе я обнаружил, что этого никто не делал, я тоже предлагал, но некоторые люди не знают об этом, а некоторые люди знают, но считают, что делать это не нужно. знает, что мы публикуем.Короче говоря, это выглядит Вроде бы простые и профессиональные вещи, на самом деле мало кто этим занимается.
Но что касается меня, я думаю, что это правильно, особенно если невозможно информировать пользователей по одному во время обновления и обслуживания.Это действительно профессионально.Пользователи с первого взгляда видят, что это делается поддерживается в течение этого периода времени.После завершения технического обслуживания, я буду продолжать посещать, говорят, что пользовательский опыт, это пользовательский опыт.
Ну что, приступим к делу, поделимся, как апгрейдить и обслуживать сайт так же элегантно, как наггетсы?
3. Реализация
В период, когда доступ к веб-сайту Nuggets был недоступен, я использовал браузер Chrome для проверки сетевого запроса и обнаружил, что все запросы были возвращены.503, следующее:
503ЯвляетсяHTTPкод состояния, представляющийService Unavailable(услуга недоступна), но это состояние временное и восстановится через некоторое время, если можно ожидать задержки, ответ МОЖЕТ включатьRetry-AfterЗаголовок используется для указания времени задержки.
Например, для этого обновления и обслуживания Nuggets расчетное время восстановления составляет 08:00 31 июля 2020 г., поэтому егоRetry-Afterдается это сообщение, как показано на изображении ниже:
с картинки вышеServer: nginx, мы можем знать, что Nginx используется на стороне сервера, поэтому первым шагом внедрения должна быть установка Nginx.
3.1 Установите Nginx
Сначала перейдите на официальный сайт, чтобы загрузить установочный пакет Nginx Linux, адрес загрузки:nginx.org/ru/download…, я скачал версию 1.18.0:
Затем загрузите загруженный файл на сервер Linux.Я загрузил здесь каталог /usr/local, затем переключитесь в каталог /usr/local и используйте следующую команду для распаковки:
tar -zxvf nginx-1.18.0.tar.gz
Затем переключитесь в каталог nginx-1.18.0.Чтобы избежать сбоя последующей команды make, вам нужно сначала выполнить следующую команду (Это очень важно, иначе легко наступить на яму):
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
Затем выполните команду:
./configure
Затем выполните команду make для компиляции:
Наконец, выполните команду make install для установки:
После успешного выполнения вы обнаружите, что папка nginx создается автоматически, как показано ниже:
3.2 Запустите Nginx
Перейдите в каталог /user/local/nginx/sbin и выполните следующую команду, чтобы запустить Nginx:
./nginx
Затем введите адрес в браузере для проверки, если вы видите интерфейс, как показано ниже, это означает, что Nginx успешно установлен:
Меры предосторожности:
Поскольку номер порта, который Nginx прослушивает по умолчанию, равен 80, если вы используете облачный сервер Alibaba, как и я, вам необходимо добавить следующую конфигурацию порта в правила группы безопасности, иначе вы не сможете получить доступ:
3.3 Настройка страницы 503
Вот простая страница 503.html (ее можно улучшить при реальном использовании) и поместите ее в каталог html Nginx:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站维护通知</title>
</head>
<body>
<img src="/images/snipaste_20200730_194851.png"/>
</body>
</html>
Затем измените nginx.conf в папке conf:
location / {
return 503;
}
error_page 503 /503.html;
location = /503.html {
root html;
}
Примечание. После каждой модификации файла nginx.conf необходимо не забывать перезапускать Nginx, иначе конфигурация не вступит в силу.
Команда перезапуска Nginx выглядит следующим образом:
./nginx -s reload
В это время я снова захожу в браузер и обнаруживаю, что на странице отображается 503.html, но изображение не может быть отображено:
Очевидно, поскольку доступ к статическим ресурсам, таким как изображения, также возвращает 503, поэтому вам необходимо добавить следующую конфигурацию, чтобы исключить статические ресурсы:
location ~ .*\.(png|ico)?$ {
root html;
}
Примечание. После каждой модификации файла nginx.conf необходимо не забывать перезапускать Nginx, иначе конфигурация не вступит в силу.
В это время снова заходим в браузер, и страница 503.html отображается нормально (тут лень, на странице только одна картинка):
Завершите настройку следующим образом:
server {
listen 80;
server_name localhost;
location / {
return 503;
}
location ~ .*\.(png|ico)?$ {
root html;
}
error_page 503 /503.html;
location = /503.html {
root html;
}
}
3.4 Закрыть Nginx
Команда для выключения Nginx выглядит следующим образом:
./nginx -s stop
3.5 Советы (скрыть номер версии)
Согласно конфигурации по умолчанию, клиент может видеть номер версии сервера nginx:
Но в целом мы его спрячем, чего можно добиться, добавив следующую конфигурацию:
http {
server_tokens off;
}
Затем вы обнаружите, что клиент больше не отображает номер версии:
4. Унаследованные проблемы
На данный момент единственная оставшаяся проблема заключается в том, как добавить Retry-After в заголовки ответа при отображении страницы 503. Я перепробовал множество решений, но они не работают, поэтому пока отложил их. , Читатели, которые знают это, могут опубликовать конфигурацию в области комментариев, указав, что благодарны!
4.1 Добавить повторную попытку после (обновлено 07 августа 2020 г.)
Сегодня утром зашел в компанию и увидел комментарии читателей.Я попробовал и успешно добавил Retry-After (предыдущий сбой был из-за того, что всегда не добавлялся).Спасибо хочу выразить здесь:
Правильная конфигурация выглядит следующим образом:
error_page 503 /503.html;
location = /503.html {
root html;
add_header Retry-After "Fri, 7 Aug 2020 23:59:00 GMT" always;
}
Эффект следующий:
5. Резюме
Обновление и поддержка веб-сайта и элегантное уведомление пользователей, безусловно, могут улучшить взаимодействие с пользователем, а также выглядят очень профессионально.Это не сложно реализовать, но не каждый готов это делать.
Основываясь на этой проблеме, в этой статье подробно описаны шаги по установке Nginx, команды для запуска, перезапуска и закрытия Nginx, метод настройки страницы 503 и приемы, позволяющие скрыть номер версии Nginx.
Если позволят условия, будете ли вы настраивать страницу 503 после ее выпуска? Это определенно заставит вас выглядеть профессионально, так что попробуйте!
6. Ссылка
Конфиг nginx не показывает номер версии
Примечание. Если вы считаете, что в этом блоге есть какие-либо ошибки или лучшие предложения, оставьте сообщение, я слежу и вовремя исправлю содержание блога!
Статья будет постоянно обновляться, пожалуйста, обратите внимание на общедоступный аккаунт WeChat «Shencheng Stranger», чтобы прочитать ее впервые!