Статичний сайт: від файлу до домену

Статичний сайт — це набір готових файлів: HTML, CSS, зображення, збірка фронтенду. Йому не потрібні ні PHP, ні база даних, тож він комфортно працює навіть на VDS-1 і витримує помітний трафік: до 500 Мбіт/с.

Куди покласти файли

Створіть окремий каталог для кожного сайту:

mkdir -p /var/www/example.ru
chown -R www-data:www-data /var/www/example.ru

Завантажуйте зі своєї локальної машини звичайним scp або rsync:

scp -r ./dist/* root@YOUR_ADDRESS:/var/www/example.ru/
rsync -avz --delete ./dist/ root@YOUR_ADDRESS:/var/www/example.ru/

rsync --delete видаляє на сервері файли, яких уже немає у збірці. Без нього старі JS-чанки накопичуються роками.

Роздача через вебсервер

Мінімальна конфігурація Nginx:

server {
    listen 80;
    server_name example.ru;
    root /var/www/example.ru;
    index index.html;

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

    location ~* \.(js|css|png|jpg|svg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

Рядок try_files ... /index.html потрібен для односторінкових застосунків на React, Vue і Svelte: без нього перехід одразу на /about повертає 404.

Далі — сертифікат Let's Encrypt, і сайт відкривається через HTTPS.

Домен

У панелі домену створіть A-запис, що вказує на публічну адресу машини (вкладка «Огляд» у /hosting/vds/m/<id>), і такий самий запис для www. Перевірте:

dig +short example.ru

Записи можуть поширюватися до кількох годин. Поки чекаєте, сайт доступний за адресою машини.

Оновлення без простою

Не завантажуйте файли поверх робочого каталогу — відвідувач може застати наполовину зібраний сайт. Збирайте поряд і перемикайте символьне посилання:

rsync -avz ./dist/ /var/www/releases/$(date +%s)/
ln -sfn /var/www/releases/1724400000 /var/www/example.ru-current
systemctl reload nginx

Тоді root у конфігурації вказує на /var/www/example.ru-current.

Типові помилки

Краще збирати фронтенд локально й завантажувати готовий dist. На VDS-1 з 2 ГБ пам'яті збірка великого проєкту може впасти через нестачу пам'яті.