Раздача HTML/CSS/JS
Тема дорожной карты · Nginx
Nginx отлично подходит для роли сервера статических файлов и широко используется для непосредственной отдачи ресурсов HTML, CSS и JavaScript из файловой системы с минимальной конфигурацией и исключительной производительностью. Базовая конфигурация статического сайта Nginx размещает файлы в директории вроде /var/www/html и использует директиву root внутри блока server, указывая Nginx на этот путь, совместно с index index.html, чтобы запросы к директориям разрешались в документ по умолчанию. Для одностраничных приложений (SPA), созданных на React, Vue или Angular, Nginx должен быть настроен с try_files $uri $uri/ /index.html внутри блока location /, чтобы клиентская маршрутизация работала корректно, возвращаясь к index.html для всех несовпадающих путей. Включение gzip on с соответствующими gzip_types для text/html, text/css и application/javascript совместно с долгосрочными заголовками Cache-Control резко снижает потребление трафика и ускоряет загрузку для повторно посещающих пользователей. Директивы sendfile on и open_file_cache в Nginx дополнительно ускоряют доставку HTML, CSS и JavaScript за счёт передачи файлов на уровне ядра и кэширования файловых дескрипторов в памяти.
Как это работает
Раздача HTML/CSS/JS — одна из сильных сторон nginx: раздача файлов с диска быстрее почти любого другого варианта. Директивы: root /path (префикс ФС для URI), index index.html, try_files $uri $uri/ =404 (SPA fallback-паттерн), sendfile on, tcp_nopush on, tcp_nodelay on. Cache-заголовки через expires 1y; + add_header Cache-Control "public, immutable". gzip_static on — для раздачи pre-compressed файлов.
Когда применять
Nginx — для статики (HTML, JS, CSS, картинки, шрифты) и fall-through на backend для /api/*. Дальний Cache-Control — на hash-версионированные ассеты (/static/app.a3f4b.js). try_files — для SPA-роутинга: любой неизвестный путь возвращает index.html. Всегда gzip on + gzip_types text/plain text/css application/javascript application/json; рассмотрите Brotli (brotli on) для современных клиентов.
Типичные ошибки
Ловушки Раздача HTML/CSS/JS: огромные файлы без sendfile on (медленно + высокий CPU); нет Cache-Control (браузеры fetch на каждый запрос); раздача несжатого текста (5× bandwidth-штраф); неверные MIME-типы для шрифтов (браузеры отказывают); долго закешированный HTML указывает на версионированный JS, удалённый при деплое (белая страница). Atomic deploy + Cache-Control: no-store на HTML.