Хостинг и деплой — как выложить сайт в интернет

1. Что значит «разместить сайт»

Сайт — это файлы и (часто) программы, которые должны круглосуточно отвечать на запросы. С личного компьютера это невозможно: нужно место в центре обработки данных — хостинг. Процесс загрузки сайта на сервер называется деплоем.

# два базовых сценария
статический сайт    → отдаём готовые HTML/CSS/JS как файлы
динамический сайт   → запускаем приложение (Flask, Node.js, Django),
                      которое собирает HTML в момент запроса

2. Типы хостинга

Хостинги отличаются гибкостью и ценой. Новичку часто хватает виртуального или статического хостинга, профессионал арендует полноценный сервер.

3. Домен и его регистрация

Домен — арендуемое имя в интернете. Аренда оформляется на год у регистратора: в РФ это, например, REG.RU, в мире — Namecheap или Cloudflare. Имя стоит выбирать короткое и запоминающееся, без дефисов и съехавших букв.

# проверить, свободен ли домен, и посмотреть владельца
whois example.ru

# типовой состав имени
www.example.ru
 ↑    ↑      ↑
 поддомен  домен  зона (.ru, .com, .site)

4. DNS-записи: A, CNAME, MX

Купив домен, его надо «привязать» к серверу. Делается это в панели регистратора или провайдера через DNS-записи.

# типовой набор записей для сайта example.ru
example.ru        A     → 185.199.108.153   # IP сервера
www.example.ru    CNAME → example.ru         # алиас
example.ru        MX    → mail.example.ru    # почта
example.ru        TXT   → "v=spf1 …"         # проверки почты

5. GitHub Pages — бесплатная статика

GitHub Pages — бесплатный статический хостинг из репозитория. Проект получает адрес вида username.github.io/repo и обновляется по вашей команде.

# быстрый способ опубликовать ветку
git init
git add .
git commit -m "первый деплой"
git branch -M main
git remote add origin https://github.com/user/repo.git
git push -u origin main

# далее: Settings → Pages → Deploy from a branch → main

6. Netlify — деплой из репозитория и не только

Netlify отлично подходит для статических сайтов и SPA: можно загрузить папку перетаскиванием или подключить GitHub-репозиторий. HTTPS, бранч-превью и перенаправления идут в комплекте.

# установка CLI и быстрый деплой из папки
npm install -g netlify-cli
netlify deploy --prod --dir=public

# полезная команда — добавить свой домен
netlify display-user

• каждый push автоматически собирает сайт заново;
• каждая ветка получает своё превью-URL для проверки;
• есть формы, функции и редиректы через _redirects.

7. Vercel — деплой за минуту

Vercel — платформа от создателей Next.js. Деплой можно получить без терминала: подключить репозиторий и нажать Deploy. Поддерживаются фронтенд-фреймворки и бессерверные функции.

# CLI-вариант
npm install -g vercel
vercel            # превью
vercel --prod     # в продакшен

# конфиг функции (сейчас – на Vercel)
{
  "builds": [{ "src": "api/index.js", "use": "@vercel/node" }]
}

8. Nginx: server и location

Когда сайт размещается на VPS, перед приложением обычно ставят Nginx — веб-сервер и реверс-прокси. Он отдаёт статику быстро, а динамические запросы передаёт вашему приложению.

# /etc/nginx/sites-available/example.ru
server {
    listen 80;
    server_name example.ru www.example.ru;

    root /var/www/example;
    index index.html;

    # статика — сам Nginx
    location /assets/ {
        expires 30d;
    }

    # остальное — приложению на порту 8000
    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
    }
}

# включить сайт и перечитать конфиг
ln -s /etc/nginx/sites-available/example.ru /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

9. HTTPS через Let's Encrypt

Браузеры помечают сайты без HTTPS как небезопасные. Бесплатный сертификат выдаёт Let's Encrypt, а ставит его утилита certbot.

# установка certbot (Debian/Ubuntu)
sudo apt install certbot python3-certbot-nginx

# автоматически правит конфиг Nginx
sudo certbot --nginx -d example.ru -d www.example.ru

# продление раз в 60 дней — встроенный таймер
sudo certbot renew --dry-run

• сертификат выдаётся бесплатно на 90 дней и продлевается автоматически;
• certbot сам добавляет блок listen 443 ssl; и редирект с HTTP;
• после установки проверьте замочек в браузере и страницу /wp-*-маршрутов не забываем редиректить.

10. CI/CD и автоматический деплой

CI/CD — Continuous Integration / Continuous Deployment: код попадает в продакшен автоматически после каждого push в основную ветку. Так исключается «а у меня на компьютере работает».

# .github/workflows/deploy.yml (GitHub Actions)
name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

11. Shared-хостинг и панели управления

Для новичка, который не хочет возиться с сервером, часто хватает shared-хостинга: сайт лежит в общей папке, а домен, почту и базу настраивают в панели. Самые распространённые панели — cPanel, ISPmanager и DirectAdmin.

• файлы загружаются по FTP или через файловый менеджер панели;
• база данных создаётся в разделе MySQL за несколько кликов;
• домены и поддомены добавляются в разделе Domains;
• сертификат Let's Encrypt включается в один клик.

# подключение по FTP из терминала
ftp ftp.example.ru
put index.html
exit

12. Перенос сайта между хостингами

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

1. разверни сайт на новом хостинге полностью и проверь по временному адресу;
2. перенеси базу данных через экспорт/импорт SQL или mysqldump;
3. скопируй файлы архивом (zip/tar) или по rsync;
4. заранее снизь TTL DNS-записей до минимума;
5. после проверки смени A-записи и дождись обновления DNS;
6. проверь почту, SSL и cron-задачи на новом месте.

mysqldump -u user -p dbname > db.sql
tar -czf site.tgz /var/www/example
scp site.tgz db.sql user@new-server:/tmp/

13. Резервное копирование

Бэкап спасает от случайного удаления, взлома и сгоревшего диска. Правило простое: файлы + база данных + конфигурация, хранящиеся в другом месте.

• web-раздел — архивом файлов с датой в имени;
• база данных — дампом SQL хотя бы раз в сутки;
• почта и DNS — на стороне регистратора/провайдера;
• готовые копии храни в облаке или на втором сервере.

# ежедневный дамп базы из cron
0 3 * * * mysqldump -u backup --all-databases \
  | gzip > /backup/db-$(date +\%F).sql.gz

14. Мониторинг доступности

Даже идеально настроенный сайт может лечь ночью. Внешние сервисы проверяют сайт с разных точек мира и присылают алерты при недоступности.

# простая проверка из планировщика
curl -sf https://example.ru/health \
  || echo "Сайт недоступен" | mail -s "ALERT" admin@example.ru

15. Облачный VPS: выбор и базовая настройка

Когда сайт перерастает shared-хостинг, пора переходить на VPS (Virtual Private Server). Вы получаете root-доступ, свой стек и полный контроль, но обязаны сами отвечать за обновления и безопасность.

# первый вход на сервер
ssh root@185.104.117.2
apt update && apt upgrade -y

Популярные провайдеры VPS — DigitalOcean, Hetzner, Contabo; они дают SSD, фиксированный IP и снапшоты. Для минимального проекта хватит 1 vCPU и 1–2 ГБ RAM.

16. Несколько сайтов на одном сервере

На одном VPS можно держать десяток сайтов — для этого в Nginx создают отдельные server блоки на каждый домен.

# /etc/nginx/sites-available/site1.conf
server {
    server_name site1.ru www.site1.ru;
    root /var/www/site1;
    index index.html;
}

ln -s /etc/nginx/sites-available/site1.conf /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

Процесс:

• папка проекта — /var/www/имясайта;
• файл конфига — в sites-available, симлинк — в sites-enabled;
• отдельный блок на каждый домен или поддомен.

17. Как выбрать тариф: чек-лист

Тарифы разбросаны от 0 до тысяч рублей. Чтобы не переплачивать, оценивайте не цену, а то, что реально нужно сайту.

# тест скорости ответа перед покупкой
curl -o /dev/null -w "code:%{http_code} time:%{time_total}s\n" https://site.ru

18. Безопасность сервера: обновления и файрвол

Публичный VPS атакуют автоматические скрипты каждые минуты. Базовый уровень защиты — обновления, файрвол и ssh-политика.

• обновляйте систему еженедельно: apt upgrade закрывает уязвимости;
• файрвол: открыт только 80, 443 и 22 (UFW или iptables);
• SSH: ключи вместо пароля, изменение порта — по желанию;
• fail2ban банит IP после серии неудачных попыток входа.

sudo ufw allow 22,80,443/tcp
sudo ufw enable
sudo apt install fail2ban -y

19. CDN: Cloudflare и глобальная доставка контента

CDN — это распределённая сеть кэширующих серверов. Копии сайта живут на узлах по всему миру, и посетитель получает ответ с ближайшего — скорость растёт, нагрузка на источник падает.

• статику (изображения, CSS, JS) достаточно кэшировать на границе сети;
• динамику — проксировать на origin, но включать edge-кэш для редких ответов;
• Cloudflare дополнительно даёт бесплатный HTTPS, WAF и защиту от DDoS.

# заголовки, влияющие на кэш CDN
Cache-Control: public, max-age=86400   # статика
Cache-Control: no-cache                # HTML и API

20. Объектное хранилище S3 и статический сайт

Amazon S3 и совместимые сервисы (Yandex Object Storage, O2Cloud, Wasabi) хранят сайт как набор файлов и раздают их с высокой доступностью и почти неограниченной ёмкостью.

# AWS CLI: синхронизация собранного фронтенда
aws s3 sync ./dist s3://my-site --delete
aws s3 website s3://my-site \
  --index-document index.html
# затем — bucket policy на чтение

• дёшево для статики: платите за объём и трафик, а не за сервер;
• versioning и object lock защищают от случайного удаления;
• популярная схема: фронтенд в S3, API на VPS рядом с базой.

21. Логи и анализ трафика: Nginx access log

Логи веб-сервера — первое, что смотрит инженер при проблемах: кто приходил, что отдавалось и что падало. Правильно настроенный лог — половина диагностики.

log_format main '$remote_addr $status $request_time '
                '$http_user_agent';
access_log /var/log/nginx/access.log main;

# популярные коды и медленные запросы
awk '{print $2}' access.log | sort | uniq -c | sort -rn | head
grep ' 500 ' access.log | tail -20

• $request_time — скорость ответа, первые кандидаты на оптимизацию;
• по 4xx/5xx видно и падения, и автоматических ботов;
• ротация через logrotate обязательна, иначе диск закончится.

22. Apache и Caddy: альтернативы Nginx

Nginx — не единственный вариант. Apache всё ещё держит массу legacy-проектов и .htaccess-настроек, а Caddy привлекает простотой: бесплатный HTTPS включается одной директивой.

# Caddyfile
my-site.ru {
    root * /var/www/site
    file_server
}

Что дальше

Соберите небольшой статический сайт, выложите его на GitHub Pages, затем подключите свой домен и HTTPS. После этого попробуйте повторить деплой VPS из урока Nginx, а приложение упакуйте в Docker. База протокола — в HTTP и DNS, вопросы скорости — в SEO.

← Вернуться к курсам