Создание веб-приложений Node.js в Azure

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

В этом кратком руководстве описана настройка приложения Службы приложений на уровне Бесплатный, что не приводит к затратам по вашей подписке Azure.

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

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

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

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

Совет

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

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

    npx express-generator myExpressApp --view ejs
    
  2. Перейдите в каталог приложения и установите пакеты NPM.

    cd myExpressApp && npm install
    
  3. Запустите сервер разработки с информацией об отладке.

    DEBUG=myexpressapp:* npm start
    
  4. В браузере перейдите на адрес http://localhost:3000. Отобразятся примерно следующие сведения:

    Running Express Application

Развертывание в 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... и следуйте инструкциям.

    В Visual Studio Code должна отображаться следующая информация: адрес электронной почты Azure в строке состояния и подписка в обозревателе Службы приложений Azure.

    sign in to Azure

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

  1. В обозревателе Службы приложений выберите значок Развернуть в веб-приложении.

    Screenshot of the Azure App service in Visual Studio Code showing the blue arrow icon selected.

  2. Выберите папку myExpressApp.

  1. Щелкните Create new Web App (Создать веб-приложение). По умолчанию используется контейнер Linux.

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

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

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

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

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

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

В окне терминала убедитесь, что вы находитесь в каталоге myExpressApp, и разверните код в локальной папке (myExpressApp) с помощью команды az webapp up:

az webapp up --sku F1 --name <app-name>
  • Если команда az не распознана, проверьте, установили ли вы Azure CLI согласно сведениям, указанным в разделе Настройка начальной среды.
  • Замените <app_name> именем, уникальным для всех регионов Azure (допустимыми символами являются a-z, 0-9и - ). Рекомендуется использовать сочетание названия компании и идентификатора приложения.
  • Аргумент --sku F1 создает веб-приложение в ценовой категории "Бесплатный", что не приводит к дополнительным затратам.
  • При необходимости вы можете использовать аргумент --location <location-name>, где <location_name> является доступным регионом Azure. Список допустимых регионов для учетной записи Azure можно получить, выполнив команду az account list-locations.
  • По умолчанию команда создает приложение Linux для Node.js. Чтобы вместо этого создать приложение Windows, используйте аргумент --os-type.
  • Если отображается сообщение об ошибке "Не удалось автоматически определить стек среды выполнения приложения", убедитесь, что вы используете команду в каталоге myExpressApp (см. статью Устранение неполадок с автоматическим обнаружением с помощью команды az webapp up).

Выполнение этой команды может занять несколько минут. По мере выполнения будут отображаться сообщения о создании группы ресурсов, плане службы приложений и ресурсе приложения, настройке ведения журнала и последующем выполнении развертывания ZIP-файла. Затем оно выдает сообщение You can launch the app at http://<app-name>.azurewebsites.net (Вы можете запустить приложение по адресу http://.azurewebsites.net). Это URL-адрес приложения в Azure.

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Примечание

Команда az webapp up выполняет следующие действия:

Вход на портал Azure

Войдите на портал Azure по адресу https://portal.azure.com.

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

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

    Screenshot of portal search

  2. На странице Службы приложений выберите Создать.

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

    Screenshot of the Project details section showing where you select the Azure subscription and the resource group for the web app

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

    Screenshot of the Instance details section where you provide a name for the virtual machine and select its region, image and size

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

    Screenshot of the Administrator account section where you provide the administrator username and password

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

    Screenshot showing the Review and create button at the bottom of the page

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

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

    Screenshot showing the next step of going to the resource

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

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

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

    FTPS deployment credentials

  2. Откройте FileZilla и создайте новый сайт.

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

    FTPS connection details

  4. Щелкните Подключить в FileZilla.

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

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

    FileZilla deploy files

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

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

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

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

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

    значение

    <p>Welcome to Azure</p>
    
  1. В обозревателе Службы приложений снова выберите значок Развернуть в веб-приложении, а затем нажмите кнопку Развернуть еще раз.

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

  1. Сохраните изменения, а затем повторно разверните приложение с помощью команды az webapp up без аргументов.

    az webapp up
    

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

  2. Когда развертывание завершится, обновите веб-страницу http://<app-name>.azurewebsites.net. Вы должны увидеть, что сообщение Welcome to Express было изменено на Welcome to Azure!.

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

  2. Когда развертывание завершится, обновите веб-страницу http://<app-name>.azurewebsites.net. Вы должны увидеть, что сообщение Welcome to Express было изменено на Welcome to Azure!.

Потоковая передача журналов

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

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

    Start Streaming Logs

  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:

az webapp log tail

Эта команда использует имя группы ресурсов, кэшированное в файле .azure/config.

Кроме того, вы можете использовать параметр --logs, а потом команду az webapp up, чтобы автоматически запустить потоковую передачу журналов для развертывания.

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

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

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

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

    Screenshot of Log stream in Azure App service.

  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 разверните обозреватель групп ресурсов.

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

    Screenshot of the Visual Studio Code navigation to delete a resource that contains App Service resources.

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

На предыдущем шаге вы создали ресурсы Azure в группе ресурсов. Группа ресурсов имеет имя, такое как "appsvc_rg_Linux_CentralUS", в зависимости от расположения.

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

az group delete --no-wait

Эта команда использует имя группы ресурсов, кэшированное в файле .azure/config.

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

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

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

    Resource group in App Service overview page

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

    Delete resource group

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

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

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

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