Как развернуть приложение SvelteKit?

В этой статье вы создадите базовое приложение для генератора цитат с помощью SvelteKit и разместите его на хостинге с помощью Back4app Containers.

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

В 2020 году SvelteKit был создан Rich Harris, создателем Svelte, а в октябре 2022 года Rich Harris и его команда присоединились к Vercel.

При развертывании приложения SvelteKit полезно использовать контейнеры Back4app Containers. Back4app Containers – это платформа, которая позволяет разработчикам развертывать и управлять контейнерными приложениями на инфраструктуре Back4app.

Это облачный сервис, обеспечивающий простой и масштабируемый способ запуска контейнерных приложений в производстве.

Что такое SvelteKit?

SvelteKit – это веб-фреймворк для создания производительных и надежных веб-приложений. Он построен на основе Svelte, легкого и реактивного JavaScript-фреймворка.

SvelteKit предоставляет ряд функций, облегчающих разработку и развертывание веб-приложений, включая рендеринг на стороне сервера (SSR), генерацию статических сайтов (SSG), маршрутизацию на стороне клиента и т. д.

Он также предлагает множество преимуществ, таких как простота, гибкость, масштабируемость, производительность и т. д. Продолжайте читать, чтобы узнать, как развернуть приложение SvelteKit.

Преимущества SvelteKit

Вот некоторые преимущества использования фреймворка SvelteKit:

Легкая кривая обучения

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

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

SvelteKit имеет легкую кривую обучения, особенно если вы знакомы с HTML, CSS и JavaScript. Его синтаксис прост и интуитивно понятен, что облегчает понимание и создание веб-приложений.

Поддержка TypeScript

TypeScript – это статически типизированный супернабор JavaScript, завоевавший популярность в мире веб-разработки. Он привносит в проекты JavaScript сильную типизацию, ясность кода и улучшенные инструменты.

SvelteKit имеет отличную поддержку TypeScript, что позволяет писать безопасный для типов код и выявлять потенциальные ошибки во время разработки. Это повышает качество кода, удобство сопровождения и улучшает взаимодействие в командах разработчиков.

Маршрутизация на основе файлов

Маршрутизация на основе файлов – это современная функция веб-разработки, которая упрощает организацию и управление маршрутами в вашем приложении. Она работает за счет использования управления файлами для определения маршрутов вместо использования сторонних библиотек.

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

Сообщество и экосистема

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

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

Ограничения SvelteKit

Хотя SvelteKit – это мощный фреймворк для создания эффективных веб-приложений, у него есть некоторые ограничения, о которых вам следует помнить. К ним относятся:

Ограничения рендеринга на стороне сервера (SSR)

Рендеринг на стороне сервера (SSR) – это технология, которая позволяет веб-приложениям рендерить содержимое на сервере и отправлять клиенту предварительно отрендеренный HTML. SSR имеет ряд преимуществ, включая улучшение SEO, ускорение начальной загрузки страниц и лучшую производительность на низкоуровневых устройствах.

SvelteKit поддерживает рендеринг на стороне сервера. Однако в нем отсутствуют некоторые продвинутые функции SSR, доступные в других фреймворках, такие как тонкий контроль над рендерингом на стороне сервера или поддержка потокового SSR.

Ограниченная оснастка

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

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

Ограниченная экосистема

Ограниченная экосистема – одно из ограничений SvelteKit, и это может повлиять на опыт разработки и доступный вам выбор. По сравнению с более известными фреймворками, SvelteKit имеет меньшую экосистему библиотек, инструментов и плагинов.

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

Размер сообщества

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

Хотя сообщество SvelteKit быстро растет, оно все еще меньше, чем сообщества других крупных фреймворков, таких как React и Vue.js.

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

Варианты развертывания SvelteKit

Приложения SvelteKit можно развернуть на различных платформах, включая инфраструктуру как сервис (IaaS) и контейнер как сервис (CaaS).

Инфраструктура как услуга (IaaS)

Платформы Infrastructure as a Service (IaaS) – это облачные вычислительные сервисы, предоставляющие виртуализированные вычислительные ресурсы через интернет. Эти ресурсы включают виртуальные машины, системы хранения данных, сети и другие фундаментальные компоненты.

Платформы IaaS предлагают гибкий и масштабируемый способ доступа к ИТ-инфраструктуре и управления ею без вложений в физическое оборудование и его обслуживания.

Они также предоставляют управляемые услуги, резервное копирование и аварийное восстановление, безопасность и соответствие нормативным требованиям, а также обеспечивают экономическую эффективность в соответствии с моделью ценообразования “оплата по факту”.

Некоторые примеры платформ IaaS, которые можно использовать для развертывания приложений SvelteKit, включают:

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

Контейнер как услуга (CaaS)

Платформы Container as a Service (CaaS), также известные как платформы для управления контейнерами или платформы для оркестровки контейнеров, представляют собой облачные сервисы, упрощающие развертывание, масштабирование, управление и оркестровку контейнерных приложений.

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

Вы можете развернуть свои приложения SvelteKit с помощью CaaS-платформ. Некоторые из этих платформ включают:

• Docker
• Kubernetes
• Back4App

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

Процесс развертывания

Используя платформу Back4app CaaS, развертывание приложения SvelteKit представляет собой простой и упорядоченный процесс, который имеет множество преимуществ.- Back4app’s CaaS управляет базовой инфраструктурой, поэтому вы можете сосредоточиться на создании своих приложений.

Что такое контейнеры Back4app?

Back4App Containers, также известная как Back4App CaaS (Containers as a Service), – это функция, предоставляемая компанией Back4App, которая позволяет разработчикам развертывать и управлять контейнерами Docker в облачной среде, предоставляемой компанией Back4App.

Это управляемое решение для хостинга контейнеров, которое упрощает развертывание и управление контейнерами Docker в облаке.

Контейнеры Back4app Containers обеспечивают масштабируемость, гибкость и интеграцию с другими сервисами Back4App, что делает их подходящими для широкого спектра приложений и сервисов.

Это отличный выбор для тех, кто хочет использовать контейнеризацию в своих проектах и при этом минимизировать сложность управления инфраструктурой.

Введение в проект

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

Чтобы создать приложение SvelteKit, выполните следующую команду в терминале:

npm create svelte@latest quote-generator

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

Например:

Как видно на изображении выше, проект генератора цитат будет использовать синтаксис TypeScript, ESLint для проверки кода и Prettier для форматирования кода.

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

cd quote-generator
npm install

После установки необходимых зависимостей откройте проект в вашей любимой IDE и начните сборку приложения.

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

При создании приложения первое, что вы делаете, – это определяете глобальные стили и макет приложения. Чтобы определить глобальные стили приложения, создайте папку styles в каталоге src и добавьте в нее файл global.css.

В файле global.css напишите следующие строки кода:

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

button{
    background-color: #333333;
    color: #e2e2e2;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color:  #28282B;
    color: #333333;
}

Приведенный выше блок кода устанавливает некоторые базовые стили для вашего приложения. Он импортирует шрифт Montserrat из Google Fonts.

Он также применяет стили по умолчанию для всех элементов, центрирует содержимое на теле и стилизует элемент кнопки в состояниях по умолчанию и при наведении.

После того как вы определили глобальные стили для своего приложения, необходимо применить их к приложению.

Для этого вам нужен маршрут макета. SvelteKit предоставляет файл +layout.svelte, чтобы помочь вам определить макеты в вашем приложении. Вы можете определить макет вашего приложения, добавив файл +layout.svelte в каталог src/routes.

В файле +layout.svelte импортируйте файл global.css, чтобы применить глобальные стили к приложению.

Например, так:

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

Элемент slot создает пространство для вставки содержимого страницы. При отображении страницы приложение заполняет элемент slot содержимым страницы, делая его видимым в макете.

В каталоге src/lib вашего проекта создайте файл Card.svelte. Это компонент Card, который вы будете использовать для отображения данных, получаемых из API котировок.

Компонент Card должен выглядеть следующим образом:

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

В теге script компонента Card определены два реквизита – author и content. Оба они имеют тип string с начальными значениями пустых строк.

Элемент main определяет шаблон компонента. Шаблон включает элемент h4, который отображает значение свойства author, и элемент p, который отображает значение свойства content. Наконец, тег style содержит свойства и значения CSS, которые придают компоненту стиль.

Теперь импортируйте и отрендерите компонент Card в файле +page.svelte. Это главный маршрут, который отображается при рендеринге приложения.

В файле +page.svelte вы получите данные из API котировок и передадите их компоненту Card с помощью его реквизитов.

Например, так:

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

<style>
    main{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    h1{
        margin-block-end: 0.8rem;
    }
</style>

Приведенный выше блок кода получает данные из API котировок с помощью функции fetchQuote, а затем присваивает полученные данные переменной quote.

Передача функции fetchQuote в хук onMount гарантирует, что она будет запущена при монтировании компонента (т.е. при его первоначальном рендеринге).

Компонент Card принимает значения свойств author и content из объекта цитаты и отображает их. При нажатии на кнопку запускается функция fetchQuote для получения другой случайной цитаты для отображения.

В приведенном выше блоке кода используется компонент Icon из пакета @iconify/svelte. Чтобы использовать этот компонент, необходимо сначала установить пакет @iconify/svelte, выполнив следующую команду в каталоге проекта на терминале:

npm install --save-dev @iconify/svelte

После установки пакета @iconify/svelte запустите свое приложение на сервере разработки, чтобы увидеть его. Это можно сделать, выполнив следующую команду в терминале:

npm run dev

Выполнение приведенной выше команды запустит сервер разработки на http://localhost:5173/. Откройте ссылку в веб-браузере, чтобы увидеть ваше приложение.

Приложение должно выглядеть следующим образом:

Докеризация приложения

Прежде чем развернуть приложение на платформе Back4app CaaS, его необходимо докеризировать. Для докеризации приложения SvelteKit сначала нужно установить адаптер узлов Svelte.

Вы можете установить адаптер узла, выполнив следующую команду в терминале:

npm i -D @sveltejs/adapter-node

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

После установки пакета замените первую строку кода в файле svelte.config.js на код, приведенный ниже:

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

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

Например, так:

node_modules
.svelte-kit
build
public

После указания файлов и каталогов, которые должны быть исключены. Создайте файл Docker с именем Dockerfile в корневом каталоге проекта.

В Dockerfile добавьте следующие строки кода:

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

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

Теперь вы можете собрать докер-образ вашего приложения, выполнив следующую команду в терминале:

docker build -t quote-generator .

Развертывание приложения

После докеризации приложения и размещения его в репозитории GitHub вы можете развернуть его на Back4app. Для этого создайте учетную запись Back4app, если у вас ее еще нет.

Чтобы создать учетную запись Back4app, выполните следующие действия:

1. Посетите веб-сайт Back4app.
2. Нажмите на кнопку “Зарегистрироваться”.
3. Заполните форму регистрации и отправьте ее.

После создания учетной записи Back4app войдите в свой аккаунт на сайте Back4app и создайте новое приложение. Это можно сделать, нажав на кнопку “Новое приложение” в правом верхнем углу экрана.

Выберите опцию “Контейнер как сервис”. После выбора этой опции сайт перенаправит вас на другую страницу, где вы должны будете связать свой аккаунт GitHub с Back4app.

После того как вы связали свой аккаунт GitHub с Back4app, выберите репозиторий вашего приложения для развертывания.

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

После успешного развертывания приложения Back4app предоставит вам ссылку для доступа к приложению в вашем веб-браузере.

Заключение

В заключение следует отметить, что развертывание приложения SvelteKit с помощью CaaS-платформы Back4pp упрощает разработку. Процесс очень прост.

Он включает в себя создание приложения, докеризацию приложения, размещение приложения в репозитории GitHub и, наконец, развертывание приложения.

Если вы рассматриваете возможность развертывания приложений SvelteKit, платформа Back4app CaaS. представляет собой масштабируемое и экономически эффективное решение.

Если вам понравилась эта статья, вы также можете прочитать статью Как создать приложение SvelteKit с помощью ChatGPT.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ