Vercel

Vercel — американская платформа, на которой размещают сайты и веб-приложения. Вы подключаете к ней репозиторий с кодом, а дальше она сама собирает проект и выкладывает его в интернет. Арендовать сервер, настраивать веб-сервер, продлевать сертификат и следить за нагрузкой при этом не нужно.

Главное отличие от обычного хостинга — работа «от репозитория». Вместо того чтобы копировать файлы по FTP, вы отправляете изменения в Git, и через минуту-две новая версия сайта уже открыта для посетителей. Компания работает с 2015 года и сама разрабатывает Next.js — распространённый каркас для сайтов на React, поэтому с ним Vercel дружит теснее всего. Но разместить можно и обычный статический сайт из HTML, CSS и картинок.

Что умеет Vercel

• Сборка и публикация из Git — репозиторий на GitHub, GitLab или Bitbucket подключается один раз. Дальше каждая отправка изменений в главную ветку запускает сборку и обновляет сайт без вашего участия.
• Черновая версия для каждой ветки — у любой ветки и запроса на слияние появляется собственный адрес. Можно показать заказчику новую страницу или проверить правку, пока основной сайт остаётся прежним.
• Откат на предыдущую версию — список всех выкладок хранится в панели, и вернуть вчерашний вариант сайта получается одной кнопкой, без восстановления из резервной копии.
• Бесплатный адрес и свой домен — сразу после первой публикации проект доступен на служебном поддомене вида имя.vercel.app. Свой домен подключается в настройках, а сертификат для защищённого соединения выпускается и продлевается автоматически.
• Раздача с ближайшего сервера — файлы расходятся по сети серверов в разных странах, поэтому страница открывается примерно одинаково быстро и в Москве, и в другой части света.
• Серверные функции — небольшие куски кода, которые обрабатывают форму, обращаются к чужому сервису или считают корзину, выполняются по запросу. Отдельную машину, которая простаивает между запросами, арендовать не нужно.
• Переменные окружения — ключи к сторонним сервисам хранятся в настройках проекта, а не в коде, и для черновых и боевых версий можно задать разные значения.
• Журналы и измерения — в панели видно, из-за чего не собрался проект, какие запросы пришли и с какой скоростью открываются страницы у настоящих посетителей.
• Командная строка — утилита Vercel выкладывает папку с сайтом прямо с компьютера, без репозитория: удобно для одноразовых показов.

Кому подходит

• Разработчикам на Next.js, React, Vue, Svelte и похожих каркасах: платформа сама понимает, какой командой собрать проект и куда класть готовые файлы.
• Верстальщикам и фрилансерам, которым нужно быстро показать заказчику готовую страницу по ссылке и так же быстро её обновить.
• Авторам личных сайтов, портфолио и документации, собранных генераторами статических сайтов.
• Небольшим командам, где удобно, чтобы у каждой задачи была своя проверочная версия сайта.
• Не подойдёт тем, кому нужен привычный сайт на WordPress с базой данных и панелью администратора: для такого берут обычный хостинг с поддержкой PHP.

Сколько стоит

Бесплатный тариф рассчитан на личные и учебные проекты. На нём действуют месячные ограничения: сколько трафика раздаёт сайт, сколько времени занимают сборки, как часто работают серверные функции. Точные значения Vercel публикует на своей странице тарифов и время от времени меняет, поэтому сверяйтесь с ней, а не со старыми статьями.

Для коммерческих сайтов и команд есть платные тарифы: там платят за каждого участника команды и отдельно за превышение включённых лимитов. Оплатить подписку картой российского банка не получится, поэтому в России Vercel чаще используют для личных проектов и показов, а рабочие сайты держат на российском хостинге.

Как начать пользоваться

1. Заведите аккаунт на сайте Vercel. Проще всего войти через GitHub: тогда платформа сразу увидит ваши репозитории.
2. Нажмите создание нового проекта и выберите репозиторий, в котором лежит сайт.
3. Проверьте предложенные настройки сборки — обычно платформа сама определяет каркас, команду сборки и папку с готовыми файлами.
4. Запустите публикацию и дождитесь конца сборки: через минуту-две сайт откроется на служебном адресе.
5. В настройках проекта добавьте свой домен и пропишите у регистратора записи, которые покажет Vercel.

Частые вопросы