Как выполнить развертывание с помощью Vercel и MongoDB Atlas, даже не пытаясь

Одним из самых интересных анонсов MongoDB World 2022 является выпуск интеграции Vercel-MongoDB. Здесь мы наблюдаем постепенное упрощение и стандартизацию интеграции крупных компонентов инфраструктуры. Вы можете извлечь выгоду из огромной мощности вашего хранилища данных и хоста с минимумом архитектурной возни.

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

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

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

Для нашей демонстрации мы хотим создать приложение на основе SvelteKit, которое мы разрабатываем локально, с локальным хранилищем данных MongoDB. Затем мы хотим развернуть это приложение в Vercel и заставить его автоматически использовать кластер MongoDB Atlas в качестве хранилища данных. Это очень распространенная установка. Кстати, большая часть этого работает одинаково для React/Next или Vue/Nuxt. Базовая установка показана на рисунке 1.

Рис. 1. Архитектуры Dev и Prod для приложения Vercel-MongoDB.

Демо-приложение SvelteKit

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

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

Листинг 1. Метод load() в SvelteKit

 export async function load({ params, fetch, session, stuff }) {
    const res = await fetch('/apothegm', {
      method: "GET",
      headers: { 'content-type': 'application/json' }
    });
    return {
      props: {
        apothegms: await res.json()
      }
    };
  }

Дополнительную информацию о методе загрузки SvelteKit вы найдете здесь, но основная идея заключается в том, что мы обращаемся к внутреннему API до загрузки страницы и вставляем полученный JSON в файл. props.apothegms поле. Это поле также отображается в обычном элементе сценария, поэтому страница имеет к нему доступ с помощью строки export let apothegms;.

На внутренней стороне метод get /apothegm выглядит как в листинге 2.

Листинг 2. Получение апофег из серверной части

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

export async function get ({request}) {
  const dbConnection = await clientPromise;
  const db = dbConnection.db("apothegm");
  const collection = db.collection("apothegm");
  let apos = await collection.find({}).toArray();

  return {
    status: 200,
    headers: { 'content-type': 'application/json' },
    body: { apos }
  };
}

Листинг 2 возвращает тело, полное апотег, полученных из хранилища данных, т. е. из базы данных апотег и коллекции апотег. Этот метод во многом опирается на clientPromise объект, импортированный из lib/mongo. Давайте посмотрим на соответствующие части этого модуля в листинге 3.

Листинг 3. Помощник MongoDB /lib/mongo.js

import 'dotenv/config';
import { MongoClient } from 'mongodb';

const uri = process.env["MONGODB_URI"];
const options = {
    useUnifiedTopology: true,
    useNewUrlParser: true,
}

let client;
let clientPromise;

if (!uri) {
    throw new Error('Please set Mongo URI')
}

if (process.env['NODE_ENV'] === 'development') {
    if (!global._mongoClientPromise) {
        client = new MongoClient(uri, options)
        global._mongoClientPromise = client.connect()
    }
    clientPromise = global._mongoClientPromise
} else {

    client = new MongoClient(uri, options)
    clientPromise = client.connect()
}

export default clientPromise

Листинг 3 выполняет свою работу, создавая соединение с экземпляром MongoDB через MONGODB_URI переменная окружающей среды. Эта переменная извлекается из среды с помощью process.env["MONGODB_URI"] вызов.

Обратите внимание, что первая строка этого файла — это вызов импорта. 'dotenv/config'. Этот импорт приводит к самозагрузке библиотеки dotenv. Целью dotenv является загрузка переменных среды для приложения из файлов конфигурации (независимо от ОС). Дополнительная информация об этом здесь.

Для нашего приложения мы хотим установить для этой переменной локальный URI во время разработки и установить для нее удаленный URL-адрес MongoDB Atlas во время производства. Мы можем сделать это, предоставив файл .env, который dotenv найдет во время локальной разработки, но не в рабочей версии. Для этого мы не проверяем файл в системе контроля версий — мы добавляем его в .gitignore. Соответствующие биты из обоих файлов показаны в листинге 4.

Листинг 4. Добавляет в .env и .gitignore

// .env
MONGODB_URI="mongodb://localhost:27017

// .gitignore
.env
.env.*

Это означает, что во время разработки наше приложение попадет в локальную установку MongoDB. На этом этапе вы можете запустить приложение с помощью npm run dev и все должно работать.

Производственная установка Vercel-MongoDB

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

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

Импортируйте проект в Vercel.

Получив учетные записи, вы можете войти в Vercel, создать новый проект и импортировать код для проекта. Вот еще раз этот проект GitHub: https://github.com/MTyson/sveltekit-vercel-mongo.

После завершения импорта Vercel автоматически создаст и развернет проект. (Вздох с облегчением: никаких дополнительных работ по инфраструктуре.) Сборка пройдет успешно, но при просмотре проекта отобразится ошибка. Это потому, что нет доступного хранилища данных.

Создайте кластер MongoDB Atlas.

Теперь вы хотите создать кластер в MongoDB Atlas, который будет служить домом для ваших производственных данных. В консоли MongoDB легко создать бесплатный кластер (инструкции здесь). По пути вы также создадите пользователя базы данных.

Вернитесь в Версель, чтобы добавить интеграцию

Когда у вас будет доступный для использования кластер, следующим шагом будет добавление интеграции MongoDB в вашу учетную запись пользователя Vercel. (В корпоративных настройках вы можете добавить его в свою команду Vercel.) Перейдите на https://vercel.com/integrations/mongodbatlas и нажмите кнопку «Добавить интеграцию» вверху. Вам будет представлено модальное окно с раскрывающимся меню, и там должна появиться учетная запись, которую вы хотите использовать, как показано на экране 1 ниже.

Экран 1. Добавьте интеграцию MongoDB Atlas в Vercel

Далее вам предоставляется выбор: добавить интеграцию ко всем проектам или к конкретному. Для этой демонстрации давайте выберем «Добавить ко всем» и нажмем «Продолжить».

Временно вернулся в MongoDB Atlas.

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

Затем в диалоговом окне будет задан вопрос, в какую организацию MongoDB Atlas добавить интеграцию. Просто используйте значение по умолчанию, которое вы установили для своего пользователя.

Наконец, нажмите кнопку «Подтвердить» на последнем экране, чтобы согласиться с тем, что вам придется вручную удалить интеграцию, если вы хотите ее удалить, как показано на экране 2.

Экран 2. Подтвердите доступ организации в MongoDB Atlas

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

Экран 3. Связывание проекта Vercel с кластером MongoDB Atlas

Следующий шаг — создание моста между кластером MongoDB Atlas и проектом Vercel. Убедитесь, что вы выбрали правильный проект на стороне Vercel!

Как только это будет сделано, проект Vercel автоматически получит доступ к переменной среды (MONGODB_URL) нам нужно легко подключиться к хранилищу данных.

Вернемся в Версель для тестирования

Вернувшись в Версель, вы увидите интеграцию MongoDB Atlas на вкладке «Интеграции», как на экране 4.

Экран 4. Интеграция MongoDB Atlas в Vercel

Отсюда вы можете внести изменения в интеграцию Vercel (в том числе удалить ее, если хотите, выбрав «Управление» -> «Удалить»).

Затем мы проверяем, что проект Vercel принял новую переменную среды, которая относится к установке MongoDB Atlas. Откройте проект Vercel и нажмите «Настройки». В настройках нажмите «Переменные среды» в меню слева. Затем вы должны увидеть MONGODB_URI там указана переменная, как на экране 5.

Экран 5. Переменные среды в проекте Vercel

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

Теперь, если вы щелкните проект, чтобы просмотреть его, вы увидите, что он работает с данными, полученными из кластера Atlas, как на экране 6.

Экран 6. Запуск в проде с интеграцией Vercel-MongoDB Atlas

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

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