Статический сайт и SPA на VPS: раздача через nginx

Статический сайт или собранное SPA (React, Vue, Svelte) — это просто набор файлов, и nginx раздаёт их молниеносно. Разберём деплой, правильный конфиг с fallback на index.html, кэш, сжатие и SSL. Никакого лишнего софта — только nginx.

Ставим nginx и кладём файлы

Для статики не нужны ни PHP, ни база — только веб-сервер. Ставим nginx и создаём каталог сайта.

apt update && apt install nginx -y
systemctl enable --now nginx
mkdir -p /var/www/mysite
chown -R www-data:www-data /var/www/mysite

Собранные файлы SPA (папка dist или build) заливаем на сервер с локальной машины через rsync:

rsync -avz ./dist/ root@YOUR_SERVER_IP:/var/www/mysite/

Статику nginx отдаёт напрямую из памяти файловой системы — на NVMe у MAATRIX это буквально микросекунды, сайт открывается мгновенно даже на младшем плане.

Конфиг для простого статического сайта

Для обычного сайта (HTML, CSS, JS без роутинга) конфиг минимален. Создаём /etc/nginx/sites-available/mysite:

server {
    listen 80;
    server_name ваш-домен.ru;
    root /var/www/mysite;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

Конфиг для SPA с клиентским роутингом

У React/Vue/Angular роутинг живёт в браузере, поэтому все несуществующие пути надо отдавать на index.html, иначе при обновлении страницы будет 404. Ключевая директива — fallback в try_files:

server {
    listen 80;
    server_name ваш-домен.ru;
    root /var/www/mysite;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Хэшированные файлы сборки (main.abc123.js) можно кэшировать на год — при новой сборке имя меняется, и браузер сам подтянет свежую версию.

Сжатие и HTTP/2

Статика прекрасно жмётся. Включаем gzip в блоке http файла /etc/nginx/nginx.conf:

gzip on;
gzip_comp_level 6;
gzip_min_length 256;
gzip_types text/css application/javascript application/json image/svg+xml;

После выпуска SSL добавляем http2 в listen — для SPA с множеством мелких чанков это ощутимо ускоряет загрузку:

listen 443 ssl http2;

SSL и автодеплой

Бесплатный сертификат в две команды:

apt install certbot python3-certbot-nginx -y
certbot --nginx -d ваш-домен.ru

Деплой удобно свести к одной строке — соберите проект локально и синхронизируйте с сервером, удаляя старые файлы:

npm run build && rsync -avz --delete ./dist/ root@YOUR_SERVER_IP:/var/www/mysite/

• Флаг --delete чистит удалённые файлы, чтобы не копился мусор от прошлых сборок.
• Один VPS на MAATRIX спокойно раздаёт десятки статических сайтов на разных доменах — по server-блоку на каждый.

Проксирование API и заголовки безопасности

Часто SPA обращается к своему backend по пути /api. Держать фронт и API на одном домене удобно — нет проблем с CORS. Добавляем проксирование в тот же server-блок:

location /api/ {
    proxy_pass http://127.0.0.1:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

Так статику отдаёт nginx напрямую, а запросы к API уходят на локальное приложение — всё под одним доменом и одним сертификатом.

Даже для статики стоит выставить базовые заголовки безопасности — они дёшевы и закрывают частые уязвимости:

add_header X-Frame-Options "SAMEORIGIN";
add_header X-Content-Type-Options "nosniff";
add_header Referrer-Policy "strict-origin-when-cross-origin";

nginx -t && systemctl reload nginx

Проверить итог удобно через заголовки ответа: curl -I https://ваш-домен.ru/ должен показать HTTP/2, сжатие и добавленные заголовки. Такой сетап — статика на nginx, проксируемый API и заголовки безопасности — даёт быстрый и защищённый сайт на одном недорогом VPS MAATRIX с оплатой из России.

Частые вопросы