Создание приложения MongoDB с помощью React и Azure Cosmos DB

  • Применяется к: ✅ MongoDB

Область применения: Mongodb

Это важно

Вы хотите перенести существующее приложение MongoDB или использовать функции языка запросов MongoDB (MQL)? Рассмотрим Azure DocumentDB.

Вы ищете решение для баз данных для крупномасштабных сценариев с соглашением об уровне обслуживания (SLA) с доступностью 99,999%, мгновенным автомасштабированием и автоматическим переключением на резервные ресурсы в нескольких регионах? Рассмотрим Azure Cosmos DB для NoSQL.

В этом многосерийном видеоуроке показано, как создать приложение для отслеживания героев на React. Приложение использует Node и Express для сервера, подключается к базе данных Azure Cosmos DB, настроенной с помощью API Azure Cosmos DB для MongoDB, а затем подключает фронтенд на React к серверной части приложения. В этом руководстве также демонстрируется, как реализовать масштабирование с использованием метода point-and-click Azure Cosmos DB на портале Azure и как развернуть приложение в сети Интернет, чтобы любой пользователь мог отслеживать своих любимых героев.

Azure Cosmos DB поддерживает совместимость коммуникационных протоколов с MongoDB, позволяя клиентам использовать Azure Cosmos DB вместо MongoDB.

В этом руководстве из нескольких частей рассматриваются следующие задачи:

  • Введение
  • настройка проекта;
  • создание пользовательского интерфейса с помощью React;
  • создание учетной записи Azure Cosmos DB с помощью портала Azure;
  • подключение к Azure Cosmos DB с помощью Mongoose;
  • добавление в приложение операций React: создания, обновления и удаления.

Хотите создать такое же приложение с помощью Angular? См. серию видеоруководств по Angular.

Предварительные требования

  • Node.js: v14.x или более поздней версии (рекомендуется использовать LTS). Проверьте с помощью node --version.
  • Средство тестирования HTTP: Бессонница, curlVisual Studio или PowerShell Invoke-RestMethod. Проверьте доступность, запустив средство один раз (например, curl --version).

Готовый проект

Готовое приложение можно скачать с сайта GitHub.

Введение

В этом видеоролике Берк Холланд (Burke Holland) познакомит вас с Azure Cosmos DB и расскажет о приложении, которое создается в этой серии видеоруководств.
Проверка успешности. Вы понимаете общую архитектуру приложения (пользовательский интерфейс React, Node/Express API, Azure Cosmos DB для MongoDB).

Настройка проекта

В этом видеоролике показано, как настроить использование Express и React в одном проекте. После этого Берк подробно опишет код проекта.
Проверка успешности. Проект выполняется локально без ошибок с помощью npm start (или эквивалентного скрипта запуска).

Построение пользовательского интерфейса

В этом видеоролике показано, как создать пользовательский интерфейс приложения с помощью React.
Проверка успешности: пользовательский интерфейс React отображается в браузере и отображает макет списка героев.

Примечание.

CSS-файл, который упоминается в этом видеоролике, можно найти в репозитории GitHub react-cosmosdb.

Подключение к Azure Cosmos DB

В этом видеоролике показано, как создать учетную запись Azure Cosmos DB на портале Azure, установить пакеты MongoDB и Mongoose и подключить приложение к новой учетной записи с помощью строки подключения Azure Cosmos DB.

Пример: подключение к Mongoose

const mongoose = require("mongoose");

mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.on("connected", () => {
  console.log("Connected to Azure Cosmos DB for MongoDB");
});

Проверка. Запустите приложение и убедитесь, что журналы Connected to Azure Cosmos DB for MongoDBконсоли.

Читать и создавать героев в приложении

В этом видео показано, как считывать героев и создавать героев в базе данных Azure Cosmos DB, а также как протестировать эти методы с помощью программы тестирования HTTP и пользовательского интерфейса React.
Проверка успешности. Создание героя возвращает HTTP 201 (или 200), а новый герой появится в списке пользовательского интерфейса.

Удаление и обновление героев в приложении

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

Завершение создания приложения

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

Очистка ресурсов

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

  1. В меню слева на портале Azure щелкните Группы ресурсов, а затем выберите имя созданного ресурса.
  2. На странице группы ресурсов щелкните Удалить, в текстовом поле введите имя ресурса для удаления и щелкните Удалить.

Следующие шаги

Из этого руководства вы узнали, как выполнять такие задачи:

  • создание приложения с помощью React, Node, Express и Azure Cosmos DB;
  • Создание учетной записи Azure Cosmos DB
  • подключение приложения к учетной записи Azure Cosmos DB;
  • Тестирование приложения с помощью программы тестирования HTTP
  • Запустите приложение и добавьте героев в базу данных.

Вы можете перейти к следующему руководству, из которого вы узнаете, как импортировать данные MongoDB в Azure Cosmos DB.

Перенос данных MongoDB в Azure Cosmos DB

Пытаетесь планировать ресурсы для миграции в Azure Cosmos DB? Для планирования ресурсов можно использовать сведения об имеющемся кластере базы данных.

  • Last updated on