Станьте бессерверным с помощью Vercel, SvelteKit и MongoDB

Облако продолжает развиваться в направлении более высоких уровней абстракции. Платформы автоматического развертывания и хостинга, интерфейсные платформы и серверные базы данных становятся все более мощными и сложными, а их интеграция становится проще, чем когда-либо. В этой статье показано, как интегрировать Vercel, SvelteKit и MongoDB для полнофункциональной бессерверной разработки. Каждая из этих технологий лидирует в своей области. Используя их вместе, разработчики могут достичь впечатляющих возможностей при небольшом объеме работы.

Маленькие биты: пример применения

Для этой демонстрации мы собираемся создать приложение, которое создает объект с двумя полями для хранения в базе данных. С точки зрения пользователя приложение представляет собой форму с двумя полями: одно содержит апофему, а другое — ее автора. (Ан апофема это маленькая мудрость.)

Наша цель – объединить элементы этой мощной головоломки — Vercel, SvelteKit и MongoDB — чтобы пройти весь путь примера приложения от разработки до производства.

Для начала мы будем использовать SvelteKit для создания внешнего вида в Svelte. Это представление будет отправлять запросы на внутреннюю конечную точку. Подобно Express.js, SvelteKit рассматривает конечные точки как абстракции контекста запроса-ответа.

Эта абстракция упростит развертывание в Vercel в качестве бессерверного контекста. Конечная точка Vercel просто помещает полученные данные в коллекцию MongoDB Atlas, облачной базы данных как услуги.

Эта настройка отлично подойдет для наших нужд разработки. Когда у нас будет интерфейс, мы создадим репозиторий на GitHub и вернем проект. Затем мы можем использовать Vercel, чтобы получить наш проект и развернуть его на общедоступном IP-адресе.

Полноценная разработка: SvelteKit

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

Для начала давайте изменим главную страницу приложения, включив в нее простую форму. Редактировать /src/routes/index.svelte с изменениями, представленными в листинге 1.

Листинг 1. Изменение главной страницы приложения (index.svelte)

<script context="module">
// export const prerender = true; Comment this out - this is now a dynamic page
</script>
<script>
  import Counter from '$lib/Counter.svelte';
  async function onSubmit(e) {
    const formData = new FormData(e.target);
    const data = {};
    for (let field of formData) {
      const [key, value] = field;
      data[key] = value;
    }
    console.log("formData: " + formData);
    const res = await fetch("https://www.infoworld.com/", {
      method: 'POST',
      body: JSON.stringify(data)
    })
    const json = await res.json()
    result = JSON.stringify(json)
  }
</script>
<svelte:head>
       <title>Home</title>
</svelte:head>
<section>
  <h1>
    <!-- remains the same ... -->       
  </h1>
  <form on:submit|preventDefault={onSubmit}>
    <label for="apothegm">Apothegm</label>
    <input type="text" name="apothegm" id="apothegm"/>
    <label for="author">Author</label>
    <input type="text" name="author" id="author"/>
    <button type="submit">Submit</button>
  </form>
       <h2>
               try editing <strong>src/routes/index.svelte</strong>
       <!-- rest is the same ...  -->  

Довольно index.svelte остается такой же. Обратите внимание, что я закомментировал экспорт модуля в заголовке страницы, чтобы он больше не отображался предварительно. (Одной из суперспособностей SvelteKit является его способность полностью предварительно отображать страницы, которые не затрагивают серверную часть. Нам придется отключить эту функцию, потому что наша страница попадет на серверную часть.)

Остальные изменения посвящены обеспечению элемента формы двумя полями. Когда форма будет отправлена, мы преобразуем ее в JSON и отправим через POST в корневую конечную точку («/») посредством выборки.

Обработка функции публикации

Вызов POST API будет обрабатываться на внутренней стороне src/routes/index.js, какой бы функцией она ни жила под именем «post». Давайте обратимся к этому сейчас. В листинге 2 показано тело index.js.

Листинг 2. index.js

import clientPromise from '../lib/mongo';

export async function post ({request}) {
 const dbConnection = await clientPromise;
 const db = dbConnection.db();
 const collection = db.collection('apothegm');
 let apothegm = await request.json();
 const dbApothegm = await collection.insertOne(apothegm);
 return { status: 200, body: { dbApothegm } }
}

Первое, что мы видим в листинге 2, — это импорт во вспомогательную библиотеку, которую мы рассмотрим чуть позже. Далее идет сама функция post, которая принимает аргумент запроса посредством деструктуризации из фреймворка SvelteKit. Этот объект запроса содержит все, что нам нужно для обработки HTTP-запроса.

В нашем случае мы открываем соединение с базой данных с помощью помощника базы данных, получаем указатель на коллекцию «apothegm», затем получаем содержимое тела интерфейса через метод await request.json() метод.

Наконец, метод помещает тело запроса в коллекцию базы данных и отправляет обратно статус «все хорошо» 200.

Коннектор MongoDB

Теперь давайте посмотрим на /src/lib/mongo.js файл, показанный в листинге 3, который мы используем для обращения к базе данных. По сути, это канонический помощник, указанный в документации MongoDB, с небольшими изменениями. Также обратите внимание, что в целях демонстрации я решил включить URL-адрес базы данных непосредственно в файл. Не делайте этого в реальной жизни! Это вопиющая дыра в безопасности. Для реального приложения вам потребуется внедрить URL-адрес в переменную среды.

Листинг 3. Подключение к MongoDB (mongo.js)

import dotenv from 'dotenv';
dotenv.config();
import { MongoClient } from 'mongodb';
//const uri = process.env['MONGODB_URI'];
// **Don’t do this in real life**: 
const uri = "mongodb+srv://<username>:<password>@cluster0.foobar.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";

const options = {
   useUnifiedTopology: true,
   useNewUrlParser: true,
}
let client
let clientPromise
if (!uri) {
   throw new Error('Please add your Mongo URI to .env.local')
}
if (process.env['NODE_ENV'] === 'development') {
   // In development mode, use a global variable
   // so that the value is preserved across module reloads
   // caused by HMR (Hot Module Replacement).
   if (!global._mongoClientPromise) {
       client = new MongoClient(uri, options)
       global._mongoClientPromise = client.connect()
   }
   clientPromise = global._mongoClientPromise
} else {
   // In production mode, it's best to
   // not use a global variable.
   client = new MongoClient(uri, options)
   clientPromise = client.connect()
}
// Export a module-scoped MongoClient promise.
// By doing this in a separate module,
// the client can be shared across functions.
export default clientPromise;

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

MongoDB Atlas: база данных как услуга

MongoDB — это документо-ориентированная база данных, одно из первых и наиболее известных хранилищ данных NoSQL. Atlas — это управляемая облачная служба MongoDB или база данных как услуга (DBaaS). MongoDB Atlas позволяет вам получить доступ к базе данных, размещенной на MongoDB, и использовать ее через API.

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

Далее вас попросят назвать новый проект, который я назвал apothegm-foundry. Вам также будет предложена возможность добавлять пользователей и разрешения, но вы можете игнорировать это предложение, поскольку вы были добавлены автоматически. Подтвердите проект, нажав Создать проект.

Добавить базу данных

Проект — это ведро для баз данных. Теперь давайте добавим базу данных, нажав Создайте базу данных. Здесь вам будет предоставлен выбор уровня. Для наших целей подойдет бесплатная общая база данных. Когда будете готовы, нажмите Создавать.

Далее вам будет предложен ряд вариантов облачных провайдеров и регионов. На данный момент вы можете принять значение по умолчанию, но приятно видеть, что мы можем выбрать Amazon Web Services (AWS), Google Cloud Platform (GCP) или Microsoft Azure. Нажмите Создать кластер.

Далее вам предлагается создать пользователя для базы данных. Вы можете создать комбинацию имени пользователя и пароля или пользователя на основе сертификата. Для удобства мы возьмем имя пользователя и пароль. Выберите комбинацию, которую вы запомните, и нажмите Создать пользователя. Это имя пользователя и пароль, которые вы введете. mongo.js.

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

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

mongodb+srv://<username>:<password>@cluster0.foobar.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

Добавьте имя пользователя и пароль, которые вы только что выбрали, затем вернитесь в mongo.js файл и добавьте туда строку. Теперь, когда вы используете форму в приложении Svelte и нажимаете Представлять на рассмотрениевы сможете перейти в консоль MongoDB Atlas и увидеть Просмотреть коллекцию кнопка.

Вы должны увидеть запись, отражающую то, что вы ввели в форму, аналогично тому, что показано в листинге 4.

Листинг 4. Запись Apothegm в MongoDB

1.	_id:6228f438e294d2c79754b64f
2.	apothegm:"Form and emptiness are one"
3.	author:"Unknown"

Итак, среда разработки работает. Далее — развертывание.

Развертывание приложения: GitHub и Vercel.

Прежде чем мы сможем развернуть приложение с помощью Vercel, нам необходимо создать репозиторий исходного кода в GitHub. Вам понадобится бесплатная учетная запись GitHub. Предполагая, что он у вас есть, следуйте инструкциям по созданию нового репозитория. Затем вернитесь в командную строку и заполните репозиторий кодом вашего приложения. (Обратите внимание, что в стартер SvelteKit уже добавлен .gitignore file.) Как только исходный код приложения будет проверен в основной ветке, вы будете готовы посетить Vercel.

Vercel упрощает регистрацию бесплатной учетной записи «Хобби». Я использовал свою учетную запись GitHub для доступа к Vercel по системе единого входа (единый вход). Получив учетную запись, следуйте инструкциям, чтобы подключить свою учетную запись GitHub и предоставить разрешение Vercel.

Вам также потребуется предоставить Vercel разрешение внутри GitHub для определенного репозитория или всех репозиториев, в которых вы размещаете код. Просто откройте раскрывающийся список в профиле своей учетной записи и нажмите Настройкизатем прокрутите вниз влево Интеграции -> Приложения вариант и щелкните его. Теперь прокрутите главную страницу вниз до Доступ к репозиторию раздел. Там вы можете предоставить Vercel доступ либо к конкретному репозиторию (как показано на рисунке 1), либо ко всем из них.

ИДГ

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

Теперь перейдите в Vercel, и вы увидите свое приложение на панели инструментов. Нажмите на него, и откроется сводка, которая должна выглядеть примерно так, как показано на рисунке 2.

ИДГ

Вы можете щелкнуть и открыть запущенное приложение по URL-адресу, например sveltekit-vercel-mongo.vercel.app.

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

Заключение

В этом стеке есть три компонента, и все они работают вместе довольно гладко. Vercel проделала большую работу за кулисами, чтобы развернуть производство. Помимо прочего, обратите внимание, что его можно настроить на автоматическое развертывание новых отправок в основную ветку.

Также обратите внимание, что доступны журналы сборки, а также журналы работающего приложения. Серверная часть приложения SvelteKit была развернута как бессерверная функция, поэтому ее логи доступны по нажатию кнопки Развертывания -> Функции.

Очевидно, что предстоит проделать работу по превращению этого демонстрационного приложения в нечто, что вы действительно сможете использовать (например, вам потребуются разные базы данных для разработки и производства). Что интересно, у вас уже есть мощная полнофункциональная платформа (SvelteKit), конвейер развертывания (Vercel) и хранилище данных (MongoDB). И все это работает на инфраструктуре, которая может масштабироваться в широких пределах.