Как запустить SvelteKit-приложение на Ubuntu и Debian

SvelteKit-приложение – это веб-приложение, созданное на основе фреймворка SvelteKit, который расширяет возможности Svelte, добавляя готовую инфраструктуру для построения современных сайтов и сервисов. В отличие от просто Svelte – JavaScript-фреймворка, который компилирует компоненты в чистый оптимизированный код без виртуального DOM, SvelteKit предоставляет маршрутизацию, серверный рендеринг, генерацию статических сайтов и оптимизацию сборки. Благодаря этому разработчик получает единый инструмент для создания быстрых и удобных приложений с полным стеком технологий от простых лендингов до сложных динамических сервисов.

В статье разберём, как запустить SvelteKit-приложение на виртуальном сервере, работающем под управлением Ubuntu или Debian.

Как запустить SvelteKit-приложение на Ubuntu и Debian

Для запуска SvelteKit-приложения на VPS необходимо проинсталлировать как минимум два необходимых компонента:

• Node.js – среду выполнения JavaScript вне браузера (лучше, если это будет LTS-версия);
• npm (Node Package Manager) – встроенный в Node.js менеджер пакетов для установки и управления библиотеками и инструментами.

При этом, если вы используете только что заказанный VPS на Debian, то во-первых, на нём необходимо установить командную утилиту curl, которая будет применяться для загрузки файлов из сети, и которая изначально отсутствует в системе:

$ sudo apt install curl

Установка Node.js

Способы установки Node.js и Node Package Manager на Ubuntu или Debian подробно описаны в нашем справочнике. LTS-версию Node.js удобно устанавливать при помощи Node Version Manager. Для этого сначала следующей командой загрузите с GitHub и запустите установочный скрипт nvm:

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

Затем активируйте nvm в текущем сеансе:

$ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

После чего запустите установку актуальной LTS-версии Node.js:

$ nvm install --lts

По окончании установки проверьте версии Node.js и Node Package Manager, чтобы убедиться в корректном завершении процедуры:

$ node -v
$ npm -v

Создание SvelteKit-приложения

Следующий шаг – создание проекта. В нашем примере мы создаём SvelteKit-приложение, которое должно подойти для сценария, когда реальное серверное приложение работает на VPS под управлением Ubuntu или Debian. Для реализации такого сценария мы используем так называемый адаптер – специальный модуль в SvelteKit, который определяет, как и где будет разворачиваться приложение. SvelteKit сам по себе может собрать проект, но результатом будет не готовый к использованию сайт, а промежуточный код. Чтобы превратить этот код в формат, понятный конкретной среде, например, Node.js, нужен адаптер.

В SvelteKit есть несколько адаптеров. К примеру, @sveltejs/adapter-node создаёт Node.js-сервер из проекта SvelteKit, который можно запустить на виртуальном сервере.

Итак, следующей командой создайте новый SvelteKit-проект, например, в каталоге your-sveltekit-app:

$ npx sv create your-sveltekit-app

При выполнении команды запускается интерактивный мастер, который задаёт несколько вопросов для настройки нового проекта. Для создания рабочего SvelteKit-проекта с минимальной конфигурацией достаточно пройти все вопросы нажатием клавиши Enter. В результате в текущем каталоге появится приложение с базовой структурой файлов и основными настройками.

После завершения работы команды перейдите в каталог созданного проекта:

$ cd your-sveltekit-app/

Находясь в каталоге проекта, запустите команду для установки адаптера @sveltejs/adapter-node:

$ npm i -D @sveltejs/adapter-node

Чтобы подключить адаптер, откройте главный конфигурационный файл проекта:

$ nano svelte.config.js

И приведите его к виду:

import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	}
};

export default config;

После чего закройте файл с сохранением изменений и запустите команду, которая соберёт SvelteKit-приложение в готовую к запуску версию:

$ npm run build

Чтобы получить возможность подключиться к веб-интерфейсу приложения, необходимо открыть доступ к серверу через порт 3000, который слушает SvelteKit. Для этого в брандмауэр UFW добавьте разрешающее правило для TCP-порта 3000:

$ sudo ufw allow 3000/tcp

Теперь произведите пробный запуск приложения. Для чего, находясь в каталоге приложения, запустите следующую команду:

$ node build

Затем откройте браузер и перейдите на http://X.X.X.X:3000. В данном случае замените X.X.X.X на IP-адрес вашего сервера. Браузер должен открыть стандартную стартовую страницу нового SvelteKit-приложения, в котором пока нет собственного контента.

Чтобы завершить работу SvelteKit-приложения, вернитесь в терминал и нажмите Ctrl C.

Как запустить SvelteKit-приложение в качестве системного сервиса

Для того, чтобы каждый раз не запускать приложение вручную при помощи описанной выше команды, выглядит разумным настроить его работу в качестве системного сервиса. В такой конфигурации приложение будет запускаться вместе с системой и работать в фоновом режиме.

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

$ sudo nano /etc/systemd/system/sveltekit.service

В юнит-файл вставьте следующее содержимое:

[Unit]
Description=SvelteKit App
After=network.target

[Service]
Type=simple
User=your-user
WorkingDirectory=/home/your-user/your-sveltekit-app
ExecStart=/home/your-user/.nvm/versions/node/v22.20.0/bin/node build
Restart=always

[Install]
WantedBy=multi-user.target

Обратите внимание на параметр ExecStart. В нём содержится команда, при помощи которой происходит запуск SvelteKit-приложения. При этом для успешного старта создаваемой службы необходимо указать точное местоположение исполняемого файла node. Чтобы узнать его, используйте команду which:

$ which node

Вывод команды, который у вас может отличаться от приведённого ниже, вставьте в строку ExecStart по аналогии с тем, как это сделано в нашем примере.

Сохраните изменения в файле, закройте его и перезагрузите конфигурацию systemd, чтобы он перечитал новые или изменённые юнит-файлы:

$ sudo systemctl daemon-reload

Затем запустите новую службу sveltekit:

$ sudo systemctl start sveltekit

Установите её в автозагрузку:

$ sudo systemctl enable sveltekit

После чего проверьте её текущее состояние:

$ systemctl status sveltekit

Если вывод команды не содержит каких-либо сообщений об ошибках, значит, скорее всего, служба функционирует корректно.

Теперь снова откройте браузер и проверьте доступность веб-интерфейса приложения, как делали это ранее.