Доступ к данным в Azure Cosmos DB с помощью Mongoose с Статические веб-приложения Azure

Mongoose — это самый популярный клиент ODM для Node.js. Mongoose позволяет разрабатывать структуру данных и применять проверку, а также предоставляет все средства, необходимые для взаимодействия с базами данных, поддерживающими API MongoDB. Cosmos DB поддерживает необходимые API MongoDB и доступен в качестве серверного сервера в Azure.

Необходимые компоненты

• Учетная запись Azure. Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.
• Учетная запись GitHub.
• Бессерверная учетная запись Cosmos DB. С бессерверной учетной записью вы платите только за ресурсы по мере их использования и избегайте создания полной инфраструктуры.

1. Создание бессерверной базы данных Cosmos DB

Выполните следующие действия, чтобы создать бессерверную базу данных Cosmos.

1. Войдите на портал Azure.
2. Выберите Создать ресурс.
3. Введите Azure Cosmos DB в поле поиска.
4. Выберите Azure Cosmos DB.
5. Нажмите кнопку создания.
6. Если появится запрос, в разделе API Azure Cosmos DB для MongoDB выберите "Создать".
7. Настройте учетную запись Azure Cosmos DB со следующими сведениями:
   • Подписка: выберите нужную подписку.
   • Ресурс: выберите "Создать" и задайте для имени aswa-mongoose
   • Имя учетной записи: требуется уникальное значение.
   • Расположение: Западная часть США 2.
   • Режим емкости: Бессерверный (предварительная версия).
   • Версия: 4.0
8. Выберите Review + create (Просмотреть и создать).
9. Нажмите кнопку создания.

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

2. Создание статического веб-приложения

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

1. Перейдите к начальной шаблону.

2. Выберите владельца (при использовании организации, отличной от основной учетной записи).

3. Назовите репозиторий aswa-mongoose-tutorial.

4. Щелкните Create repository from template (Создание репозитория из шаблона).

5. Вернитесь на портал Azure.

6. Выберите Создать ресурс.

7. Введите статическое веб-приложение в поле поиска.

8. Выберите Статическое веб-приложение.

9. Нажмите кнопку создания.

10. Настройте для статического веб-приложения Azure следующие параметры:

    • Подписка: выберите ту же подписку, что и раньше.
    • Группа ресурсов: выберите aswa-mongoose.
    • Имя: aswa-mongoose-tutorial.
    • Регион: Западная часть США 2.
    • Выберите вход с помощью GitHub
    • Выберите "Авторизовать", если предложено разрешить Статические веб-приложения Azure создать действие GitHub, чтобы включить развертывание
    • Организация: имя вашей учетной записи GitHub.
    • Repository (Репозиторий): aswa-mongoose-tutorial.
    • Branch (Ветвь): main.
    • Предустановки сборки: Выбор React
    • Расположение приложения: /
    • Api location (Расположение API): api.
    • Расположение выходных данных: сборка

11. Выберите Просмотр и создание.

12. Нажмите кнопку создания.

13. Процесс создания занимает несколько минут; Выберите "Перейти к ресурсу " после подготовки статического веб-приложения.

3. Настройка строка подключения базы данных

Чтобы разрешить веб-приложению взаимодействовать с базой данных, база данных строка подключения хранится в качестве параметра приложения. Значения параметров доступны в Node.js через объект process.env.

1. Выберите "Главная" в левом верхнем углу портал Azure (или вернитесь вhttps://portal.azure.com).
2. Выберите элемент Группы ресурсов.
3. Выберите aswa-mongoose.
4. Выберите имя учетной записи базы данных. Он имеет тип API Azure Cosmos DB для Mongo DB.
5. В разделе "Параметры" выберите "Строка подключения".
6. Скопируйте строка подключения, перечисленные в разделе PRIMARY CONNECTION STRING.
7. В панежных сворачки выберите aswa-mongoose.
8. Выберите aswa-mongoose-tutorial , чтобы вернуться к экземпляру веб-сайта.
9. В разделе Параметры выберите пункт Конфигурация.
10. Выберите " Добавить " и создайте новый параметр приложения со следующими значениями:
    • Имя: AZURE_COSMOS_CONNECTION_STRING
    • Значение. <Вставьте строка подключения, скопированные ранее>
11. Нажмите ОК.
12. Выберите " Добавить " и создайте новый параметр приложения со следующими значениями для имени базы данных:
    • Имя: AZURE_COSMOS_DATABASE_NAME
    • Значение: todo
13. Нажмите ОК.
14. Выберите Сохранить.

4. Перейдите на сайт

Теперь вы можете открыть статическое веб-приложение.

1. В портал Azure выберите "Обзор".
2. Выберите URL-адрес, отображаемый в правом верхнем углу.
   1. Он выглядит примерно так.https://calm-pond-05fcdb.azurestaticapps.net
3. Выберите "Войти", чтобы просмотреть список задач.
4. Выберите "Предоставить согласие", чтобы получить доступ к приложению.
5. Создайте новый список, введя имя в текстовое поле с меткой создания нового списка и нажав кнопку "Сохранить".
6. Создайте задачу, введя заголовок в текстовом поле с меткой создания нового элемента и нажав кнопку "Сохранить".
7. Убедитесь, что задача отображается (может потребоваться некоторое время).
8. Пометьте задачу как завершенную, выбрав флажок. Задача переходит к разделу "Готово" страницы.
9. Обновите страницу , чтобы подтвердить использование базы данных.

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

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

1. Вернитесь на портал Azure.
2. Выберите элемент Группы ресурсов.
3. Выберите aswa-mongoose.
4. Выберите команду Удалить группу ресурсов.
5. Введите aswa-mongoose в текстовое поле.
6. Выберите команду Удалить.

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

Чтобы узнать, как настроить локальную среду для разработки, переходите к следующей статье.

Настройка локальной разработки