MAATRIX / Блог / Статический сайт и SPA на VPS: раздача через nginx

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

Блог MAATRIX · 2026-07-07

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

Содержание

  1. Ставим nginx и кладём файлы
  2. Конфиг для простого статического сайта
  3. Конфиг для SPA с клиентским роутингом
  4. Сжатие и HTTP/2
  5. SSL и автодеплой
  6. Проксирование API и заголовки безопасности

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

['Для статики не нужны ни PHP, ни база — только веб-сервер. Ставим nginx и создаём каталог сайта.', '
apt update && apt install nginx -y\nsystemctl enable --now nginx\nmkdir -p /var/www/mysite\nchown -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 это буквально микросекунды, сайт открывается мгновенно даже на младшем плане.']

Нужен сервер под эту задачу?

Разверните VPS MAATRIX за пару минут: NVMe, AMD EPYC, root-доступ, локации UK и США. Оплата картой РФ и по СБП.

Арендовать VPS для статического сайта

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

['Для обычного сайта (HTML, CSS, JS без роутинга) конфиг минимален. Создаём /etc/nginx/sites-available/mysite:', '
server {\n    listen 80;\n    server_name ваш-домен.ru;\n    root /var/www/mysite;\n    index index.html;\n\n    location / {\n        try_files $uri $uri/ =404;\n    }\n}
', '
ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/\nnginx -t && systemctl reload nginx
']

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

['У React/Vue/Angular роутинг живёт в браузере, поэтому все несуществующие пути надо отдавать на index.html, иначе при обновлении страницы будет 404. Ключевая директива — fallback в try_files:', '
server {\n    listen 80;\n    server_name ваш-домен.ru;\n    root /var/www/mysite;\n    index index.html;\n\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n\n    location /assets/ {\n        expires 1y;\n        add_header Cache-Control "public, immutable";\n    }\n}
', 'Хэшированные файлы сборки (main.abc123.js) можно кэшировать на год — при новой сборке имя меняется, и браузер сам подтянет свежую версию.']

Сжатие и HTTP/2

['Статика прекрасно жмётся. Включаем gzip в блоке http файла /etc/nginx/nginx.conf:', '
gzip on;\ngzip_comp_level 6;\ngzip_min_length 256;\ngzip_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\ncertbot --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/ {\n    proxy_pass http://127.0.0.1:3000/;\n    proxy_set_header Host $host;\n    proxy_set_header X-Real-IP $remote_addr;\n}
', 'Так статику отдаёт nginx напрямую, а запросы к API уходят на локальное приложение — всё под одним доменом и одним сертификатом.', 'Даже для статики стоит выставить базовые заголовки безопасности — они дёшевы и закрывают частые уязвимости:', '
add_header X-Frame-Options "SAMEORIGIN";\nadd_header X-Content-Type-Options "nosniff";\nadd_header Referrer-Policy "strict-origin-when-cross-origin";
', '
nginx -t && systemctl reload nginx
', 'Проверить итог удобно через заголовки ответа: curl -I https://ваш-домен.ru/ должен показать HTTP/2, сжатие и добавленные заголовки. Такой сетап — статика на nginx, проксируемый API и заголовки безопасности — даёт быстрый и защищённый сайт на одном недорогом VPS MAATRIX с оплатой из России.']

Нужен сервер под эту задачу?

Разверните VPS MAATRIX за пару минут: NVMe, AMD EPYC, root-доступ, локации UK и США. Оплата картой РФ и по СБП.

Арендовать VPS для статического сайта

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

Зачем VPS, если есть бесплатный хостинг статики?

VPS даёт полный контроль: свой SSL, свои заголовки, отсутствие лимитов на трафик и запросы, любые редиректы и проксирование API на том же сервере. И зарубежная локация с оплатой из РФ.

Почему SPA даёт 404 при обновлении страницы?

Потому что nginx ищет физический файл по URL роута, которого нет. Директива try_files с fallback на /index.html решает это — весь роутинг отдаётся приложению.

Можно ли раздавать несколько сайтов с одного VPS?

Да, создайте отдельный server-блок с своим server_name и root для каждого домена. Даже младший план MAATRIX справится с десятком лёгких статических сайтов.

Читайте также