Как самому задеплоить проект из Bolt.new

Bolt.new собирает рабочий проект прямо в браузере: превью открывается, кнопки нажимаются, данные приходят. Но как только вы хотите отдать ссылку другому человеку, выясняется, что браузерная песочница делала за вас четыре вещи — ставила зависимости, выбирала порт, держала фронтенд и сервер на одном адресе и хранила ключи API вне кода. За пределами песочницы ничего этого нет. Рассказываем по шагам, как забрать проект из Bolt.new и получить рабочую HTTPS-ссылку на Dockbox.

Что именно делала за вас браузерная среда Bolt.new

Обычный путь из превью наружу длинный: арендовать сервер, поставить Node.js, собрать фронтенд, запустить сервер фоновым процессом, поставить перед ним прокси и выпустить сертификат. Плюс разобраться, почему «всё работало минуту назад», а теперь открывается пустая страница. Причина почти всегда одна: код писался под песочницу, где четыре условия выполнялись сами собой.

Зависимости. В браузере пакеты уже стояли, поэтому в проекте может не оказаться файла блокировки или в него попадут не все пакеты.

Порт. Его назначала среда, поэтому в коде часто остаётся жёсткое число вроде 3000 или 5173.

Один адрес. Фронтенд и сервер в песочнице отвечали по одному адресу, и запросы за данными писались без оглядки на реальный домен.

Секреты. Ключи к внешним сервисам Bolt.new охотно вставляет прямо в файлы — и обычно они там и остаются.

Дальше — шесть шагов, которые закрывают эти четыре пункта. Сборку, HTTPS и перезапуск при сбое платформа берёт на себя.

Шаг 1. Поймите, что в проекте вообще запускается

У проекта из Bolt.new обычно две части: фронтенд, который компилируется в статические файлы для браузера, и небольшой сервер, который отдаёт данные. Откройте package.json и посмотрите на scripts: если есть сервер, деплоить нужно его, и он же должен отдавать собранный фронтенд. Если сервера нет и всё компилируется в статику, это просто сайт, и шагов меньше.

"scripts": {
  "build": "vite build",
  "start": "node server.js"
}

Если в scripts есть только dev и build, у вас статика. Если есть start или серверный файл, у вас приложение — и оно должно слушать порт из переменной окружения.

Шаг 2. Уберите жёстко прописанный порт

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

Плохой вариант:

app.listen(3000, "localhost")

Правильный — порт из окружения и адрес 0.0.0.0 вместо localhost:

const port = process.env.PORT || 3000
app.listen(port, "0.0.0.0")

Если код писал ИИ, попросите того же ИИ внести правку: это запрос в одно предложение, и модель сделает его без объяснений.

Шаг 3. Свяжите фронтенд и сервер по реальным адресам

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

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

VITE_API_URL=https://api.example.com

Помните: значения с префиксом VITE_, REACT_APP_ или NEXT_PUBLIC_ запекаются в бандл при сборке, поэтому смена переменной в панели без новой сборки ничего не изменит. Иначе страница после деплоя откроется, но останется пустой: она просит данные по адресу, которого больше не существует.

Шаг 4. Перенесите ключи API в секреты

ИИ-инструменты охотно вставляют ключи к внешним сервисам прямо в код, и в проекте из Bolt.new они обычно там и лежат. Вынесите их из файлов и читайте из переменных окружения: при настройке проекта платформа спросит значения и подставит их в зашифрованном виде, так что они не попадут ни в архив, ни в репозиторий. Фронтенд проверьте отдельно: всё, что уезжает в браузер, видно каждому посетителю, поэтому настоящие ключи живут только на серверной стороне.

Шаг 5. Решите, где будут жить данные

Если в проекте была база, которая существовала внутри песочницы, в интернете её нет и данным нужно настоящее место. Небольшую файловую базу и всё, что приложение пишет само, держите в постоянной папке проекта /data: то, что лежит там, переживает обновление кода и перезапуск, а файлы рядом с кодом пересоздаются при каждом деплое.

const db = new Database("/data/app.db")

Если данных много или ими пользуются несколько частей проекта, поднимите базу отдельным сервисом рядом с приложением через docker-compose либо возьмите внешнюю.

Шаг 6. Соберите чистый архив и загрузите код

Забрать код из Bolt.new можно двумя способами: скачать архивом или отправить в репозиторий GitHub. node_modules и папку сборки в архив не кладите — платформа сама поставит зависимости и соберёт фронтенд при публикации.

node_modules/
dist/

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

Сколько это стоит и как работают контейнеры

Starter — 990 ₽/мес, первый месяц бесплатно: 1 vCPU, 2 GB RAM, один проект. Контейнеры работают постоянно — нет ни лимита по часам, ни засыпания при простое, ссылка отвечает в момент открытия. Для одного проекта из Bolt.new этого хватает.

Pro — 2 490 ₽/мес: 2 vCPU, 4 GB RAM, до пяти проектов — если частей несколько или фронтенд тяжёлый. Team — 4 990 ₽/мес — для команд, которым нужен запас ресурсов. Отдельного счёта за сборки и трафик нет, а упавший контейнер платформа перезапускает сама.

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