Фронтенд и статика
Как выложить приложение на Svelte и SvelteKit в интернет
Коротко
Обычное приложение на Svelte, собранное через Vite, превращается в набор готовых файлов, и выложить его достаточно как статический сайт. Приложению на SvelteKit нужен адаптер — настройка, которая говорит сборке, что получить на выходе: готовые страницы (adapter-static) или Node-приложение, отвечающее на запросы (adapter-node). Адаптеры, написанные под конкретную площадку (vercel, netlify, cloudflare), на своём сервере и в Netrun не соберутся, их нужно заменить на node или static. Дальше вы загружаете код в Netrun архивом или из GitHub, а платформа собирает проект и выдаёт публичную ссылку с HTTPS.
Обычно, чтобы выложить приложение на Svelte в интернет, нужно арендовать сервер, поставить на него Node.js, собрать проект, разложить готовые файлы или держать постоянно работающий процесс, повесить рядом прокси и получить сертификат. С SvelteKit добавляется вопрос, на котором спотыкаются чаще всего: какой адаптер выбрать, чтобы сборка вообще прошла до конца.
В Netrun этой части нет: вы загружаете код, платформа сама видит, что перед ней проект на Node.js, ставит зависимости, собирает его и выдаёт публичную ссылку с HTTPS. От вас нужно одно решение — во что собирать SvelteKit: в набор готовых страниц или в приложение, которое отвечает на запросы. Ниже разберём оба случая и обычный Svelte без Kit.
Определите, обычный это Svelte или SvelteKit#
Загляните в package.json. Если там только svelte и vite, а сборка складывает результат в папку dist — это обычное Svelte-приложение, и на выходе получается статический сайт: страницы, скрипты и стили. Если в зависимостях есть @sveltejs/kit, перед вами SvelteKit, и ему нужно отдельно сказать, во что собираться. Дальше различается ровно один шаг, всё остальное одинаково.
Выберите адаптер для SvelteKit#
Адаптер — это строка настройки в файле svelte.config, которая говорит сборке, что получить на выходе: набор готовых страниц или Node-приложение, отвечающее на запросы. Если серверной части нет — данные не подгружаются на сервере, форм с серверной обработкой тоже нет — берите adapter-static и включите предварительную отрисовку страниц в корневом файле разметки. Если серверная часть есть, берите adapter-node: он собирает в папку build готовый сервер, который запускается командой node build. Эту команду пропишите скриптом запуска в package.json.
Замените адаптер, написанный под чужую площадку#
В свежем проекте SvelteKit по умолчанию стоит adapter-auto: он пытается угадать площадку по окружению и везде, кроме нескольких знакомых ему сервисов, останавливает сборку сообщением, что определить окружение не удалось. Так же не соберутся адаптеры под конкретный сервис — vercel, netlify, cloudflare: они готовят проект под устройство своей площадки, которого на обычном сервере нет. Поставьте вместо них node или static: это стандартные адаптеры самой SvelteKit, они работают на любом обычном сервере, включая наш.
Оставьте выбор порта платформе#
Приложение должно слушать порт, который платформа передаёт через переменную окружения PORT, и адрес 0.0.0.0, а не localhost. Node-адаптер SvelteKit делает это сам, поэтому в коде порт задавать не нужно — важно лишь не подставлять своё число в скрипт запуска. Порт, жёстко прописанный в коде, — причина номер один, по которой публикация проходит, а ссылка открывается пустой. Для статического варианта порт не важен вовсе: там раздаются готовые файлы.
Вынесите ключи в секреты#
Токены, ключи от внешних сервисов и строку подключения к базе не держите в коде и в файле .env внутри архива. Netrun спросит эти значения при настройке проекта и подставит их в переменные окружения в зашифрованном виде. В SvelteKit серверные значения читаются из окружения, а то, что должно попасть в браузер, по правилам фреймворка называется с приставкой PUBLIC_ — иначе до клиентского кода значение просто не доедет.
Загрузите код и заберите ссылку#
Принесите проект ZIP-архивом или импортом из GitHub, в том числе приватного репозитория. Папки node_modules, dist, build и .svelte-kit класть не нужно: зависимости мы поставим сами и соберём проект на своей стороне, так что архив останется лёгким. Netrun выполнит сборку и выдаст публичную ссылку с HTTPS, а логи и статус публикации видны в кабинете в реальном времени — если сборка на чём-то споткнётся, вы увидите это сразу.
Итог: приложение на Svelte или SvelteKit открывается в интернете по адресу с HTTPS, без аренды сервера, настройки прокси и ручного сертификата. На бесплатном тарифе доступен один проект, и сайт на нём засыпает при простое, а просыпается сам, когда кто-то открывает ссылку. Чуть медленнее отвечает только первый заход после паузы. Если сайт должен быть всегда наготове и нужен свой домен, подойдёт тариф Pro; актуальные цены и лимиты видны в кабинете. Попробовать Netrun.
Частые вопросы
Чем публикация SvelteKit отличается от обычного Svelte?
Обычное Svelte-приложение на Vite собирается в набор готовых файлов, и его достаточно раздать как статический сайт. SvelteKit умеет и так, и иначе: он может собраться в готовые страницы, а может — в Node-приложение с серверной частью. Что именно получится, решает адаптер, указанный в настройках проекта.
Какой адаптер выбрать для SvelteKit?
Если сайт можно целиком отрисовать заранее и на сервере ничего считать не нужно, берите adapter-static: получится набор готовых страниц, который открывается быстрее всего. Если есть серверные маршруты, обработка форм на сервере или данные, которые нельзя отдавать браузеру, берите adapter-node. Оба варианта работают на обычном сервере и в Netrun.
Почему сборка останавливается на adapter-auto?
Этот адаптер определяет площадку по её окружению и знает только несколько известных ему сервисов. На любом другом сервере он не находит знакомых признаков и останавливает сборку с сообщением, что окружение определить не удалось. Лечится заменой на adapter-node или adapter-static в настройках проекта.
Почему при статической сборке внутренние страницы отдают 404 после обновления?
Статическая сборка кладёт на диск только те страницы, которые SvelteKit смог отрисовать заранее. Если часть маршрутов появляется уже в браузере, в настройках статического адаптера нужно включить резервную страницу (fallback): тогда любой адрес отдаёт её, а дальше маршрут разбирает само приложение. Второй вариант — включить предварительную отрисовку для всех страниц.
Нужно ли ставить Node.js, чтобы выложить SvelteKit?
Самому — нет. Со статическим адаптером на выходе обычные файлы, их раздаёт веб-сервер. С node-адаптером серверная часть действительно работает на Node.js, но устанавливать и настраивать его не требуется: Netrun распознаёт проект по package.json и поднимает всё сам.
Можно ли выложить SvelteKit вместе с базой данных?
Да. Базу можно взять внешнюю и передать строку подключения секретом, а можно поднять её рядом своим docker-compose — в одном проекте разрешено до пяти связанных сервисов. В этом случае данные лежат в томе из вашего файла и переживают обновление кода.
А React, Vue, Next.js, Nuxt, Svelte или Astro?
Да, все они работают. Загрузите исходный код с package.json — собирать проект у себя и класть готовую сборку в архив не нужно, сборка идёт у нас. Если фреймворк умеет и в готовые страницы, и в серверный режим, подойдут оба варианта: в серверном приложение должно слушать порт из переменной окружения. Одна важная деталь: значения, которые попадают в собранный фронтенд, видны любому посетителю — настоящие ключи держите на стороне сервера.
Чем Netrun отличается от Vercel и Render?
Vercel заточен под фронтенд и serverless-функции — не каждый бэкенд или Telegram-бота на нём запустишь. Render ближе по задаче, но это зарубежный сервис, где нужна зарубежная карта. Netrun запускает любой код — сайт, API или бота — принимает оплату российской картой и через СБП и поддерживает на русском.
Где указать токены и другие секретные значения?
В проекте есть вкладка «Секреты» — там задаются значения из кода, например токен от BotFather. Мы храним их в зашифрованном виде: названия переменных вы видите, сами значения не показываем никому, включая вас.
Почему мой сайт иногда засыпает?
На бесплатном тарифе сайты засыпают после простоя и просыпаются за пару секунд при первом запросе. На тарифе Pro проект работает без сна.