Вайб-кодить научились, деплоить - пока нет: как выкатить React-сайт из вашей нейросети в интернет без смс и регистрации
Знакомая история: ты пару вечеров самозабвенно промптил в Google AI Studio, Lovable или Cursor, нейросеть собрала тебе сочнейший сайт на React и Tailwind с анимациями и квизами. Ты с гордостью жмешь заветную кнопку Download ZIP, распаковываешь архив, кликаешь дважды по index.html в предвкушении триумфа… и видишь девственно чистый белый экран.
Открываешь консоль браузера (F12), а там кровавая баня из красных ошибок: какие-то import, export, MIME type и прочие ругательства.
Спокойно. Твой сайт не сломан, нейросеть тебя не обманула, а ты не криворукий. Просто современный веб устроен чуть сложнее, чем в 2007 году.
Рассказываю на пальцах, как этот архив за 5 минут превратить в рабочий сайт, оживить на локалке и выкатить на хостинг.
Почему оно не открывается «просто так»?
Файлы, которые отдала тебе нейросеть (вся эта папка src/ с кучей файлов .tsx и .css) - это не готовый сайт. Это исходники (полуфабрикат).
Браузер - штука прямолинейная: он понимает чистый HTML, базовый CSS и ванильный JavaScript. Он понятия не имеет, что такое компоненты React, строгая типизация TypeScript и как на лету компилировать классы Tailwind CSS.
Чтобы полуфабрикат превратился в готовое блюдо, нужен шеф-повар. В нашем случае это Node.js и сборщик Vite. Они берут сотни твоих мелких файлов, компилируют, сжимают, выкидывают лишнее и склеивают в идеальный, легкий продакшен-бандл.
Шаг 0. Ставим «шеф-повара» (Node.js)
Если у тебя еще нет Node.js:
- Идешь на nodejs.org и качаешь версию LTS (это стабильная версия для нормальных людей, а не любителей багов по ночам).
- Ставишь ее как обычную программу (везде жмешь «Далее/Next»).
- Открываешь терминал (в Windows это PowerShell или Терминал, на Mac - Terminal) и проверяешь, что все встало:
Шаг 1. Качаем «строительные леса» (npm install)
Распакуй свой ZIP-архив в любую удобную папку (только без русских букв в пути, компьютеры этого до сих пор пугаются).
Открой терминал прямо в этой папке (в VS Code можно просто нажать Ctrl + ~ или Cmd + ~)
И в открывшемся окне терминала вводим следующую команду:
Что сейчас происходит: npm читает файл package.json, видит список библиотек, которые нейросеть использовала в проекте (React, иконки Lucide, анимации Motion), и начинает выкачивать их из интернета.
НЕ закрывай терминал, нам он еще нужен будет. Npm еще загрузится и должна появиться следующая картинка:
В проекте появится папка node_modules.
Главное правило бойцовского клуба: папка node_modules - это черная дыра, которая весит как чугунный мост (200-500 МБ). Ее НИКОГДА не нужно скидывать друзьям в телеге, архивировать или заливать на хостинг.
Шаг 2. Запуск на локалке (npm run dev)
После того, как у нас в терминале загрузился install (картинка выше, если пропустили) пишем следующую команду:
Буквально через полсекунды Vite подмигнет тебе строчкой Local: http://localhost:3000 (или 5173). Да-да тот самый
Зажимаешь Ctrl (или Cmd), кликаешь по ссылке - и вуаля! Сайт открывается в браузере во всей красе.
Пока терминал открыт, ты можешь менять код или картинки - сайт в браузере будет обновляться моментально сам без перезагрузки страницы. Все кнопки нажимаются, попапы вылетают, карусели крутятся, но вот лавэ пока не мутится.
Поигрался? Жми в терминале Ctrl + C, чтобы остановить локальный сервер.
Шаг 3. Момент истины - сборка (npm run build)
Вот мы и подошли к тому, ради чего все затевалось. Мы хотим получить готовый сайт, который поймет любой хостинг в мире.
Пишем команду:
Сборщик пробежится по всему коду, проверит типы и сгенерирует в корне проекта новенькую папку dist/.
Папка dist - это и есть твой готовый сайт. Внутри нее будет лежать один index.html, папка assets с минифицированным JS/CSS и все твои сжатые картинки. Весит эта красота обычно всего пару мегабайт.
Шаг 4. Выкатываем на хостинг
У тебя есть два основных пути в зависимости от того, куда ты целишься.
Вариант А. Ленивый (Vercel / Netlify) — 60 секунд
Если сайт для тестов или международного трафика:
- Регистрируешься на Vercel.com.
- Ставишь их утилиту или просто подключаешь проект через GitHub (либо перетаскиваешь папку проекта мышкой).
- Vercel сам выполнит билд и выдаст тебе рабочую ссылку с бесплатным SSL-сертификатом.
Вариант Б. Классический (Beget, TimeWeb, Reg.ru и др.) Им пользуюсь я сам и всем советую
Если сайт коммерческий, с доменом .ru и юрлицом в РФ:
- Заходишь в панель своего хостинга, далее в Файловый менеджер.
- Открываешь корневую папку сайта (обычно это public_html или "твой_домен"/public_html).
- Заходишь у себя на компьютере внутрь папки dist и заливаешь ВСЁ ЕЕ СОДЕРЖИМОЕ на хостинг.(Не саму папку dist, а именно то, что лежит внутри нее!)
⚠ Ловушка, на которой сыпятся 90% вайб-кодеров (Ошибка 404)
Ты залил файлы, открываешь главную страницу - все летает. Переходишь по кнопке на любую страницу сайта - все открывается.
Но стоит нажать F5 (обновить страницу) на любой странице, как хостинг выдает следующую мерзость: 404 Not Found.
Почему так? React - это SPA (Single Page Application). Физически на сервере есть только один файл index.html, а переходы между страницами симулирует JavaScript прямо в браузере. Когда ты жмешь F5, сервер хостинга честно пытается найти на диске реальный файл "твоя_страница"/index.html, не находит его и паникует.
Лечится за 10 секунд: В корне сайта на хостинге, прямо в менеджере файлов (рядом с index.html) создаешь текстовый файл с названием .htaccess (с точкой в начале) и вставляешь в него этот код:
Эта магия говорит серверу: «Дружище, если пользователь просит любую страницу, которой нет на диске, просто отдай ему главный index.html, а дальше React сам разберется».
Вот и весь секрет. Цепочка простая: Распаковал - npm i - npm run build - залил содержимое папки dist на хостинг - кинул .htaccess.
Никакой магии, никаких бородатых сисадминов за 50к рублей. Пользуйтесь!