Nginx: конфигурация для SPA с try_files

Категория: Nginx · Обновлено:

Для одностраничного приложения настройте Nginx так, чтобы существующие файлы отдавались напрямую, а остальные маршруты возвращали index.html. Директива try_files $uri $uri/ /index.html поддерживает клиентскую маршрутизацию и не подменяет реальные файлы приложения.

Конфигурация SPA и кэширование

Текст
server {
    listen 80;
    server_name example.com;
    root /usr/share/nginx/html;
    index index.html;

    location /api/ {
        proxy_pass http://127.0.0.1:8000;
    }
    location ~* \.(?:js|css|woff2|png|jpg|svg)$ {
        try_files $uri =404;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    location = /index.html {
        add_header Cache-Control "no-cache";
    }
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Скопируйте production-сборку в root. Для Vite это обычно каталог dist, а не исходный src. Хешированные JS/CSS можно кешировать надолго; HTML лучше отдавать с коротким сроком или revalidate, чтобы после релиза браузер получил свежие ссылки.

Запрос

Ожидаемое поведение

/assets/app-HASH.js

Отдать файл; если его нет — 404

/dashboard/settings

Вернуть index.html для роутера приложения

/api/items

Проксировать backend, а не возвращать SPA fallback

Как проверить deep link после релиза?

Запросите напрямую URL вложенного маршрута, например curl -I https://example.com/dashboard/settings. Он должен вернуть HTML-приложение, а отсутствующий файл в /assets/ — настоящий 404.

Почему обновление сайта не видно?

Проверьте кэширование index.html, CDN и совпадение файлов сборки. Хешированные ресурсы можно кешировать долго, если HTML не продолжает ссылаться на предыдущую версию.