Развертывание веб-приложения Node.js и MongoDB в Azure

В этом руководстве показано, как развернуть пример приложения Express.js с помощью базы данных MongoDB в Azure. Приложение Express.js будет размещено в Службе приложений Azure, которая поддерживает размещение приложений Node.js в серверных средах Linux (версии Node 12, 14 и 16) и Windows (версии 12 и 14). База данных MongoDB будет размещена в Azure Cosmos DB — собственной облачной базе данных, предлагающей API со 100 % совместимостью с MongoDB.

A diagram showing how the Express.js app will be deployed to Azure App Service and the MongoDB data will be hosted inside of Azure Cosmos DB.

В этой статье предполагается, что вы уже знакомы с разработкой Node.js, и что у вас установлены Node и MongoDB в локальной среде. Вам также потребуется учетная запись Azure с активной подпиской. Если у вас нет учетной записи Azure, ее можно создать бесплатно.

Пример приложения

Для работы с этим руководством клонируйте или скачайте пример приложения из репозитория https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

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

  • Установите зависимости пакета, выполнив команду npm install.
  • Скопируйте файл .env.sample в .env и в качестве значения параметра DATABASE_URL укажите URL-адрес MongoDB (например, MongoDB://localhost:27017/).
  • Запустите приложение с помощью команды npm start.
  • Чтобы просмотреть приложение, перейдите по адресу http://localhost:3000.

1. Создание Службы приложений Azure

Служба приложений Azure используется для размещения веб-приложения Express.js. При настройке Службы приложений для размещения приложения необходимо указать следующие параметры.

  • Имя веб-приложения. Это имя используется в составе DNS-имени вашего веб-приложения в виде https://<app-name>.azurewebsites.net.
  • Среда выполнения для приложения. Здесь следует выбрать версию Node, которая будет использоваться для приложения.
  • План службы приложений, который определяет вычислительные ресурсы (ЦП, память), доступные для приложения.
  • Группа ресурсов для приложения. Группа ресурсов позволяет группировать (в логическом контейнере) все ресурсы Azure, необходимые для приложения.

Создайте ресурсы Azure на портале Azure, в VS Code с использованием пакета расширений инструментов Azure или в Azure CLI.

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

Инструкции Снимок экрана
На портале Azure выполните следующие действия:
  1. Введите "app services" (службы приложений) в строку поиска в верхней части портала Azure.
  2. В меню, которое отображается под панелью поиска, в разделе Службы выберите элемент Службы приложений.
A screenshot showing how to use the search box in the top tool bar to find App Services in Azure.
На странице Службы приложений нажмите + Создать. A screenshot showing the create button on the App Services page used to create a new web app.
На странице Создание веб-приложения заполните форму следующим образом.
  1. Группа ресурсов — выберите Создать и используйте имя msdocs-expressjs-mongodb-tutorial.
  2. Имя — используйте имя msdocs-expressjs-mongodb-XYZ, где XYZ представляет три произвольных символа. Это имя должно быть уникальным в Azure.
  3. ОпубликоватьCode.
  4. Стек среды выполненияNode 14 LTS.
  5. Операционная системаLinux.
  6. Регион → любой ближайший к вам регион Azure.
  7. План Linux → выберите Создать и используйте имя msdocs-expressjs-mongodb-plan.
  8. SKU и размер → нажмите Изменить размер, чтобы выбрать другой план службы приложений.
A screenshot showing the form to fill out to create a web app in Azure.
План службы приложений определяет, сколько ресурсов (ЦП и памяти) доступно для вашего приложения, и стоимость этих ресурсов. Дополнительные сведения о выборе плана службы приложений см. в статье Обзор плана службы приложений. Полный список планов службы приложений см. на странице цен на Службу приложений.

В этом примере в верхней части экрана нажмите элемент Разработка и тестирование, а затем выберите план B1 (Базовый). План B1 (Базовый) подразумевает небольшую плату за учетную запись Azure, но предлагает лучшую производительность по сравнению с планом F1 (Бесплатный).

По завершении нажмите кнопку Применить, чтобы применить внесенные изменения.
A screenshot of the Spec Picker dialog that lets you select the App Service plan to use for your web app.
На странице Создание веб-приложения нажмите кнопку Просмотреть и создать внизу экрана.

Откроется страница Просмотр. Нажмите Создать, чтобы создать вашу Службу приложений.
A screenshot of the main web app create page showing the button to select on to create your web app in Azure.

2. Создание Azure Cosmos DB в режиме совместимости MongoDB

Azure Cosmos DB является полностью управляемой базой данных NoSQL для разработки современных приложений. Среди ее компонентов существует полностью совместимый с MongoDB API, позволяющий использовать существующие инструменты, пакеты и приложения MongoDB с Cosmos DB.

Чтобы выполнить эти действия для создания Cosmos DB, необходимо войти на портал Azure.

Инструкции Снимок экрана
На портале Azure выполните следующие действия:
  1. В строке поиска вверху портала Azure введите "Cosmos DB".

  2. В открывшемся под строкой меню в разделе Службы выберите Azure Cosmos DB.

A screenshot showing how to use the search box in the top tool bar to find Cosmos DB in Azure.
На странице Azure Cosmos DB нажмите + Создать. A screenshot showing the create button on the Cosmos DB page used to create a database.
Появится страница с предложением выбрать вариант API для вашей базы данных Cosmos DB. Выберите API Azure Cosmos DB для MongoDB. A screenshot showing the page where you select the MongoDB API for your Cosmos DB.
На странице создания учетной записи Azure Cosmos DB заполните форму, как описано ниже.
  1. В качестве группы ресурсов выберите в раскрывающемся списке ту же группу ресурсов, которую указывали для веб-приложения в службе приложений (msdocs-expressjs-mongodb-quickstart). Это логически объединяет все компоненты, необходимые для этого приложения, в одну группу ресурсов для упрощения обнаружения и управления.

  2. В качестве имени учетной записи введите имя экземпляра Azure Cosmos DB msdocs-expressjs-mongodb-database-XYZ, где XYZ — любые три уникальных символа. Имена учетных записей Cosmos DB также должны быть уникальными в Azure. Имя должно иметь длину от 3 до 44 символов и содержать только строчные буквы, цифры и знак дефиса (-).

  3. В качестве расположения выберите то же расположение Azure, которое вы использовали для веб-приложения службы приложений. Важно разместить приложение и базу данных в одном расположении Azure, чтобы максимально сократить задержку в сети между различными компонентами решения.

  4. Если для вашей учетной записи доступна скидка на основе категории "Бесплатный", можете применить ее.

  5. Нажмите Просмотреть и создать, чтобы перейти на страницу подтверждения, а затем нажмите Создать, чтобы создать базу данных.

Создание новой базы данных Azure CosmosDB обычно занимает около 5 минут.
A screenshot showing how to fill out the page to create a new Cosmos DB.

3. Подключение Службы приложений к Cosmos DB

Для подключения к базе данных Cosmos DB необходимо указать строку подключения базы данных к приложению. В примере приложения это делается путем чтения переменной среды DATABASE_URL. При локальном запуске пример приложения использует пакет dotenv для чтения значения строки подключения из файла .env.

При запуске в Azure значения конфигурации, такие как строки подключения, могут храниться в параметрах приложения Службы приложений, в которой размещается веб-приложение. Затем эти значения становятся доступными для приложения в виде переменных среды во время выполнения. Таким образом, приложение использует строку подключения из process.env так же, как при локальном запуске или в Azure. Кроме того, устраняется необходимость в управлении и развертывании вместе с приложением файлов конфигурации, связанных со средой.

Инструкции Снимок экрана
Перейдите в свою учетную запись Cosmos DB. Если вы только что создали учетную запись Cosmos DB, можно нажать кнопку Перейти к ресурсу, чтобы сразу попасть в эту учетную запись. Также можно использовать поле поиска вверху экрана для поиска базы данных Cosmos DB и перехода к ней.
  1. На странице Cosmos DB убедитесь, что в меню слева выбран элемент "Быстрый запуск". Вы увидите текстовое поле с меткой Основная строка подключения. Хотя имеются вкладки для разных языков, строка подключения одинакова независимо от языка.
  2. Скопируйте значение строки подключения в буфер обмена.
A screenshot showing the location of the Cosmos DB connection string on the Cosmos DB quick start page.
Вернитесь в экземпляр Службы приложений, чтобы задать строку подключения для веб-приложения.

  1. В поле поиска вверху экрана введите имя вашей Службы приложений (msdocs-expressjs-mongodb-XYZ).
  2. Выберите вашу Службу приложений, появившуюся в разделе Ресурсы диалогового окна, чтобы перейти в нее.
A screenshot showing how to search for and go to the App Service, where the connection string needs to store the connection string.
На странице Службы приложений выполните следующие действия.
  1. В разделе Параметры выберите элемент Конфигурация.
  2. В разделе Параметры приложения (не в разделе строки подключения) выберите пункт + Создать параметр приложения, чтобы добавить параметр.
A screenshot showing how to use the Application settings within an App Service.
В диалоговом окне добавления или изменения параметра приложения задайте в качестве имени параметра DATABASE_URL для соответствия имени, используемому в коде приложения. Затем вставьте значение строки подключения для базы данных в поле Значение. Нажмите кнопку ОК, чтобы сохранить этот параметр. A screenshot showing the dialog used to set an application setting in Azure App Service.

4. Развертывание кода приложения в Azure

Служба приложений Azure поддерживает несколько методов развертывания кода приложения в Azure, в том числе GitHub Actions и все основные инструменты CI/CD. В этой статье рассматривается развертывание кода с локальной рабочей станции в Azure.

Чтобы развернуть код непосредственно из VS Code, необходимо установить пакет расширений инструментов Azure и войти в Azure через VS Code.

Инструкции Снимок экрана
Найдите значок Azure в левой панели инструментов и нажмите его, чтобы открыть расширение инструментов Azure для VS Code. A screenshot showing the location of the Azure Tool icon in Visual Studio Code.
Найдите раздел Служба приложений в расширении инструментов Azure, а затем найдите веб-приложение в соответствующей подписке. Щелкните веб-приложение правой кнопкой мыши и выберите в меню пункт Развернуть в веб-приложение.... A screenshot showing how you deploy an application to Azure by right-clicking on a web app in VS Code and selecting deploy from the context menu.
В верхней части окна появится диалоговое окно, в котором выбирается каталог для развертывания. Выберите корневой каталог, в котором находится исходный код вашего приложения.

В диалоговом окне появится запрос на выполнение команд сборки на целевом сервере. Если ответить "Да", это улучшит производительность для будущих развертываний.
A screenshot showing the dialog box used to select the deployment directory in VS Code.
В правом нижнем углу VS Code появится уведомление, сообщающее, что развертывание выполняется. После завершения развертывания вместо этого уведомления появится диалоговое окно, позволяющее перейти на веб-сайт. A screenshot showing the Output window of VS Code while deploying an application to Azure.

5. Переход в приложение

URL-адрес приложения будет иметь вид https://<app name>.azurewebsites.net. Перейдите по этому URL-адресу, чтобы просмотреть приложение.

Используйте элементы формы в приложении для добавления и выполнения задач.

A screenshot showing the application running in a browser.

6. Настройка и просмотр журналов приложения

Служба приложений Azure захватывает все сообщения, выводимые на консоль, чтобы помочь в диагностике проблем приложения. Пример приложения выводит сообщения журнала консоли в каждой из своих конечных точек для демонстрации этой возможности. Например, конечная точка get выводит сообщение о количестве задач, полученных из базы данных, и если что-то идет не так, появляется сообщение об ошибке.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Содержимое журналов диагностики Службы приложений можно просмотреть на портале Azure, в VS Code или с помощью Azure CLI.

Инструкции Снимок экрана
Сначала необходимо включить журналы потоковой передачи в Службе приложений Azure. Перейдите на страницу экземпляра Службы приложений на портале Azure.

  1. В меню с левой стороны страницы в разделе Мониторинг выберите Журналы Службы приложений.
  2. Измените значение свойства Application Logging с Выкл. на "**Файловая система".
  3. Введите период хранения журналов — 30 дней.
  4. Выберите Сохранить, чтобы сохранить изменения.
A screenshot showing the location of the Azure Tool icon in Visual Studio Code.
В меню в разделе "Мониторинг" выберите элемент Поток журналов. Обновите домашнюю страницу в приложении или попытайтесь выполнить другие запросы, чтобы создать какие-то сообщения журнала.

В выходных данных вы увидите все сообщения журнала, созданные приложением, и сообщения, созданные службой.
A screenshot showing how you deploy an application to Azure by right-clicking on a web app in VS Code and selecting deploy from the context menu.

7. Проверка развернутых файлов с помощью Kudu

Служба приложений Azure предоставляет веб-консоль диагностики с именем Kudu, которая позволяет проверять среду размещения сервера для веб-приложения. С помощью Kudu можно просматривать файлы, развернутые в Azure, проверять журнал развертывания приложения и даже открыть сеанс SSH в среде размещения.

Чтобы получить доступ к Kudu, перейдите по одному из следующих URL-адресов. Необходимо войти на сайт Kudu со своими учетными данными Azure.

  • Для приложений, развернутых в планах Службы приложений "Бесплатный", "Общий", "Стандартный" и "Премиум" — https://<app-name>.scm.azurewebsites.net.
  • Для приложений, развернутых в планах "Изолированный" — https://<app-name>.scm.<ase-name>.p.azurewebsites.net.

На главной странице Kudu можно получить доступ к сведениям о среде размещения приложений, параметрах приложений, развертываниях, а также просмотреть файлы в каталоге wwwroot.

A screenshot of the main page in the Kudu SCM app showing the different information available about the hosting environment.

Щелкнув ссылку Развертывания в разделе "REST API", вы увидите журнал развертываний веб-приложения.

A screenshot of the deployments JSON in the Kudu SCM app showing the history of deployments to this web app.

Выбрав ссылку wwwroot сайта в разделе "Обзор каталога", вы можете просматривать файлы на веб-сервере.

A screenshot of files in the wwwroot directory showing how Kudu lets you to see what has been deployed to Azure.

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

По завершении работы можно удалить все ресурсы из Azure, удалив соответствующую группу ресурсов для приложения.

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

Инструкции Снимок экрана
На портале Azure перейдите к группе ресурсов.
  1. В поле поиска в верхней части портала введите имя группы ресурсов.
  2. В разделе Группы ресурсов в диалоговом окне ниже выберите имя группы ресурсов, чтобы перейти к ней.
A screenshot showing how to search for and go to a resource group in the Azure portal.
В верхней части страницы выберите Удалить группу ресурсов. A screenshot showing the location of the Delete Resource Group button in the Azure portal.
В диалоговом окне подтверждения введите имя группы ресурсов для подтверждения удаления. Нажмите кнопку Удалить внизу страницы, чтобы удалить группу ресурсов. A screenshot of the confirmation dialog for deleting a resource group in the Azure portal.

Дальнейшие действия