Деплой: выложить в интернет

Сделать сайт на локальном компьютере — это полдела. Выложить его так, чтобы его мог открыть любой человек в интернете — вот это уже продукт.

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

Vercel — самый простой способ

Для статических сайтов и фронтенд-проектов Vercel — самый удобный вариант. Бесплатный тариф перекрывает все личные проекты с запасом. Схема работы простая: подключаешь GitHub-репозиторий, и дальше Vercel сам деплоит всё при каждом пуше.

Пошагово это выглядит так.

Шаг первый: регистрируешься на vercel.com через GitHub-аккаунт — одно нажатие, никаких форм.

Шаг второй: New Project → Import Git Repository → выбираешь свой репозиторий.

Шаг третий: нажимаешь Deploy. Через 30–60 секунд сайт живой. Vercel выдаёт бесплатный адрес вида yourproject.vercel.app — уже можно отправлять ссылку.

Проверка перед деплоем

Перед тем как выкладывать сайт в интернет на живых пользователей — пройдись по проекту глазами. Лучше за этим попросить Claude — он быстрее найдёт что не так:

Проверь мой проект перед публикацией:

1. Запусти dev-сервер и убедись что он работает без ошибок.
2. Проверь что все страницы открываются.
3. Проверь что формы, кнопки и интерактивные элементы работают.
4. Убедись что проект выглядит нормально на мобильных (адаптивность).
5. Проверь что в коде нет API-ключей и паролей.
6. Если есть ошибки — исправь их.

В конце скажи: что работает, что починили, что нужно поправить мне.

Если деплой провалился

Vercel зелёная галочка не появилась? Заходишь на vercel.com → твой проект → вкладка Deployments → клик по последнему деплою → раздел Build Logs. Там будет красное сообщение об ошибке.

Скопировать ошибку и показать Claude — самый быстрый способ починить:

Vercel не задеплоил проект. Вот ошибка из Build Logs:

[вставляешь сюда текст ошибки]

Объясни что не так и почини.

Откат к предыдущей версии

Сломалось что-то после последнего деплоя? В Vercel можно мгновенно вернуться к предыдущей рабочей версии: Deployments → выбираешь последний рабочий деплой → три точки → Promote to Production. Через 5 секунд старая версия снова в проде.

Свой домен

Адрес yourproject.vercel.app рабочий, но для серьёзного проекта лучше иметь свой домен. Купить его можно на reg.ru, namecheap.com или у любого регистратора — стоит от 500 рублей в год.

Подключение пошагово

Шаг 1. Открой проект в Vercel → Settings → Domains → введи свой домен → Add.

Шаг 2. Vercel покажет DNS-записи (обычно две: A или CNAME). Их нужно прописать у регистратора домена.

Шаг 3. Заходишь в панель регистратора (где покупал домен) → раздел DNS / DNS-записи / Управление DNS → добавляешь те записи что показал Vercel.

Шаг 4. Ждёшь 5–30 минут (иногда дольше). Vercel сам проверит и поставит зелёную галочку рядом с твоим доменом — значит всё работает.

Если через час галочка так и не появилась — спроси Claude:

Я подключаю домен [твой-домен.ru] к Vercel.
Vercel требует такие DNS-записи:
[копируешь скриншот или текст]

У регистратора прописал [что прописал].
Прошло [время] — галочка не появляется.
Что я мог сделать неправильно?

Netlify — альтернатива

Netlify работает по той же схеме, что и Vercel: подключаешь GitHub, дальше всё само. По возможностям для простых сайтов — почти идентично. Главная разница в модели оплаты бесплатного тарифа — это критично понимать заранее, иначе можно неожиданно получить счёт или отключение сайта.

Netlify немного лучше в нескольких вещах: умеет обрабатывать формы без бэкенда, поддерживает файл _headers для настройки кэша, есть edge-функции (это маленькие программы которые запускаются на серверах рядом с пользователем — для быстрых ответов без полноценного бэкенда). Подключить: netlify.com → New site from Git → выбираешь репозиторий.

Файл _headers в корне проекта управляет кэшем — шрифты и стили браузер будет загружать один раз и помнить долго:

/fonts/*
  Cache-Control: public, max-age=31536000, immutable

/styles.css
  Cache-Control: public, max-age=86400

Vercel vs Netlify — главное про тарифы

Бесплатные тарифы у обоих платформ работают принципиально по-разному. Это не про «у кого больше гигабайт» — это про то что происходит когда ты исчерпаешь лимит.

Как выбрать на старте

Vercel — если хочешь предсказуемости. Лимит кончился → сайт приостановили → ты сам решаешь что дальше. Никаких сюрпризов в виде неожиданного счёта.

Netlify — если нужна форма обратной связи без бэкенда (Vercel такое не умеет на Hobby) или формально коммерческий проект на бесплатном тарифе. Но следи за кредитами в дашборде, чтобы не получить неожиданный счёт.

Совет: подключи уведомления о состоянии проекта (есть в обоих сервисах) — придёт письмо когда лимит близко к концу. Не игнорь.

GitHub Actions — CI/CD без жаргона

CI/CD — это «непрерывный деплой». На практике означает одно: каждый пуш в main — сайт обновился автоматически. GitHub Actions — это робот, который запускает нужные команды каждый раз, когда ты пушишь код.

Для простых сайтов Vercel и Netlify уже делают это за тебя. Actions нужен, когда есть шаг сборки (например, нужно прогнать npm run build), тесты, или сложная логика деплоя на нестандартный хостинг.

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to Netlify
        run: npx netlify-cli deploy --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

Файл кладётся в папку .github/workflows/ — GitHub подхватывает его автоматически и запускает при каждом пуше в ветку main.

GitHub Secrets — API-ключи в безопасности

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

Как добавить: заходишь в репозиторий на GitHub → Settings → Secrets and variables → Actions → New repository secret. Пишешь название — например, NETLIFY_AUTH_TOKEN — и вставляешь значение токена. Сохраняешь.

В файле воркфлоу обращаешься к секрету через ${{ secrets.NETLIFY_AUTH_TOKEN }} — GitHub сам подставит реальное значение при запуске, и оно нигде не появится в логах.

- name: Deploy
  env:
    API_KEY: ${{ secrets.MY_API_KEY }}
    DATABASE_URL: ${{ secrets.DATABASE_URL }}
  run: ./deploy.sh

Railway — для проектов с бэкендом

Vercel и Netlify — это для статических сайтов: HTML, CSS, JS без сервера. Если в твоём проекте есть серверная часть — Python-скрипт, Node.js, база данных, Telegram-бот — нужен другой хостинг.

Railway подключается к GitHub так же, деплоит автоматически, есть бесплатный tier. Заходишь на railway.app, регистрируешься, New Project → Deploy from GitHub repo — остальное само.

Правки после обратной связи

Сайт уже в интернете — отправил ссылку трём знакомым, собрал замечания. Дальше нужно быстро их применить и обновить сайт. Это типичный цикл: правишь → коммит → пуш → Vercel сам перевыкатил.

Получил обратную связь по сайту. Вот что нужно исправить:

1. [что не так — опиши своими словами, как сказали тебе]
2. [что нужно добавить]
3. [что нужно убрать или поменять]

Исправь, проверь что не сломал остальное, сделай коммит и пуш.
После этого Vercel сам обновит сайт за минуту.

Маленький, но важный приём: каждую правку — отдельным коммитом с понятным описанием. Если что-то сломалось после конкретной правки — легко откатить именно её, а не выкидывать весь дневной прогресс.