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

Из этого краткого руководства вы узнаете, как создать и развернуть первое веб-приложение Node.js (Express) в Службе приложений Azure. Служба приложений поддерживает различные версии Node.js в Linux и Windows.

В этом быстром старте в шагах Azure CLI используется платный уровень Premium v3. Шаги Visual Studio Code и портала Azure показывают, как использовать уровень Free.

В этом видео показано, как развернуть веб-приложение Node.js в Azure.

Действия в видео также описаны в следующих разделах.

Настройка начальной среды

• Подготовьте учетную запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
• Установите Node.js LTS. Выполнив команду node --version, убедитесь, что платформа Node.js установлена.
• Установка Visual Studio Code.
• Установите расширение службы приложений Azure для Visual Studio Code.

• Подготовьте учетную запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
• Установите Node.js LTS. Выполнив команду node --version, убедитесь, что платформа Node.js установлена.
• Установите Azure CLI, который можно использовать для выполнения команд в оболочке для создания и настройки ресурсов Azure.

• Подготовьте учетную запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
• Установите Node.js LTS. Выполнив команду node --version, убедитесь, что платформа Node.js установлена.
• У вас есть FTP-клиент, например FileZilla, для передачи файлов в службу приложений.

Создание приложения Node.js

На этом шаге вы создадите базовое приложение Node.js и убедитесь, что оно выполняется на компьютере.

Совет

Если вы уже выполнили руководство по Node.js, вы можете перейти к развертыванию на платформе Azure.

1. Создайте приложение Node.js с помощью генератора экспресс-приложений, который устанавливается по умолчанию с Node.js и npm.

   npx express-generator myExpressApp --view ejs
   

   Если это первый раз, когда вы установили генератор, npx просит вас согласиться с установкой.

2. Перейдите в каталог приложения и установите пакеты npm.

   cd myExpressApp && npm install
   

3. Обновите зависимости до самой безопасной версии.

   npm audit fix --force
   

4. Запустите сервер разработки с информацией об отладке.

   DEBUG=myexpressapp:* npm start
   

5. В браузере перейдите на адрес http://localhost:3000. Вы должны увидеть что-то похожее на это:

   

У меня есть проблема

Развернуть в Azure

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

Примечание.

Чтобы приложение Node.js выполнялось в Azure, оно должно прослушивать порт, предоставленный переменной среды PORT. В созданном приложении Express эта переменная среды уже используется в стартовом скрипте bin/www. (Поиск process.env.PORT.)

Вход в Azure

1. В терминале убедитесь, что вы находитесь в каталоге myExpressApp , а затем запустите Visual Studio Code с помощью следующей команды:

   code .
   

2. В Visual Studio Code в строке действий выберите логотип Azure.

3. Убедитесь, что вы вошли в учетную запись Azure.

У меня есть проблема

Настройка приложения Службы приложений и развертывание кода

Развертывание в Linux

1. Щелкните правой кнопкой мыши Служба приложений и выберите "Создать веб-приложение". По умолчанию используется контейнер Linux.

2. Введите глобально уникальное имя веб-приложения и нажмите клавишу ВВОД. Имя должно быть уникальным во всей системе Azure и содержать только буквенно-цифровые символы (A-Z, a-z, 0-9) и дефисы (-).

3. В Выбор стека среды выполнения выберите нужную версию Node.js. Рекомендуется использовать узел 24 LTS.

4. В разделе "Выбор ценовой категории" выберите "Бесплатный" (F1) и дождитесь создания ресурсов в Azure.

5. Во всплывающем окне Всегда развертывать рабочую область "myExpressApp" в <имя-приложения>", выберите Да. Это гарантирует, что до тех пор, пока вы находитесь в той же рабочей области, Visual Studio Code развертывается в одном и том же приложении Служба приложений каждый раз.

   Хотя Visual Studio Code создает ресурсы Azure и развертывает код, он отображает уведомления о ходе выполнения.

6. После завершения развертывания нажмите Обзор веб-сайта во всплывающем окне уведомлений. В браузере должна отобразиться страница по умолчанию для Express.

Развертывание в Windows

1. В разделе "Ресурсы" в подписке, которую вы хотите использовать, щелкните правой кнопкой мыши службы приложений и выберите "Создать веб-приложение... (Дополнительно).

2. Выберите расположение, из которого нужно обслуживать приложение. Например, Западная Европа.

3. Выберите безопасное уникальное имя узла по умолчанию.

4. Выберите " Создать группу ресурсов" и введите имя группы ресурсов, например AppServiceQS-rg.

5. Введите глобально уникальное имя веб-приложения и нажмите клавишу ВВОД. Имя должно быть уникальным во всей системе Azure и содержать только буквенно-цифровые символы (A-Z, a-z, 0-9) и дефисы (-).

6. Выберите нужную версию Node.js. Рекомендуется использовать узел 24 LTS.

7. Выберите Windows в поле операционной системы.

8. Выберите "Создать новый план Служба приложений", введите имя плана (например, appServiceQS-plan), а затем выберите F1 Free для ценовой категории.

9. Для выбора ресурса Application Insights для приложения нажмите кнопку "Пропустить". Дождитесь создания ресурсов в Azure.

10. Во всплывающем окне Всегда развертывать рабочую область "myExpressApp" в <имя-приложения>", выберите Да. Это гарантирует, что до тех пор, пока вы находитесь в той же рабочей области, Visual Studio Code развертывается в одном и том же приложении Служба приложений каждый раз.

    Хотя Visual Studio Code создает ресурсы Azure и развертывает код, он отображает уведомления о ходе выполнения.

    Примечание.

    После завершения развертывания приложение Azure еще не запускается, так как корневой каталог проекта не имеет web.config файла. Выполните остальные действия, чтобы создать его автоматически. Дополнительные сведения см. в разделе "У вас нет разрешения на просмотр этого каталога или страницы " в разделе "Настройка Node.js".

11. В разделе "Ресурсы " в Visual Studio Code разверните узел для нового приложения, щелкните правой кнопкой мыши параметры приложения и выберите "Добавить новый параметр":

    

12. Введите SCM_DO_BUILD_DURING_DEPLOYMENT для ключа настройки.

13. Введите true для параметра настройки.

    Этот параметр приложения включает автоматизацию сборки во время развертывания, которая автоматически обнаруживает начальный скрипт и создает с ним файлweb.config .

14. В обозревателе Служба приложений снова выберите значок "Развернуть в веб-приложении" и подтвердите его, нажав кнопку "Развернуть еще раз".

15. Дождитесь завершения развертывания, а затем выберите "Обзор веб-сайта" во всплывающем окне уведомления. В браузере должна отобразиться страница по умолчанию для Express.

У меня есть проблема

В терминале убедитесь, что вы находитесь в папке myExpressApp . Замените <app-name> на глобально уникальное имя, затем создайте группу ресурсов, план App Service и приложение. Настройте SCM_DO_BUILD_DURING_DEPLOYMENT так, чтобы App Service устанавливал зависимости и создавал приложение при развертывании исходного архива.

Развертывание в Linux

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

Развертывание в Windows

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• Если команда az не распознана, проверьте, установили ли вы Azure CLI согласно сведениям, указанным в разделе Настройка начальной среды.
• Замените <app-name> на имя, уникальное для всей Azure (допустимые символы — a-z, 0-9 и -).
• Аргумент --sku P0v3 выбирает платный уровень ценообразования Premium v3. Замените eastus на предпочтительный регион; просмотрите список доступных регионов с помощью az account list-locations.
• --is-linux выбирает тарифный план для Linux. Не указывайте его для плана Windows, как показано на вкладке Windows.

Создайте ZIP-архив файлов из myExpressApp, а не самого родительского каталога. На Linux или macOS запускайте zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' в каталоге myExpressApp. В Windows запускайте Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip в PowerShell из myExpressApp. Затем развернуть архив:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

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

Создание ресурсов Azure

1. Войдите на портал Azure.

2. Чтобы приступить к созданию приложения Node.js, перейдите на страницу https://portal.azure.com/#create/Microsoft.WebSite.

3. На вкладке "Основные сведения" в разделе "Сведения о проекте" убедитесь, что выбрана правильная подписка, а затем нажмите кнопку "Создать" , чтобы создать группу ресурсов. Введите myResourceGroup в качестве имени.

   

4. В разделе Сведения об экземпляре введите глобально уникальное имя для веб-приложения и выберите Код. Выберите узел 24 LTS в стеке среды выполнения, операционная система и регион , из которого вы хотите обслуживать приложение.

   

5. В разделе "Цены" выберите "Создать" , чтобы создать план службы приложений. Введите myAppServicePlan в качестве имени. Чтобы изменить уровень "Бесплатный", выберите "Бесплатный F1" в списке тарифных планов .

   

6. В нижней части страницы нажмите кнопку Просмотр и создание.

   

7. После выполнения проверки нажмите кнопку Создать в нижней части страницы.

8. По завершении развертывания нажмите кнопку Перейти к ресурсу.

   

Получение учетных данных FTPS

Служба приложений Azure поддерживает два типа учетных данных для развертывания FTP/S. Эти учетные данные не совпадают с учетными данными подписки Azure. В этом разделе вы получите учетные данные области приложения для использования с FTP-клиентом.

1. На странице приложения службы приложений выберите Центр развертывания в разделе "Развертывание " в боковом меню и перейдите на вкладку "Учетные данные FTPS ".

   

2. Откройте FTP-клиент и перейдите в папку myExpressApp .

3. На вкладке учетных данных FTPS скопируйте конечную точку FTPS, имя пользователя и пароль в ftp-клиент.

   

4. Выберите "Подключиться" в FTP-клиенте.

Развертывание файлов с помощью FTPS

1. Скопируйте все файлы и каталоги в /site/wwwroot в Azure.

   

2. Перейдите по URL-адресу приложения, чтобы убедиться, что приложение работает правильно.

Повторное развертывание обновлений

Вы можете развернуть изменения в этом приложении, внося изменения в Visual Studio Code, сохраняя файлы, а затем повторно разверните своё приложение Azure. Например:

1. В примере проекта откройте views/index.ejs и внесите изменения.

   <p>Welcome to <%= title %></p>
   

   до

   <p>Welcome to Azure</p>
   

2. В обозревателе Служба приложений снова выберите значок "Развернуть в веб-приложении" и подтвердите его, нажав кнопку "Развернуть еще раз".

3. Дождитесь завершения развертывания, после чего выберите Обзор веб-сайта в раскрывающемся окне уведомления. Вы должны увидеть, что Welcome to Express сообщение было изменено на Welcome to Azure.

2. Сохраните изменения, создайте заново .. /app.zip из файлов приложения, как описано в Развернуть в Azure, и разверните повторно:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Замените <app-name> на имя, которое вы использовали при создании веб-приложения.

3. После завершения развертывания обновите веб-страницу. Вы должны увидеть, что Welcome to Express сообщение было изменено на Welcome to Azure.

2. Сохраните изменения, а затем повторно разверните приложение с помощью FTP-клиента.

3. После завершения развертывания обновите веб-страницу. Вы должны увидеть, что Welcome to Express сообщение было изменено на Welcome to Azure.

Журналы потоков

Выходные данные журнала (вызовы console.log()) можно передавать потоком из приложения Azure непосредственно в окне вывода Visual Studio Code.

1. В разделе "Ресурсы" в Visual Studio Code щелкните правой кнопкой мыши на узле приложения и выберите "Начать потоковую передачу журналов".

   

2. При появлении запроса на перезапуск приложения выберите Да. После перезапуска приложения откроется окно выходных данных Visual Studio Code, подключенное к потоку журнала.

3. Через несколько секунд в окне вывода появится сообщение о том, что вы подключены к службе потоковой передачи журналов. Обновив страницу в браузере, можно увеличить активность вывода.

   Connecting to log stream...
   2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
   Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
   

У меня есть проблема

Вы можете получить доступ к журналам консоли, созданным в приложении, и контейнеру, в котором он выполняется. В журналы включены все выходные данные, созданные вызовами метода console.log().

Чтобы выполнить потоковую передачу журналов, запустите команду az webapp log tail:

• Сначала включите логирование: на Linux — запустите az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; в Windows — запустите az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

az webapp log tail --resource-group myResourceGroup --name <app-name>

Замените <app-name> на имя, которое вы использовали при создании веб-приложения.

Обновите приложение в браузере, чтобы создать журналы консоли, которые содержат сообщения с HTTP-запросами к приложению. Если выходные данные не отображаются немедленно, повторите попытку через 30 секунд.

Чтобы остановить потоковую передачу журналов в любое время, нажмите клавиши CTRL+C в терминале.

Вы можете получить доступ к журналам консоли, созданным в приложении, и контейнеру, в котором он выполняется. Выходные данные журнала (вызовы в console.log()) можно передавать из приложения Node.js непосредственно на портале Azure.

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

   

2. Через несколько секунд в окне вывода появится сообщение о том, что вы подключены к службе потоковой передачи журналов. Обновив страницу в браузере, можно увеличить активность вывода.

   Connecting...
   2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
   Starting Log Tail -n 10 of existing logs ----
   /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
   2021-10-26T21:04:08.614384810Z: [INFO]
   2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
   2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
   2021-10-26T21:04:08.614403210Z: [INFO]
   2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
   2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
   2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
   2021-10-26T21:04:08.614419610Z: [INFO]  fi
   2021-10-26T21:04:08.614423411Z: [INFO]
   2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
   Ending Log Tail of existing logs ---
   

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

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

1. В расширении Azure для Visual Studio Code в списке Группировать по выберите Группировать по ресурсной группе.

2. В списке ресурсов разверните подписку, щелкните правой кнопкой мыши созданную ранее группу ресурсов и выберите пункт "Удалить группу ресурсов".

   

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

У меня есть проблема

В предыдущих этапах CLI вы создали ресурсы Azure в myResourceGroup.

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

az group delete --name myResourceGroup --no-wait

Аргумент --no-wait позволяет команде возвращать сведения до завершения операции.

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

1. На странице обзора Службы приложений выберите группу ресурсов, созданную на шаге Создание ресурсов Azure.

   

2. На странице Группа ресурсов выберите Удалить группу ресурсов. Подтвердите имя группы ресурсов, чтобы завершить удаление ресурсов.

   

Связанный контент

Поздравляем, вы успешно завершили этот быстрый старт!

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

Настройка приложения Node.js

  Использование личного домена и управляемого сертификата для защиты приложения

Ознакомьтесь с другими расширениями Azure.

• Azure Cosmos DB
• Функции Azure
• Пакет расширения Docker
• Средства интерфейса командной строки Azure
• Средства Azure Resource Manager

Вы можете установить все сразу, установив пакет расширений Node Pack for Azure.