Хостинг и деплой
Урок 11 из 26 курса «Вайбкодинг: курс с нуля». Бесплатно, с анимациями и тестом.
Хостинг: компьютер, который не спит
Пример: ты с ИИ собрал сайт для своей музыкальной группы. Пока он открывается только у тебя на ноутбуке. Закрыл крышку, и сайта нет. Хостинг: компьютер в облаке, который включён круглые сутки и отдаёт твой сайт любому, кто откроет ссылку. На схеме это облако с сервером справа. Держать свой сервер не нужно: хостинг-сервис делает это за тебя.
Деплой: выкатываем новую версию
Деплой (deploy): публикация новой версии сайта, чтобы её увидели люди. Раньше файлы закидывали на сервер вручную. Сейчас проще: один раз подключаешь репозиторий с GitHub к хостингу. Дальше каждый push в main, то есть отправка коммитов в главную ветку, сам запускает деплой. На схеме стрелка идёт от GitHub через сборку к живому сайту. Добавил фото с концерта, сделал push, и вскоре сайт обновился.
Сборка: из проекта в готовые файлы
Браузер понимает только HTML, CSS и JavaScript. А проект от ИИ часто написан на фреймворке, то есть на готовом каркасе с удобными правилами, и его надо переработать. Это и есть сборка (build): хостинг запускает команду сборки, например npm run build, и складывает готовые файлы в выходную папку, например dist. Полоска прогресса на схеме: это она. Обычно хостинг сам угадывает эти настройки.
Сборка упала? Сайт жив
Без паники. Если сборка упала с ошибкой, хостинг не выкладывает сломанную версию. Люди продолжают видеть старую, рабочую: это красная заметка на схеме. Что делать: открыть лог сборки, то есть журнал, куда хостинг пишет каждый шаг. Ищи красные строки ближе к концу. Копируй ошибку целиком и отдавай ИИ, как в уроке про постановку задач. Починил, сделал push, и сборка пошла заново.
Превью для каждой ветки
Помнишь ветки и Pull Request? Хостинг, подключённый к GitHub, обычно собирает каждую ветку отдельно и даёт ей превью-ссылку: копию сайта, которая не трогает живой сайт. Пример: ты пробуешь в ветке новую страницу с афишей концертов. Открываешь превью с телефона, кидаешь ссылку барабанщику. Всем нравится: делаешь merge в main, и живой сайт обновится сам.
Статический сайт или с сервером
Статический сайт: только фронтенд, то есть готовые страницы, одинаковые для всех. Сайт группы с фото и афишей как раз такой, его хостить проще всего. Если нужно делать что-то скрытно от браузера, например принимать заявки или хранить ключ к ИИ, понадобятся серверные функции: маленькие кусочки бэкенда, которые хостинг запускает по запросу. Многие хостинги умеют и то, и другое.
Проверь себя
- Что такое деплой?
Правильный ответ: Публикация новой версии сайта для людей. Деплой выкатывает новую версию на хостинг, где её видят все. Коммит сохраняет версию только в Git, а домен покупают отдельно. - Сборка упала с ошибкой. Что видят посетители сайта?
Правильный ответ: Старую версию, которая работала. Сломанная сборка не публикуется, живой остаётся прошлая версия. А ты читаешь лог сборки и чинишь. - Хочешь показать другу новую страницу, не трогая живой сайт. Что взять?
Правильный ответ: Превью-ссылку ветки. Ветка получает свою копию сайта по отдельной ссылке. Push в main сразу изменил бы живой сайт.
← Терминал за 10 минут Cloudflare: Pages, Workers и защита →