Необходимые знания Nginx для фронтенд-разработчиков

Nginx

Роль nginx в приложении

  • разрешать междоменные
  • фильтрация запросов
  • настроить gzip
  • Балансировка нагрузки
  • сервер статических ресурсов
  • ...

nginx — это высокопроизводительный HTTP и обратный прокси-сервер, а также универсальный прокси-сервер TCP/UDP, изначально написанный русским Игорем Сысоевым.

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

Ниже я объясню роль nginx в приложении из реального применения nginx на предприятии.

Чтобы облегчить понимание, давайте сначала разберемся с некоторыми базовыми знаниями.nginx是一个高性能的反向代理服务器Так что же такое обратный прокси?

Прямой прокси и обратный прокси

играет рольэто предполагаемый уровень сервера между сервером и клиентом,играет рольПолучит запрос клиента и перенаправит его на сервер, а затем перенаправит ответ сервера клиенту.

Будь то прямой прокси или обратный прокси, реализованы вышеуказанные функции.

image

прямой прокси

прямой прокси, что означает сервер между клиентом и исходным сервером.Чтобы получить контент с исходного сервера, клиент отправляет запрос на прокси и указывает цель (исходный сервер), а затем прокси пересылает запрос на исходный сервер. исходный сервер и отправляет его на исходный сервер, а полученный контент возвращается клиенту.

прямой проксиЭто для нас, то есть для клиента.Клиент может получить доступ к ресурсам сервера, к которым он не может получить доступ сам по форвард прокси.

прямой проксиОн прозрачен для нас и непрозрачен для сервера, то есть сервер не знает, получает ли он доступ с прокси или с реального клиента.

обратный прокси

**Обратный прокси** (Reverse Proxy) означает, что прокси-сервер принимает запросы на подключение в Интернете, затем перенаправляет запрос на сервер во внутренней сети и возвращает результат, полученный от сервера, на запрос подключения в Интернете. В это время прокси-сервер ведет себя как обратный прокси-сервер для внешнего мира.

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

обратный проксиОно прозрачно для сервера и непрозрачно для нас, то есть мы не знаем, что обращаемся к прокси-серверу, а сервер знает, что его обслуживает обратный прокси.

базовая конфигурация

Структура конфигурации

Ниже приведена базовая структура файла конфигурации nginx:

image

events { 

}

http 
{
    server
    { 
        location path
        {
            ...
        }
        location path
        {
            ...
        }
     }

    server
    {
        ...
    }

}
  • main: глобальная конфигурация nginx, которая действует глобально.
  • events: конфигурация влияет на сервер nginx или сетевое подключение к пользователю.
  • http: Вы можете вкладывать несколько серверов, настраивать прокси, кэши, определения журналов и другие функции и конфигурации сторонних модулей.
  • server: Настройте соответствующие параметры виртуального хоста.В одном http может быть несколько серверов.
  • location: настроить маршрутизацию запросов и обработку различных страниц.
  • upstream: Настройте конкретный адрес внутреннего сервера, что является неотъемлемой частью конфигурации балансировки нагрузки.

встроенная переменная

НижеnginxНекоторые встроенные глобальные переменные обычно используются в конфигурации, вы можете использовать их в любом месте конфигурации.

имя переменной Функция
$host в запросеHost, если запрос неHostстрока, она равна заданному имени сервера
$request_method тип запроса клиента, напримерGET,POST
$remote_addr клиентаIPадрес
$args параметры в запросе
$content_length в заголовке запросаContent-lengthполе
$http_user_agent Информация об агенте клиента
$http_cookie Информация о файлах cookie клиента
$remote_port клиентский порт
$server_protocol Протокол, используемый запросом, напримерHTTP/1.0, HTTP/1.1`
$server_addr адрес сервера
$server_name псевдоним сервера
$server_port номер порта сервера

разрешать междоменные

Давайте сначала проследим источник, что именно происходит в разных доменах.

Определение перекрестного домена

Политика того же источника ограничивает взаимодействие документов или сценариев, загруженных из одного источника, с ресурсами из другого источника. Это важный механизм безопасности для изоляции потенциально вредоносных файлов. Операции чтения между разными источниками обычно не допускаются.

Определение гомологии

Две страницы имеют один и тот же источник, если их протокол, порт (если указан) и доменное имя совпадают.

image

Принцип решения междоменных задач nginx

Например:

  • Доменное имя внешнего сервера:fe.server.com
  • Доменное имя серверной службы:dev.server.com

я сейчас вfe.server.comправильноdev.server.comИнициирование запроса обязательно будет междоменным.

Теперь нам просто нужно запустить сервер nginx, который будетserver_nameУстановить какfe.server.com, а затем установите соответствующее расположение для перехвата внешних запросов, требующих междоменного доступа, и, наконец, обратного прокси-запроса.dev.server.com. Например, следующая конфигурация:

server {
        listen       80;
        server_name  fe.server.com;
        location / {
                proxy_pass dev.server.com;
        }
}

Это прекрасно обходит политику браузера с одинаковым происхождением:fe.server.comдоступnginxизfe.server.comотносится к доступу того же происхождения, в то время какnginxЗапросы, пересылаемые на сервер, не активируют политику браузера с тем же источником.

фильтрация запросов

image

Фильтровать по коду состояния

error_page 500 501 502 503 504 506 /50x.html;
    location = /50x.html {
        #将跟路径改编为存放html的路径。
        root /root/static/html;
    }

Отфильтруйте по имени URL, точно сопоставьте URL-адрес и перенаправьте все несопоставленные URL-адреса на домашнюю страницу.

location / {
    rewrite  ^.*$ /index.html  redirect;
}

Фильтр по типу запроса.

if ( $request_method !~ ^(GET|POST|HEAD)$ ) {
        return 403;
    }

настроить gzip

image

GZIPЯвляется одним из трех указанных стандартных форматов сжатия HTTP. В настоящее время большинство веб-сайтов используютGZIPкоробка передачHTML,CSS,JavaScriptи другие файлы ресурсов.

Для текстовых файлов,GZipЭффект очень очевиден, после открытия желаемой скорости потока до простой передачи1/4 ~ 1/3.

Не каждый браузер поддерживаетgzip, как узнать, поддерживает ли клиентgzipНу и в шапке запросаAccept-Encodingдля определения поддержки сжатия.

image

включитьgzipТребуется поддержка как клиента, так и сервера, если клиент поддерживаетgzip, то до тех пор, пока сервер может вернутьgzipфайл для включенияgzip, мы можем пройтиnginxконфигурация, позволяющая серверу поддерживатьgzip. последующийresponeсерединаcontent-encoding:gzip, что означает, что сервер включенgzipкомпрессионный метод.

image

    gzip                    on;
    gzip_http_version       1.1;        
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;

gzip

  • включено или выключеноgzipмодуль
  • По умолчанию off
  • Настраивается как on / off

gzip_http_version

  • включитьGZipнужный HTTPМинимальная версия
  • По умолчанию HTTP/1.1

Вот почему версия по умолчанию не1.0Шерстяная ткань?

HTTPдействующий TCPПомимо соединения, есть еще и естественный TCPТо же трехстороннее рукопожатие, медленный старт и другие возможности.

При включенных постоянных соединениях сервер отправляет ответ наTCPСоединение остается открытым. Последующие запросы и ответы между одной и той же парой клиент/сервер могут быть отправлены через это соединение.

image

Чтобы максимально улучшитьHTTPПроизводительность, использование постоянных соединений особенно важно.

HTTP/1.1 Поддержка по умолчаниюTCPпостоянное соединение,HTTP/1.0Также можно явно указатьConnection: keep-aliveдля включения постоянных соединений. заTCPпри постоянном соединении HTTPсообщение, клиенту нужен механизм для точного определения конечного положения, а вHTTP/1.0 , этот механизм только Content-Length. пока вHTTP/1.1 добавлено вTransfer-Encoding: chunkedСоответствующий блочный передаточный механизм отлично может решить такие задачи.

nginxТа же конфигурацияchunked的Атрибутыchunked_transfer_encoding, это свойство включено по умолчанию.

Nginx включенGZipВ случае, не будет ждать файлGZipЗавершите, а затем верните ответ и вместо этого ответьте при сжатии, что может значительно улучшитьTTFB(Time To First Byte, время первого байта, важный показатель для оптимизации производительности WEB). Единственная проблема с этим,NginxНачиная возвращать ответ, он не может знать, насколько большим будет файл, который будет передан, т.е. он не может датьContent-LengthЭтот заголовок ответа.

Итак, вHTTP1.0при использованииNginx включеноGZip, не доступенContent-Length, что привело к открытию постоянных ссылок в HTTP 1.0 и использованиюGZipЕсть только один выбор, так что вот онgzip_http_versionПо умолчанию установлено значение1.1.

gzip_comp_level

  • Уровень сжатия: чем выше уровень, тем больше степень сжатия и, конечно, больше время сжатия (быстрее передача, но больше потребление ЦП).
  • По умолчанию1
  • Значение уровня сжатия1-9

gzip_min_length

  • Устанавливает минимальное количество байтов на странице, которое разрешено сжимать,Content-LengthЗапросы меньше этого значения не будут сжаты.
  • По умолчанию:0
  • Когда заданное значение мало, длина сжатого файла может быть больше, чем исходный файл, рекомендуется установить1000над

gzip_types

  • Тип файла, который нужно сжать с помощью gzip (MIMEТипы)
  • По умолчанию:text/html(без сжатия по умолчаниюjs/css)

Балансировка нагрузки

Что такое балансировка нагрузки

image

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

Думайте о переднем окне службы как о нашем внутреннем сервере, а люди за терминалом — о бесчисленных клиентах, делающих запросы. Балансировка нагрузки используется, чтобы помочь нам разумно распределить многочисленные клиентские запросы на каждый сервер, чтобы добиться полного использования ресурсов сервера и сократить время обработки запросов.

Как nginx реализует балансировку нагрузки

Upstream указывает список адресов внутренних серверов.

upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

Перехватите запрос ответа на сервере и перенаправьте запрос на список серверов, настроенный в Upstream.

    server {
        server_name  fe.server.com;
        listen 80;
        location /api {
            proxy_pass http://balanceServer;
        }
    }

Вышеуказанная конфигурация указывает только список серверов, которые nginx должен пересылать, и не определяет стратегию распределения.

nginx реализует стратегию балансировки нагрузки

image

стратегия голосования

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

upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

image

Политика минимального количества подключений

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

upstream balanceServer {
    least_conn;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

image

Политика максимального времени отклика

При использовании NGINX Plus приоритет отдается серверу с наименьшим временем отклика.

upstream balanceServer {
    fair;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

привязка ip клиента

Для запросов с одного ip всегда выделяется только один сервер, что эффективно решает проблему разделения сессий в динамических веб-страницах.

upstream balanceServer {
    ip_hash;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

сервер статических ресурсов

location ~* \.(png|gif|jpg|jpeg)$ {
    root    /root/static/;  
    autoindex on;
    access_log  off;
    expires     10h;# 设置过期时间为10小时          
}

совпадает сpng|gif|jpg|jpegдля завершения запроса и перенаправьте запрос на локальный путь,rootПуть, указанный в, является локальным путем nginx. В то же время вы также можете выполнить некоторые настройки кэша.

резюме

Функции nginx очень мощные, и еще многое предстоит изучить.Некоторые из приведенных выше конфигураций являются реальными приложениями конфигурации компании (упрощенной).Если у вас есть какие-либо комментарии или предложения, оставьте сообщение ниже...

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

Рекомендую обратить внимание на мой публичный аккаунт WeChat [code secret garden], будем общаться и расти вместе.

Категории