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

За 30–60 минут вы разместите статический сайт на сервере с Ubuntu 24.04 LTS: загрузите файлы, настроите Nginx и проверите страницу в браузере. Это вариант для HTML, CSS, JavaScript и изображений — без приложения, которое нужно запускать отдельным процессом. Для сайта на WordPress или другом движке шаги будут отличаться.

Что понадобится до начала

• VPS с Ubuntu 24.04 LTS и публичным IPv4-адресом.
• SSH-доступ с правами sudo. Команды ниже выполняются на вашем компьютере, если не сказано иначе.
• Папка проекта с готовым файлом index.html.
• Домен — если хотите открывать сайт по имени. Для первой проверки можно использовать IP-адрес, но конфигурация ниже рассчитана на домен.

Дальше используется Nginx из репозитория Ubuntu. Версию пакета смотрите на сервере после установки: обновления безопасности могут менять номер сборки. Для файлового сайта достаточно стандартной конфигурации Nginx; команды подходят для Ubuntu 24.04 LTS.

Развёртывание по шагам

1. Подключитесь к серверу и установите обновления. На своём компьютере выполните ssh USER@SERVER_IP, подставив имя пользователя и IP. На сервере запустите:

   sudo apt update
   sudo apt upgrade -y

   Если обновление ядра попросит перезагрузку, сделайте её и подключитесь снова. Проверка: команда whoami выводит имя пользователя, а lsb_release -a показывает Ubuntu 24.04.
2. Установите Nginx и проверьте его статус.

   sudo apt install nginx -y
   sudo systemctl status nginx --no-pager
   nginx -v

   Проверка: в статусе сервиса указано active (running), а последняя команда выводит версию Nginx. Если сайт сразу не открывается по IP, проверьте, разрешён ли входящий трафик на порт 80 в панели хостинга.
3. Разрешите веб-трафик в системном брандмауэре, если используете UFW. Сначала добавьте SSH, чтобы не потерять подключение при включении брандмауэра:

   sudo ufw allow OpenSSH
   sudo ufw allow 'Nginx HTTP'
   sudo ufw enable
   sudo ufw status

   Проверка: в выводе есть правила для OpenSSH и Nginx HTTP. Если UFW уже настроен, не включайте его вслепую — сначала проверьте текущие правила. У некоторых хостингов есть отдельный сетевой брандмауэр: порт 80 нужно открыть и там.
4. Создайте каталог сайта. На сервере замените USER на имя SSH-пользователя:

   sudo mkdir -p /var/www/example.com
   sudo chown USER:USER /var/www/example.com

   Проверка: команда ls -ld /var/www/example.com показывает, что владельцем каталога стал ваш пользователь. Замените example.com на своё доменное имя и в следующих командах.
5. Загрузите файлы. Эту команду выполните в терминале на своём компьютере, из папки проекта. Замените значения в верхнем регистре на свои:

   rsync -avz --delete ./ USER@SERVER_IP:/var/www/example.com/

   Параметр --delete удаляет на сервере файлы, которых больше нет в локальной папке, поэтому убедитесь, что указали правильный каталог назначения. Проверка на сервере: ls -la /var/www/example.com показывает index.html и остальные файлы сайта.
6. Настройте виртуальный хост Nginx. На сервере создайте файл конфигурации:

   sudo nano /etc/nginx/sites-available/example.com

   Добавьте содержимое, заменив домен на свой:

   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;
       }
   }

   Сохраните файл, затем включите конфигурацию и проверьте синтаксис:

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

   Если команда ln сообщает, что файл уже существует, не создавайте вторую ссылку: проверьте текущую конфигурацию. Проверка: nginx -t завершается сообщением syntax is ok и test is successful.
7. Укажите домен на сервер и проверьте ответ. В панели регистратора или DNS-провайдера создайте A-запись для домена, указывающую на IP сервера. Для www добавьте отдельную A-запись или CNAME. Распространение изменений может занять время. На сервере проверьте ответ командой curl -I -H 'Host: example.com' http://127.0.0.1: ожидаемый результат — строка со статусом HTTP/1.1 200 OK. Затем откройте домен в браузере по HTTP.

Если вместо сайта ошибка

• 403 Forbidden: проверьте, что index.html лежит именно в каталоге, указанном в root, и что Nginx может читать файлы. Посмотрите владельца и права командой ls -la /var/www/example.com.
• 404 Not Found: убедитесь, что домен попал в нужную конфигурацию, а файл существует. Проверьте результат sudo nginx -T и имя в директиве server_name.
• Welcome to nginx: может открываться сайт из конфигурации по умолчанию. Проверьте, что символическая ссылка вашего сайта есть в /etc/nginx/sites-enabled/, а запрос приходит с нужным доменом.
• Connection timed out: проверьте IP, DNS и правила входящего трафика на порту 80 — как в UFW, так и в панели VPS. Сам Nginx не сможет принять соединение, если трафик блокирует сеть.
• nginx: [emerg] ...: не перезагружайте конфигурацию наугад. Выполните sudo nginx -t, найдите указанный файл и строку, исправьте ошибку и повторите проверку.

Успешный деплой — не только файлы на сервере. Проверьте путь от браузера до нужного виртуального хоста: DNS, сетевые правила и конфигурацию Nginx.

Виртуальный хост — конфигурация Nginx, которая связывает доменное имя с каталогом сайта и правилами обработки запросов. На одном сервере можно разместить несколько сайтов с разными доменами.

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

Откройте главную страницу и несколько внутренних адресов. Если внутренние страницы сайта — это маршруты одностраничного приложения, правило try_files нужно настроить отдельно: сейчас Nginx вернёт 404 для пути, которому не соответствует файл. Сборку проекта и публикацию её содержимого тоже выполняйте отдельно — на сервер загружайте готовые статические файлы, а не исходники, если сайт требует сборки.

Здесь настроен только HTTP. Перед передачей домена посетителям добавьте HTTPS по официальной инструкции Certbot для Nginx и Ubuntu, затем проверьте продление сертификата. После этого настройте резервную копию файлов и следите за свободным местом на диске и доступностью сайта. Деплой динамического приложения и настройка HTTPS — отдельные темы.