Как настроить Nginx для frontend-проекта

Суть. root, try_files, proxy API.

Суть

Nginx для SPA: root на dist, try_files на index.html, кеш для assets с hash, gzip, прокси /api на backend.

Ниже — практика без лишней теории: что делаю в реальных проектах (лендинги, визитки, MVP).

SPA fallback

try_files $uri $uri/ /index.html;

Кеш

Именованные чанки — Cache-Control: immutable.

Безопасность

TLS 1.2+, HSTS после проверки HTTPS.

server {
  listen 443 ssl http2;
  server_name dev-solo.ru;
  root /var/www/dev-solo/dist;
  location / {
    try_files $uri $uri/ /index.html;
  }
  location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
}

location /api/ {
  proxy_pass http://127.0.0.1:3001/;
  proxy_set_header Host $host;
}

gzip on;
gzip_types text/css application/javascript application/json;

Статья про как настроить nginx для frontend-проекта — для тех, кто деплоит свой фронт или ведёт pet-проект на VPS. Я собираю типовой путь, который повторяю на коммерческих лендингах и MVP.

Типовой порядок работ

1. Собрать production-билд фронта (npm run build) и проверить локально через preview.
2. Настроить VPS: пользователь, firewall, SSH-ключи, обновления ОС.
3. Поставить Nginx/Caddy, отдать статику из dist/, настроить gzip/brotli и кэш.
4. Подключить домен, DNS, SSL (Let's Encrypt / Certbot).
5. Добавить мониторинг: логи, алерт при падении, бэкап конфигов.

Для Node-бэкенда отдельно — process manager (PM2/systemd) и reverse proxy, а не открытый порт наружу.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

Когда имеет смысл привлечь разработчика

Если нужен не шаблон, а связка дизайна, скорости, интеграций и сопровождения — проще обсудить задачу один раз, чем чинить конструктор полгода. Я беру лендинги, визитки и MVP под ключ; ориентиры по срокам и бюджету — на странице цен.

Читать дальше

• Core Web Vitals — метрики скорости
• Vite вместо CRA — стек сборки
• Услуги — разработка под задачу

Короткие ответы на частые вопросы

Это подойдёт моему бизнесу? Если вам нужен понятный сайт с заявкой или звонком — да; если десятки кабинетов и сложная логика — обсудим отдельный объём.

Что подготовить до старта? Тексты или тезисы, логотип, примеры конкурентов, доступы к домену и хостингу (если уже есть).

Как оценить результат? Скорость на мобилке, ясный CTA, отсутствие «битых» блоков и совпадение страницы с рекламой/поисковым запросом.

Итог по теме «Как настроить Nginx для frontend-проекта»

Сфокусируйтесь на сценарии пользователя, а не на количестве фич. Остальное — вопрос исполнения и дисциплины в проекте. Готов помочь с оценкой — контакты или Telegram из кнопки ниже.