Фронтенд и статика
Как выложить React-приложение в интернет
Коротко
Чтобы выложить React-приложение в интернет, загрузите код с package.json и скриптом сборки — без папки node_modules и без готовой сборки. Netrun распознает React, сам выполнит сборку на Vite, Create React App или другом сборщике и раздаст готовые файлы по ссылке с HTTPS. Новая версия публикуется обновлением кода по тому же адресу.
- React-приложение после сборки — это набор статических файлов: HTML, JavaScript и CSS.
- Netrun выполняет сборку сам, поэтому папку node_modules и готовую сборку загружать не нужно.
- Подходят проекты на Vite, Create React App и других сборщиках, если в package.json есть скрипт сборки.
- Переменные окружения подставляются во фронтенд-код при сборке, поэтому секретный ключ в React-приложении может прочитать любой посетитель.
- Так же публикуются приложения на Vue, Svelte и других фронтенд-фреймворках.
Обычно, чтобы показать React-приложение миру, нужно собрать его командой сборки, залить готовую папку на хостинг и настроить, чтобы маршруты работали правильно. Несколько шагов, на которых легко ошибиться.
Netrun сам определит, что это React, соберет проект и раздаст его по ссылке. От вас — только код. Разберем по шагам.
Подготовьте проект#
Убедитесь, что в проекте есть package.json со скриптом сборки (Vite, Create React App или другой бандлер) и что проект собирается у вас локально.
Загрузите код в Netrun#
ZIP-архивом или импортом из GitHub. Папки node_modules и собранную сборку класть не нужно — мы установим зависимости и соберем проект сами.
Netrun соберет приложение#
Платформа распознает React, выполнит сборку и подготовит готовые файлы к раздаче — настраивать команду сборки вручную не требуется.
Получите ссылку#
После сборки Netrun выдаст публичный адрес с HTTPS, по которому приложение открывается у всех.
Обновляйте#
Чтобы выложить новую версию, обновите код — Netrun пересоберет приложение по тому же адресу.
Так же разворачиваются приложения на Vue, Svelte и других фронтенд- фреймворках. Если код сгенерировала нейросеть — просто загрузите его как есть. Попробовать Netrun.
Частые вопросы
Почему React-приложение не видит переменные окружения?
Сборщики пропускают в браузерный код только переменные с особым префиксом: VITE_ в Vite и REACT_APP_ в Create React App. Значения подставляются во время сборки, поэтому после их изменения проект нужно опубликовать заново.
Можно ли хранить API-ключ в React-приложении?
Нет, если ключ секретный: все, что попало во фронтенд, можно прочитать в браузере. Запросы с секретным ключом делают через свой бэкенд, где ключ лежит в переменных окружения, а React обращается уже к этому бэкенду.
Нужно ли загружать папку dist или build?
Нет. Netrun устанавливает зависимости и собирает проект сам, поэтому достаточно исходного кода с package.json. Главное — чтобы проект без ошибок собирался у вас локально той же командой сборки.
Подойдет ли бесплатный тариф для React-сайта?
Да: на бесплатном тарифе сайт живет сколько угодно, засыпает без посетителей и просыпается сам, когда его открывают. Первое открытие после сна занимает несколько секунд; чтобы сайт не засыпал, нужен тариф Pro.
Как обновить опубликованное React-приложение?
Загрузите новую версию кода в кабинете — архивом, из GitHub или повторной публикацией из редактора с ИИ, — и Netrun пересоберет приложение по тому же адресу. Автоматической публикации по git push нет.