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

Что вы получите и что понадобится

За 30–45 минут вы развернёте статический сайт на сервере с Ubuntu 24.04 LTS: Nginx будет отдавать файлы по HTTP, а вы проверите страницу в браузере. Это первый запуск без сборщика, базы данных и HTTPS; для рабочего сайта после проверки нужно настроить TLS.

Понадобятся сервер с Ubuntu 24.04, доступ по SSH с правами sudo, локальная папка с готовыми файлами сайта и публичный IPv4-адрес сервера. Если хотите открывать сайт по домену, добавьте доступ к DNS и домену. Команды ниже рассчитаны на статические файлы: например, HTML, CSS, изображения и JavaScript без серверного приложения.

Сначала подключитесь к серверу. На своём компьютере выполните команду, заменив адрес на IP сервера:

ssh USER@SERVER_IP

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

Пошаговый деплой

1. Установите Nginx. На сервере обновите список пакетов и установите веб-сервер:

   sudo apt update
   sudo apt install nginx

   Проверка: команда systemctl is-active nginx выводит active. Если система спросит подтверждение установки, согласитесь.
2. Разрешите входящие подключения. В панели облачного провайдера откройте входящий TCP-порт 80 для публичного трафика. Если на сервере включён UFW, сначала проверьте его статус командой sudo ufw status. При активном UFW разрешите профиль Nginx командой sudo ufw allow 'Nginx HTTP'. Не включайте файрвол удалённой командой, пока не убедились, что SSH тоже разрешён: иначе можно потерять доступ к серверу. Проверка: Nginx отвечает локально командой curl -I http://127.0.0.1, а порт 80 открыт у провайдера.
3. Загрузите файлы сайта. На сервере создайте каталог и назначьте владельцем текущего пользователя:

sudo mkdir -p /var/www/first-site
sudo chown "$USER":"$USER" /var/www/first-site

На своём компьютере, в другом окне терминала, перейдите в каталог сайта и скопируйте его содержимое. Укажите реальный путь к папке вместо ./dist/, если ваши файлы лежат в другом месте:

scp -r ./dist/. USER@SERVER_IP:/var/www/first-site/

Для сайта без этапа сборки укажите папку, где лежит index.html, вместо ./dist/. Проверка на сервере: ls -l /var/www/first-site показывает index.html и остальные файлы. Если команда копирования не находит папку, проверьте путь на своём компьютере.

sudo nano /etc/nginx/sites-available/first-site

Вставьте конфигурацию. Для сайта по IP оставьте server_name _;; для домена замените подчёркивание на своё имя, например www.example.com example.com.

server {
    listen 80;
    server_name _;

    root /var/www/first-site;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Сохраните файл: в Nano нажмите Ctrl+O, Enter, затем Ctrl+X. Включите сайт и проверьте конфигурацию:

sudo ln -s /etc/nginx/sites-available/first-site /etc/nginx/sites-enabled/first-site
sudo nginx -t

Если ссылка уже существует, не создавайте её повторно: проверьте, куда она ведёт, командой ls -l /etc/nginx/sites-enabled/. Проверка шага: nginx -t сообщает, что проверка синтаксиса прошла успешно. Если видите ошибку, не перезагружайте Nginx — сначала исправьте указанный файл и строку.

sudo rm -f /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl reload nginx

Проверка: команда curl -I http://127.0.0.1 возвращает ответ HTTP, а systemctl is-active nginx — active. Откройте http://SERVER_IP в браузере: должна появиться ваша страница. Если адрес не открывается, переходите к проверкам ниже, а не меняйте конфигурацию наугад.

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

Сначала выясните, где именно пропал запрос: на сервере, в Nginx, в файлах или между сервером и браузером. Сообщение в браузере само по себе редко указывает на одну точную причину.

• В браузере тайм-аут или «не удаётся установить соединение». Проверьте публичный IP, правило TCP-порта 80 в панели провайдера и статус Nginx. Если локальный curl -I http://127.0.0.1 работает, а извне нет, проблема часто в сетевом правиле или файрволе.
• Ответ 403 Forbidden. Nginx, вероятно, не может прочитать файлы или в корне нет доступной стартовой страницы. Проверьте ls -l /var/www/first-site и наличие index.html. Не исправляйте проблему командой chmod -R 777: она выдаёт лишние права. Проверьте владельца и права каталогов, включая родительские.
• Ответ 404 Not Found. Посмотрите значение root в конфигурации и убедитесь, что файл лежит именно в указанном каталоге. Частая ошибка — скопировать папку целиком и получить вложенный путь вроде /var/www/first-site/dist/index.html, хотя Nginx ищет /var/www/first-site/index.html.
• Появляется стартовая страница Nginx. Обычно запрос попадает в конфигурацию сайта по умолчанию либо запросили не тот IP или домен. Проверьте ссылки в /etc/nginx/sites-enabled/, директиву server_name и результат команды sudo nginx -T.
• nginx -t сообщает об ошибке. Проверьте синтаксис, закрывающие фигурные скобки и путь в сообщении. Не делайте reload, пока команда не завершится успешно: так вы не замените работающую конфигурацию заведомо сломанной.

Чтобы увидеть детали, откройте журнал ошибок Nginx командой sudo tail -n 50 /var/log/nginx/error.log. Для проверки доступа к файлам полезно также посмотреть, под каким пользователем работает Nginx: ps -eo user,comm | grep nginx.

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

После проверки: домен и HTTPS

Когда страница доступна по IP, настройте DNS-запись домена на этот адрес и укажите домен в server_name. Затем настройте HTTPS по документации выбранного центра сертификации или хостинга. Не передавайте пароли и данные форм по обычному HTTP: на этом шаге сайт ещё не защищён шифрованием. Если у проекта есть серверная часть, отдельные инструкции нужны для запуска приложения, проксирования запросов и обновлений без простоя — этот разбор ограничен статическими файлами.

На будущее сохраните конфигурацию Nginx и команду проверки sudo nginx -t в заметках проекта. После каждого изменения сначала проверяйте синтаксис, затем применяйте настройки. Это проще, чем искать причину сбоя уже после того, как сайт перестал отвечать.

Термин

Корень сайта¹ — каталог, из которого веб-сервер отдаёт файлы. В этой конфигурации это /var/www/first-site; если указать другой путь, Nginx будет искать страницу в другом месте.

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

После первого успешного запроса настройте домен и HTTPS, а затем проверьте сайт по обоим адресам — с www и без него, если используете оба. При обновлении файлов повторяйте загрузку в тот же каталог и проверяйте страницу в браузере. Для диагностики держите под рукой журнал ошибок Nginx и измеряйте не только доступность главной страницы, но и загрузку нужных изображений и CSS.