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

Мы разберем, как настроить Nginx так, чтобы он отдавал HTML, CSS и JS максимально быстро. А еще затронем темы кэширования и gzip-сжатия, чтобы твой сайт летал.

Что такое статический сайт?

Статический сайт – это сайт, который состоит из «готовых» файлов. HTML-файл отвечает за структуру страницы, CSS за её внешний вид, а JS добавляет интерактивности.

Пример:

• Ты открыл файл index.html в браузере.
• Браузер считывает код HTML и видит, что нужно подключить CSS для стилей и JS для скриптов.
• Всё это скачивается и отображается тебе как страница.

Nginx в этом случае – просто курьер. Он берёт файлы с диска и отдаёт их клиенту.

Подготовка к настройке

Прежде чем мы начнем, тебе нужно:

• Убедиться, что Nginx установлен и работает (если нет, смотри первую статью).
• Создать папку для сайта и положить туда файлы.

mkdir -p /var/www/mysite  
cd /var/www/mysite  
echo "<h1>Hello, Nginx!</h1>" > index.html

Теперь у тебя есть папка /var/www/mysite с простым HTML-файлом.

Базовая настройка Nginx для статического сайта

Открой конфигурационный файл Nginx. Обычно он находится по адресу:

• На Linux: /etc/nginx/nginx.conf или /etc/nginx/sites-available/default.
• На Windows: в папке установки Nginx.

Создай новый блок server:

server {  
    listen 80;  # Слушаем порт 80 (HTTP)  
    server_name mysite.local;  # Имя сайта  

    root /var/www/mysite;  # Папка с файлами  
    index index.html;  # Главная страница  

    location / {  
        try_files $uri $uri/ =404;  # Если файл не найден, отдаём 404  
    }  
}

Что здесь происходит:

• listen 80 – говорит Nginx, что нужно слушать HTTP-запросы на порту 80.
• server_name mysite.local – доменное имя (замени его на свой).
• root /var/www/mysite – путь к файлам сайта.
• index index.html – файл, который открывается по умолчанию.
• try_files – проверка, существует ли запрашиваемый файл. Если нет, возвращается ошибка 404.

После внесения изменений перезапусти сервер:

sudo systemctl restart nginx

Теперь, если ты откроешь http://mysite.local в браузере, должен увидеть свой сайт!

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

Кэширование позволяет браузеру запоминать файлы (CSS, JS, изображения) и не загружать их каждый раз заново. Это ускоряет работу сайта и снижает нагрузку на сервер.

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf|webp|mp4)$ {  
    expires 30d;  # Кэшируем файлы на 30 дней  
    access_log off;  # Не пишем запросы в лог  
}

Разбор:

• location ~* – правило применяется ко всем файлам с указанным расширением.
• expires 30d – браузер кэширует файлы на 30 дней.
• access_log off – убираем ненужные записи из логов.

Включаем gzip-сжатие

Gzip – это способ сжать данные перед их отправкой клиенту. Это особенно полезно для больших файлов, таких как JS и CSS.

gzip on;  
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss;  
gzip_min_length 1024;  # Сжимаем файлы размером более 1 КБ  
gzip_vary on;

Что это значит:

• gzip on – включает сжатие.
• gzip_types – указывает типы файлов для сжатия.
• gzip_min_length – сжимать файлы больше 1 КБ.
• gzip_vary – добавляет заголовок Vary, указывая на сжатую версию файла.

Тестирование

Проверь, что всё работает, открыв сайт в браузере. Если добавил кэширование и gzip, используй инструменты разработчика (F12):

• Вкладка Network: увидеть загружаемые файлы и их статус сжатия.
• Попробуй обновить страницу без сброса кэша (Ctrl+R).

Задание для самостоятельной практики

• Настрой Nginx для обслуживания статического сайта.
• Добавь правила кэширования.
• Включи gzip и оцени разницу.

Теперь ты знаешь, как настроить Nginx для работы со статическим контентом! 🚀 В следующей статье разберем настройку обратного прокси-сервера.