Фронтенд и статика
Как выложить приложение на Vue в интернет
Коротко
Выложить приложение на Vue можно без аренды сервера: после сборки это набор статических файлов, поэтому нужна не своя машина, а площадка, которая соберёт проект и раздаст результат. Загрузите исходный код в Netrun архивом или импортом с GitHub: платформа определит стек по package.json, поставит зависимости, выполнит сборку и выдаст публичную ссылку с HTTPS. Папку node_modules и готовую сборку класть в архив не нужно, эту работу платформа делает у себя. Адреса вида /about в режиме history открываются сразу, отдельная настройка веб-сервера не требуется.
Обычно путь такой: собрать проект командой сборки, залить получившуюся папку на хостинг, настроить веб-сервер так, чтобы любой адрес отдавал index.html, иначе обновление страницы на /about покажет ошибку 404, а потом ещё получить сертификат для HTTPS. Вопрос «куда выложить приложение на Vue» упирается не во фреймворк, а вот в эти три-четыре шага вокруг него, на каждом из которых легко ошибиться.
В Netrun этой части нет: вы загружаете исходный код, платформа сама разбирает проект по package.json, ставит зависимости, собирает его и раздаёт по публичной ссылке с защищённым соединением. Ниже — как пройти путь от папки с кодом до рабочего адреса и что важно знать про переменные с префиксом VITE_, из-за которых люди случайно выкладывают свои ключи на всеобщее обозрение.
Проверьте, что проект собирается у вас локально#
В корне проекта должен лежать package.json со скриптом сборки — у Vue 3 с Vite это обычно npm run build. Запустите его один раз на своей машине: если сборка падает у вас, она упадёт и у нас, и причина будет ровно та же. Проекты на Vue CLI и на Vue 2 подходят точно так же, важно только наличие рабочего скрипта сборки.
Уберите из архива node_modules и готовую сборку#
Зависимости мы устанавливаем сами, а проект собираем у себя, поэтому папки node_modules и dist в архиве только мешают: они много весят и тянут за собой пути с вашего компьютера. Загружайте исходный код — тот же набор файлов, который вы держите в репозитории. Если импортируете проект с GitHub, чистить вообще ничего не нужно.
Не кладите настоящие ключи в переменные VITE_#
Всё, что начинается с VITE_, Vite подставляет прямо в собранные файлы во время сборки — эти значения уезжают в браузер и видны любому посетителю через исходный код страницы. Туда нормально положить адрес API, название сайта или ключ карты, но не токен базы, не ключ платёжного сервиса и не секрет от платного API. Настоящие секреты должны жить на бэкенде и наружу отдавать только результат.
Оставьте маршруты приложения как есть#
Если роутер работает в режиме history, адреса выглядят обычно — /about, /projects/1 — и при прямом заходе или обновлении страницы сервер обязан отдать тот же index.html. На простом хостинге под это пишут отдельное правило, а без него вместо страницы получается ошибка 404. У нас так настроено сразу: заходите по вложенным адресам, жмите F5, переходить на режим с решёткой в адресе не требуется.
Решите, где будет жить бэкенд#
Приложение на Vue работает в браузере и не умеет хранить секреты или ходить в базу напрямую — для этого нужен бэкенд. Его можно опубликовать в Netrun отдельным проектом и обращаться к нему по выданной ссылке, а можно собрать всё в одном проекте своим файлом docker-compose: в нём разрешено до пяти связанных сервисов, например интерфейс, бэкенд и база. Адрес бэкенда секретом не является, его как раз можно спокойно положить в переменную VITE_.
Загрузите код и заберите ссылку#
Запакуйте папку в архив или импортируйте репозиторий с GitHub, в том числе приватный. Netrun определит стек по package.json, поставит зависимости, соберёт проект и начнёт раздавать его по публичному адресу с HTTPS. Ход сборки и логи видны в кабинете в реальном времени, поэтому ошибку вы увидите сразу, а не в виде пустой белой страницы.
В итоге приложение на Vue открывается по обычной ссылке: без аренды сервера, без ручных правил для вложенных адресов и без возни с сертификатом. На бесплатном тарифе сайт засыпает, когда им долго никто не пользуется, и просыпается сам, когда кто-то открывает ссылку — медленнее обычного будет только первый заход после паузы. На тарифе Pro простоев нет и можно привязать свой домен. Актуальные тарифы и лимиты видны в кабинете. Попробовать Netrun.
Частые вопросы
Нужно ли собирать проект самому и загружать папку dist?
Нет, достаточно исходного кода. Netrun сам поставит зависимости и выполнит сборку по скрипту из package.json, а готовые файлы начнёт раздавать по ссылке. Загрузка уже собранной папки лишь усложняет обновление: каждую новую версию пришлось бы собирать вручную.
Почему при обновлении страницы /about показывается ошибка 404?
Так ведёт себя обычный хостинг: он ищет файл по этому пути и не находит его, потому что все страницы Vue рисует сам из index.html. Лечится правилом, по которому любой адрес отдаёт index.html. В Netrun так настроено сразу, вам делать ничего не нужно.
Можно ли положить ключ от API в переменную VITE_?
Нельзя, если это настоящий секрет. Значения переменных с префиксом VITE_ вшиваются в собранные файлы и доступны любому посетителю сайта — их видно в исходном коде страницы. Ключи, которые дают доступ к деньгам или чужим данным, держите на бэкенде и обращайтесь к нему из приложения.
Как подключить к приложению на Vue свой бэкенд?
Бэкенд — это отдельная программа, и в Netrun он публикуется либо отдельным проектом со своей ссылкой, либо соседним сервисом в вашем файле docker-compose. В приложении адрес бэкенда удобно вынести в переменную окружения, чтобы локальный и опубликованный варианты отличались только значением, а не кодом.
Чем публикация проекта на Vue отличается от загрузки готового сайта?
Готовый сайт просто раздаётся как есть, а проект на Vue сначала нужно собрать: превратить исходники и компоненты в набор файлов для браузера. Netrun берёт этот шаг на себя, поэтому со стороны разница только одна: вы загружаете код, а не результат сборки.
Подойдёт ли старый проект на Vue 2 или на Vue CLI?
Да. Платформа ориентируется на package.json и скрипт сборки, а не на версию фреймворка, поэтому проекты на Vue 2 и на Vue CLI публикуются так же. Главное, чтобы сборка проходила без ошибок — если она падает у вас локально, сначала почините её, а потом загружайте код.
Как выложить сайт в интернет?
Загрузите код сайта ZIP-архивом или из GitHub — Netrun соберёт его и выдаст рабочую ссылку с HTTPS. Подойдёт статический сайт (HTML, CSS, JS), приложение на React или сайт на Python. Покупать домен, настраивать сервер и сертификаты не нужно.
Как обновить код уже опубликованного проекта?
Откройте проект и загрузите новую версию или обновите его из GitHub. Ссылка останется прежней, а данные сохранятся, если лежат в постоянном хранилище — папке /data или томе вашего compose-файла.
Нужен ли git — я им не умею пользоваться?
Нет. Можно просто загрузить архив с кодом — ни git, ни терминал не нужны. А если с GitHub удобнее, проект можно импортировать оттуда, в том числе из приватного репозитория.
Можно ли подключить свой домен?
Да, на тарифе Pro, и не один: к сайту можно подключить столько своих доменов, сколько вам нужно. Откройте вкладку «Домены» на странице проекта, укажите домен, который вы купили у регистратора, и добавьте DNS-запись по подсказке — так же добавляется каждый следующий. Когда домены готовы, нажмите «Проверить»: Netrun проверит их все разом и выпустит на каждый свой HTTPS-сертификат, поэтому заминка с одним доменом не мешает остальным. Сайт открывается по любому из ваших адресов, а ссылка Netrun остаётся запасной. Если вы подключаете домен целиком (например myshop.com), можно добавить ещё одну запись, и сайт откроется и с www. Доступно для сайтов — боту и фоновому скрипту домен не нужен.