Первый деплой сайта на сервер: пошаговая инструкция

За 30–60 минут вы разместите статический сайт на VPS с Ubuntu Server 24.04 LTS, настроите Nginx и подключите HTTPS. Если DNS ещё не обновился или сборка сайта занимает время, деплой может растянуться. Ниже — маршрут от домена до проверенной страницы в браузере; он подходит для готовых HTML-файлов, но не настраивает серверное приложение вроде Node.js или PHP.

Что подготовить до начала

Нужен сервер с Ubuntu Server 24.04 LTS, публичным IPv4-адресом, SSH-доступом и учётной записью с правами sudo. Подготовьте домен, доступ к его DNS-настройкам и каталог со статической сборкой: например, dist/, внутри которого лежит index.html. На своём компьютере установите SSH-клиент и rsync. Команды ниже выполняйте в терминале, если не указано иное.

В примерах замените USER на имя пользователя на сервере, SERVER_IP — на его IP-адрес, а example.com — на свой домен. Не копируйте команды с этими обозначениями, не заменив их.

А-запись — запись DNS, которая связывает доменное имя с IPv4-адресом. Для IPv6 используют AAAA-запись. Если у домена осталась AAAA-запись на другой сервер, часть посетителей может попадать не туда.

Деплой по шагам

1. Направьте домен на сервер. В панели регистратора или DNS-провайдера создайте А-записи для корневого домена и, если нужен, поддомена www. В обеих укажите IPv4 сервера. Если вы не настраивали IPv6, проверьте, что у домена нет устаревшей AAAA-записи. DNS обновляется не мгновенно: срок зависит от настроек провайдера и кэша резолверов. Проверка: на своём компьютере выполните getent ahostsv4 example.com и убедитесь, что среди результатов есть IP вашего сервера. Для www.example.com проверьте отдельно.

2. Установите Nginx и откройте веб-порты. Подключитесь по SSH и установите пакеты. Затем включите веб-сервер:

   ssh USER@SERVER_IP
   sudo apt update
   sudo apt install nginx rsync
   sudo systemctl enable --now nginx

   В панели VPS разрешите входящие подключения к TCP-портам 80 и 443. Если на сервере включён UFW, сначала разрешите SSH, затем веб-трафик:

   sudo ufw allow OpenSSH
   sudo ufw allow 'Nginx Full'
   sudo ufw enable

   Не включайте UFW, пока не проверите, что правило OpenSSH добавлено: иначе можно потерять удалённый доступ. Проверка: откройте http://SERVER_IP в браузере. Страница приветствия Nginx означает, что сервер отвечает по HTTP.

3. Загрузите готовую сборку. На своём компьютере перейдите в каталог проекта, где находится dist/, и запустите:

   rsync -av --delete ./dist/ USER@SERVER_IP:/tmp/site/

   Параметр --delete удаляет из папки назначения файлы, которых больше нет в сборке. Здесь это временный каталог, поэтому не меняйте путь назначения на каталог с пользовательскими данными. На сервере перенесите файлы в отдельную директорию сайта:

   sudo install -d -o root -g www-data -m 755 /var/www/example.com
   sudo rsync -rlt --delete /tmp/site/ /var/www/example.com/
   sudo chown -R root:www-data /var/www/example.com
   sudo find /var/www/example.com -type d -exec chmod 755 {} +

   Папки с правами 755 доступны для чтения веб-серверу; далее Nginx сможет отдавать файлы, если они также доступны на чтение. Проверка: выполните ls -l /var/www/example.com/index.html. Файл должен существовать и иметь права на чтение.

4. Опишите сайт для Nginx. На сервере создайте конфигурацию командой ниже. В server_name укажите свои домены:

   sudo tee /etc/nginx/sites-available/example.com > /dev/null <<'EOF'
   server {
       listen 80;
       listen [::]:80;
       server_name example.com www.example.com;
   
       root /var/www/example.com;
       index index.html;
   
       location / {
           try_files $uri $uri/ =404;
       }
   }
   EOF

   Включите конфигурацию, отключите стандартный сайт и проверьте синтаксис перед перезагрузкой:

   sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com
   sudo unlink /etc/nginx/sites-enabled/default
   sudo nginx -t
   sudo systemctl reload nginx

   Если стандартная конфигурация уже отключена, команда unlink сообщит, что файл не найден; в этом случае пропустите её. Проверка: nginx -t должен завершиться сообщением о том, что проверка синтаксиса прошла успешно. Затем откройте домен по HTTP — должна загрузиться ваша страница.

5. Подключите HTTPS. Убедитесь, что домен уже ведёт на этот сервер и порт 80 доступен извне. Установите Certbot и модуль для Nginx, затем запросите сертификат:

   sudo apt install certbot python3-certbot-nginx
   sudo certbot --nginx -d example.com -d www.example.com

   Certbot попросит указать адрес электронной почты, принять условия и выбрать поведение для HTTP. Выберите перенаправление на HTTPS, если оно предлагается. Проверка: откройте https://example.com. После выдачи сертификата запустите тест автоматического продления:

   sudo certbot renew --dry-run

   Если вы не используете поддомен www, удалите его из конфигурации Nginx и из команды Certbot. Запрашивайте сертификат только для имён, которые уже направлены на этот сервер.

Первый деплой считается завершённым не тогда, когда файлы оказались на сервере, а когда ваш домен открывает нужную версию сайта по HTTPS и Nginx может читать все файлы без расширенных прав.

Если страница не открывается

• В браузере — «Не удается получить доступ к сайту» или тайм-аут. Проверьте IP домена и правила файрвола у хостера. Для HTTPS должен быть открыт порт 443, для первоначальной проверки Certbot — порт 80.

• В браузере — «403 Forbidden». Nginx не может прочитать файл или открыть один из каталогов пути. Проверьте наличие index.html и права командой namei -l /var/www/example.com/index.html. Не исправляйте проблему выдачей прав на запись всем пользователям: сайту обычно достаточно чтения.

• В браузере — «404 Not Found». Проверьте, что файлы сборки попали именно в /var/www/example.com, а не вложились в дополнительную папку вроде /var/www/example.com/dist. Проверьте также корень сайта в конфигурации и перезагрузите Nginx после изменений.

• Появилась стандартная страница Nginx. Обычно запрос попал в стандартный виртуальный хост или домен не совпадает с server_name. Проверьте ссылку в /etc/nginx/sites-enabled/, доменное имя в конфигурации и результат команды sudo nginx -t.

• Certbot сообщает, что проверка домена не прошла. Убедитесь, что DNS уже указывает на нужный IP и порт 80 доступен из интернета. Если только что меняли DNS, подождите обновления записей и повторите запрос.

Если сборка — одностраничное приложение, прямое открытие вложенного маршрута, например /about, может вернуть 404: приведённая конфигурация ищет реальный файл. Настройка перехода для маршрутов SPA зависит от приложения; не меняйте обработку всех запросов, если сайт должен отдавать 404 для отсутствующих страниц.

Что сделать после первого запуска

Сохраните конфигурацию Nginx и команды деплоя в документации проекта, но не записывайте туда пароли или приватные ключи. Перед следующим обновлением проверьте, что локальная сборка содержит нужную версию сайта, и только потом запускайте синхронизацию с --delete. После деплоя проверьте главную страницу, несколько внутренних ссылок и форму, если она есть. В проде следите за доступностью сайта, свободным местом на диске и сроком действия сертификата. Если сайт динамический или получает данные из API, настройка этого процесса — отдельный этап: описанная схема раздаёт только статические файлы.