Мощные способы зарядить сервер NGINX и повысить его производительность

1656572536 moshhnye sposoby zaryadit server nginx i povysit ego proizvoditelnost

от HaKr

1*ruRaN0YaGlKpZ13eP3dxqA
зарядите свой NGINX

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

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

Я собираюсь поделиться минималистической конфигурацией NGINX, которую я нашел наиболее оптимизированной, которую я использовал для нового моего нового инструмента VisaList. Мне пришлось многое искать и исследовать, чтобы улучшить производительность моего веб-сайта на последней мили, и я подумал, что этот процесс может помочь по крайней мере нескольким другим, поэтому я делюсь этим здесь.

Почему?

Благодаря этим изменениям я смог получить следующий результат для моего нового веб-приложения:

Показатель скорости страницы: Page Speed ​​Insights

1*japLOsbLszo0zdJIkRcgag

Оценка маяка: Chrome Dev Tools Lighthouse

1*8P0556MeGprSMNTIFk4acQ

Оценка сервера: Тест сервера Qualys SSL

1*Xd1NNM6nhvezzm2-7D7jEQ

Вы также можете легко получить эти преимущества производительности. ты не надо чтобы сделать эту оптимизацию, нужно быть экспертом по DevOps. Поэтому кто-нибудь, кто новичок в веб-приложениях и использует NGINX, найдет это очень полезным.

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

В этой статье предполагается, что у вас есть сервер Ubuntu 16.04 (Xenial) и серверная программа WebApp Vue.js (или любой другой фреймворк JS), готовая к обслуживанию через NGINX вместе с сервером API. Если вы не установили NGINX и вам нужна помощь, вы можете проверить это статьи.

Так о каких оптимизациях я говорю? Давайте посмотрим код!

Оптимизация

Хорошая новость состоит в том, что вам придется беспокоиться только о двух файлах. Одной из них является общая конфигурация NGINX, которая применяется ко всем веб-приложениям (можно иметь несколько веб-приложений, таких как веб-сайт, API, статический сервер и т.д.). Другой специфичный для вашего домена, который, скажем, есть example.com. Заменить example.com с собственным доменом. Здесь я использую только голый домен без www. Я скоро осветлю это.

Откройте конфигурационные файлы NGINX или конфигурационные файлы конкретного домена с помощью этих команд:

sudo nano /etc/nginx/nginx.conf

sudo nano /etc/nginx/sites-available/example.com

Сжатие содержимого

Есть Бротли лучше чем GZip? Да и Нет. Когда браузер запрашивает веб-страницу, сервер не посылает ее непосредственно побайтно. Вместо этого он посылает его в сжатом состоянии на основе принятых кодировок браузера. В основном все сегодня используют Gzip, и вы можете спросить почему? Потому что он существует уже больше десяти лет.

Итак, вот Brotli, являющийся последним алгоритмом кодирования, разработанным Google. Brotli на ~20% эффективнее Gzip. Просто учтите, что вы должны отправлять содержимое в Gzip, где Brotli не поддерживается. Brotli лучше всего работает со статическими файлами, а не с динамическим содержимым.

Убедитесь, что тип Brotli для данных API JSON включен только в том случае, если клиентская библиотека HTTP поддерживает его. К примеру, библиотека Axios еще не поддерживает кодирование Brotli.

http {

... 

    # Gzip Settings
    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 32 16k;
    gzip_http_version 1.1;
    gzip_min_length 250;
    gzip_types image/jpeg image/bmp image/svg+xml text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon;
    
    # Brotli Settings
    brotli on;
    brotli_comp_level 4;
    brotli_buffers 32 8k;
    brotli_min_length 100;
    brotli_static on;
    brotli_types image/jpeg image/bmp image/svg+xml text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon;
...

}
/etc/nginx/nginx.conf

Добавив эти изменения, вы можете проверить, отображается ли кодировка содержимого br в заголовках ответов в инструментах разработчика Chrome:

1*6bM7se1Eqgm4F63n-Q2krg

Повысить безопасность

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

Strict-Transport-Security заголовок для HTTP Strict Transport Security (HSTS), который также защищает от атак на понижение уровня протокола.

http {

...
   # security headers
   add_header X-Frame-Options "SAMEORIGIN" always;
   add_header X-XSS-Protection "1; mode=block" always;
   add_header X-Content-Type-Options "nosniff" always;
   add_header Referrer-Policy "no-referrer-when-downgrade" always;
   add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;

   add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
...

}
/etc/nginx/nginx.conf

Оптимизируйте SSL и сеансы

SSL: используйте на TLS и выключите SSL (SSL достаточно старый и устаревший и имеет много уязвимостей). Оптимизируйте наборы шифров, поскольку они являются ядром TLS. Здесь происходит шифрование.

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

Билеты на сеансы: билеты на сеансы являются альтернативой кэшу сессии. При кэше сеанса информация о сеансе сохраняется на сервере.

OSCP: Чтобы иметь безопасное соединение с сервером, клиент должен проверить сертификат, предоставленный сервером. Чтобы убедиться, что сертификат не был отозван, клиент (браузер) свяжется с эмитентом сертификата. Это добавляет немного больше затрат на инициализацию соединения (и, следовательно, время загрузки нашей страницы).

Используйте эти директивы в конфигурации NGINX, и вы готовы для оптимизации SSL.

http {
 
...  
   # SSL Settings
   ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
   ssl_prefer_server_ciphers on;
   ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GC$
   
   # Optimize session cache
   ssl_session_cache shared:SSL:50m;
   ssl_session_timeout 1d;
   
   # Enable session tickets
   ssl_session_tickets on;
   
   # OCSP Stapling
   ssl_stapling on;
   ssl_stapling_verify on;
   resolver 8.8.8.8 8.8.4.4 208.67.222.222 208.67.220.220 valid=60s;
   resolver_timeout 2s;
...

}
/etc/nginx/nginx.conf

Повышение производительности: поддержка HTTP/2

HTTP/2 имеет много преимуществ по сравнению с HTTP, например, позволяет браузеру загружать файлы параллельно и позволяет серверу передавать ресурсы, среди прочего. Все, что вам нужно сделать, это заменить http с http2 в вашем блоке сервера по умолчанию. Вот и все, и вы получите много-много преимуществ.

server{

...

listen 443 http2 default_server;
    listen [::]:443 http2 default_server;
    server_name example.com;
...

}
/etc/nginx/sites-available/example.com

Введите эту команду curl -I -L и проверить ответ.

HTTP/2 200
server: nginx
date: Wed, 18 Jul 2018 02:13:32 GMT
content-type: text/html; charset=utf-8
content-length: 216641
vary: Accept-Encoding
....

Уменьшить сброс / атаки

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

  • Ограничение запроса limit_req : Ограничьте количество запросов на IP
  • Ограничение подключений limit_conn : Ограничьте количество подключений к IP
  • Пропускная способность/Ограничение скорости limit_rate : Ограничьте скорость передачи данных

Используя нижеприведенную директиву, вы можете быть спокойны:

http {

...
   # Limits
   limit_req_log_level warn;
   limit_req_zone $binary_remote_addr zone=reqlimit:10m rate=10r/m;

   limit_conn_zone $binary_remote_addr zone=connlimit:100m;
   limit_conn servers 1000; # Simultaneous Connections
...

}
/etc/nginx/nginx.conf
...
server {
...
   location /api/ {
      # Rate Limiting
      limit_req zone=reqlimit burst=20; # Max burst of request
      limit_req_status 460; # Status to send
      
      # Connections Limiting
      limit_conn connlimit 20; # Number of downloads per IP       
      
      # Bandwidth Limiting
      limit_rate 4096k; # Speed limit (here is on kb/s)
   }
...
}
/etc/nginx/sites-available/example.com

Кэширование на стороне клиента

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

server {

...
    location / {
       ...
       ...
    }
    ...
    ...
    location ~* \.(jpg|jpeg|png|gif|ico)$ {
       expires 30d;
    }
    location ~* \.(css|js)$ {
       expires 7d;
    }
...

}
/etc/nginx/sites-available/example.com

Микрокэширование

Если вы до сих пор не слышали об этом, сегодня вам повезло! Микрокэширование — это техника кэширования, при которой содержимое кэшируется в течение очень короткого периода времени, возможно всего за 1 секунду. Это фактически означает, что обновление сайта задерживается не более чем на секунду, что во многих случаях вполне допустимо. Это особенно полезно для ответов API, которые одинаковы для всех пользователей.

Используйте эти директивы, чтобы настроить микрокэширование с помощью в /tmp/cacheapi с кэш-памятью 100 МБ с максимальным размером папки кэша 1 Гб, которая обновляет кэш в фоновом режиме. Узнайте больше об этом здесь и здесь.

proxy_cache_path /tmp/cacheapi levels=1:2 keys_zone=microcacheapi:100m max_size=1g inactive=1d use_temp_path=off;
...

server {

...
   location /api/ {

      # Micro caching
      proxy_cache microcacheapi;
      proxy_cache_valid 200 1s;
      proxy_cache_use_stale updating;
      proxy_cache_background_update on;
      proxy_cache_lock on;
      ...
      ...
      
   }
...

}
/etc/nginx/sites-available/example.com
http {

...
   add_header X-Cache-Status $upstream_cache_status;
...

}
/etc/nginx/nginx.conf

Сертификат SSL

Давайте зашифровать — центр сертификации (CA), который обеспечивает простой способ получить и установить бесплатные сертификаты TLS/SSL. Это позволяет использовать зашифрованный HTTPS на веб-серверах. Это упрощает процесс, предоставляя программный клиент Certbot, пытающийся автоматизировать большинство (если не все) необходимые шаги.

Установите LetsEntypt:

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

Создайте сертификат LetsEncrypt SSL с помощью этой команды:

sudo certbot --nginx -d example.com -d www.example.com

а затем добавьте эти сертификаты в конфигурационный файл вашего домена так:

server {

    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;
...
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
...

}
/etc/nginx/sites-available/example.com

Перенаправить на WWW

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

server {
...
...
}
server {
    listen 80;
    listen [::]:80;
    server_name example.com;
    return 301 
}
server {
    listen 80;
    listen [::]:80;
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name www.example.com;
    return 301 $request_uri;
}
/etc/nginx/sites-available/example.com

Модуль скорости страницы

Pagespeed Module – это жемчужина, неизвестная многим. Первоначально это был проект Google, который сейчас является частью Apache Incubator. Pagespeed может автоматически позаботиться о многих известных способах повышения эффективности вашего сайта.

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

server{

...  
    # Pagespeed Module
    pagespeed on;
    
    pagespeed FileCachePath /var/cache/ngx_pagespeed_cache;
    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
    add_header "" "";
    }
    location ~ "^/pagespeed_static/" { }
    location ~ "^/ngx_pagespeed_beacon$" { }
    
    pagespeed RewriteLevel PassThrough;
    pagespeed EnableCachePurge on;
    pagespeed PurgeMethod PURGE;
    
    pagespeed EnableFilters prioritize_critical_css;
...
}

Существует так много фильтров, которые вы можете включить, но имейте в виду, что большинство современных фреймворков, таких как (Nuxt.js, Angular, Next.js и т.д.) имеют некоторые из этих оптимизации как часть процесса сборки, поэтому это может быть противоречивым . Выберите нужные фильтры и включите только их. Это ни в коем случае не полный набор фильтров, но, безусловно, повысит скорость вашего сайта до 100/100.

pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters collapse_whitespace,remove_comments;
pagespeed EnableFilters flatten_css_imports;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters defer_javascript;
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters pedantic;
pagespeed EnableFilters inline_google_font_css;
pagespeed FetchHttps enable;
pagespeed EnableFilters inline_css,move_css_above_scripts;
pagespeed EnableFilters inline_javascript;
pagespeed EnableFilters inline_import_to_link;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters responsive_images,resize_images;
pagespeed EnableFilters responsive_images_zoom;
pagespeed EnableFilters rewrite_javascript;
pagespeed EnableFilters rewrite_style_attributes,convert_meta_tags;

Вы можете прочитать больше о различных типах доступных фильтров здесь.

Итак, окончательная конфигурация NGINX и конфигурация домена выглядят примерно так:

https://gist.github.com/1hakr/01cb00dfce8c92a15c0d9faee9052042

Теперь все, что вам нужно сделать, это перезагрузить файл конфигурации NGINX, введя следующие команды, и вы перезагрузили свой сервер NGINX:

sudo nginx -t

sudo systemctl restart nginx

Совет профессионала: если вы найдете эту статью вне вашей досягаемости, то есть простой веб-сайт, на котором можно получить окончательный файл конфигурации: просмотрите Конфигурация NGINX.

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

Это мой новый микростартап VisaList, где я применил эти оптимизации. Это поможет вам найти визовые требования для всех стран мира простым и полезным способом.

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

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

я строю микростартапы во время поездки, когда я могу. Если вы считаете такие вещи интересными, вы можете подписаться на меня в Twitter и проверить мою работу с открытым кодом GitHub.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *