Продолжаем серию статей про установку сайта на Sveltekit на свой собственный VDS. Мы будем добиваться автоматизации, соответствующей уровню какого-нибудь Версела или Хероку. Такая автоматизация позволит разворачивать наш сайт на своем хостинге со всеми последними изменениями при обычном пуше проекта в Гит. Никаких танцев с бубном, лишних программ на компьютере, финансовых переплат и всякого такого. В этой статье мы создадим проект, добавим в него Гит, изменим ему конфигурацию и добавим два волшебных файла. Поехали!

Создаем проект Svelte

Вкратце рассмотрим этот момент, поскольку создать у себя на локальном компьютере проект на Svelte не сложно. Для начала убедитесь, что у вас установлен NodeJS и npm (можно использовать и другой менеджер пакетов). Используйте для работы свой любимый редактор кода. Svelte рекомендует VS Code с установленным официальным плагином, облегчающим работу с фреймворком.

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

Командная строка
npm create svelte@latest my-app-svelte
cd my-app-svelte
npm install
npm run dev

После запуска первой команды Svelte создаст вам папку с названием my-app-svelte и проведет вас через ряд опций - использовать ли Typescript, линтинг и тому подобное. В пункте Which Svelte app template? можно выбрать demo-app чтобы на нашем сайте было хоть что-нибудь, а не просто черный текст на белом фоне. Последующие команды переносят нас в папку проекта, устанавливают все зависимости, необходимые для функционирования приложения и запускают его. Сайт можно открыть по адресу localhost:5173.

Как настроить проект на SvelteKit для хостинга на VDS

На этом месте принято рассказывать о том, что из себя по структуре представляет проект на Svelte. Но у меня есть хорошая статья на эту тему. Рекомендую ознакомиться.

Как устроен этот сайт. Структура проекта на Sveltekit

Статья будет полезна тем, кто начинает работать со Svelte или еще выбирает свой первый фреймворк для изучения

logo/blog/kak-ustroen-etot-sait

Адаптируем проект

Как вы возможно знаете, у Svelte есть замечательные инструменты, позволяющие работать сайтам на этом фреймворке почти везде. Поскольку мы будем хостить наш сайт на VDS с установленным NodeJS, нам понадобится node-адаптер. Установим его командой npm i -D @sveltejs/adapter-node. После этого нам нужно открыть файл svelte.config.js и добавить в него пару строк

svelte.config.js
import sveltePreprocess from 'svelte-preprocess'
import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: sveltePreprocess(),

    kit: {
	    adapter: adapter({ out: 'build' })
    }
};

В начале мы импортируем нужный нам адаптер, а затем указываем его в опциях sveltekit. Директива out: 'build' укажет адаптеру, что папкой где будет собираться проект должна быть папка build.

Команда npm run build запустит сборку проекта, а с помощью команды npm run preview можно посмотреть как ваш сайт будет выглядеть в собранном состоянии. Есть разница в работе сайта в режиме разработчика и в производственном режиме, поэтому иногда и на локалке полезно собирать и просматривать свой проект.

В гит

Теперь добавим проект в Гит или Гит добавим в проект. Сначала убедитесь, что гит установлен на вашем компьютере. Идем в гитхаб и создаем репозиторий. Назовем его также как и папку - my-app-svelte, если нужно напишем описание проекта, добавим readme-файл и так далее. Репозиторий можно сделать публичным или приватным, это не повлияет на сопсобность нашего проекта деплоится на сервер. Затем вернемся на свой локальный компьютер и находясь в папке проекта в командной строке пропишем следующее:

Командная строка
git init
git remote add origin https://github.com/[github_username]/my-app-svelte.git
git branch -M main

Этими командами мы инициализируем Git в своем проекте, подключаем у нему удаленный репозиторий на Гитхабе и создаем главную ветку. У вас в проекте появится файл .gitignore. В целом здесь ничего необычного и сложного. Наверное, вы такое проделывали не один раз.

Не забудем сделать первый коммит и отправить файлы в репозиторий:

Командная строка
git add .
git commit -m "первый коммит"
git push origin main

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

Добавляем Actions

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

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

Для начала создадим в корне нашего проекта папку с именем .github, внутри которой добавим еще одну папку workflows. Затем создадим в папке workflows файл build.yml со следующим кодом внутри:

my-app-svelte/.github/workflows/build.yml
name: build + publish

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2
      - name: Publish Docker Image
        uses: matootie/github-docker@v3.1.0
        with:
          accessToken: ${{ github.token }}
          containerRegistry: true
      - name: Deploy on CapRover
        uses: caprover/deploy-from-github@v1.1.2
        with:
          server: https://app.your-app-url.com/
          app: 'my-app-svelte'
          token: '${{ secrets.APP_TOKEN }}'
          image: 'ghcr.io/[github_username]/my-app-svelte:latest'

Обратите внимание на выделенные в коде выше строки. На 18 строке указана гитхаб-переменная токена нашего приложения, которую мы будем создавать в одной из следующих статей. На 23 строке прописан URL-адрес нашего приложения - по сути старший домен(хотя он и третьего уровня) для создания поверх него остальных поддоменов прилодения. На 24 строке - имя приложения, соответствующее названию проекта на Гитхабе. На 25 строке - еще одна переменная, значение которой мы получим из нашего приложения в интерфесе Капровера, а на 26 строке - адрес образа Docker, который мы будем хранить в реестре контейнеров на Гитхабе, что очень удобно. Из него наше приложение будет выхватывать то, что ему нужно будет развернуть на хостинге. Не забудьте заменить [github_username] на свое имя на Гитхабе. В остальном этот файл описывает последовательность шагов, начиная с проверки репозитория и заканчивая деплоем образа в Капровер.

Настраиваем контейнер

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

Создаем файл Dockerfile в корне проекта на локальном компьютере и прописываем в него вот такой код:

my-app-svelte/Dockerfile
FROM node:19.7-alpine AS sk-build
WORKDIR /usr/src/app

ARG TZ=Europe/Stockholm

COPY . /usr/src/app
RUN apk --no-cache add curl tzdata
RUN cp /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
RUN npm install
RUN npm run build

FROM node:19.7-alpine
WORKDIR /usr/src/app

ARG TZ=Europe/Stockholm
RUN apk --no-cache add curl tzdata
RUN cp /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

COPY --from=sk-build /usr/src/app/package.json /usr/src/app/package.json
COPY --from=sk-build /usr/src/app/package-lock.json /usr/src/app/package-lock.json

COPY --from=sk-build /usr/src/app/build /usr/src/app/build

EXPOSE 3000
CMD ["node", "build/index.js"]

В этом коде прописаны инструкции, которые потребуются Docker для создания контейнера. Сначала будет создан базовый образ на NodeJS(именно поэтому мы устанавливали в проекте node-адаптер). Затем, если брать важное, в контейнер будут установлены зависимости из вашего проекта, а затем произойдет его билд. После этого важные файлы будут скопированы внутрь образа и на этом ваш проект должен запедлоиться. Примерно так происходит на облачных сервисах с автоматическим развертыванием проектов. Ну, то есть примерно такой сервис мы создаем для себя любимого своими же руками. При этом знать нюансы Докера или Гитхаба не нужно, поскольку эти файлы делают все за вас.

Сам Docker и все остальное, нужное нам для проекта, мы будем устанавливать на наш VDS. Управлять проектом на сервере мы будем с помощью графического интерфейса Caprover. Caprover или Капровер - это бесплатный и опенсорсный PaaS (Platform as a Service, платформа как услуга) - то есть ваш личный облачный «движок» для хранения и использования ресурсов вашего приложения, по сути готовая платформа для запуска своего кода во всемирной паутине.

Пока мы работаем исключительно на локальном компьютере, но добавив два файла - build.yml и Dockerfile - уже сделали огромный шаг вперед. Благодаря этим файлам мы сможем разворачивать Docker-образ после пуша проекта в Гитхаб на нашем хостинге. Осталось только завести этот самый хостинг. В следующей статье мы этим и займемся. Прикупим VDS, настроим его, поставим туда Docker, Caprover, подключим домен и попробуем всем этим воспользоваться. До встречи!