Поделиться через


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

Примечание.

Начиная с 1 июня 2024 г. все созданные Служба приложений приложения будут иметь возможность создать уникальное имя узла по умолчанию с помощью соглашения <app-name>-<random-hash>.<region>.azurewebsites.netоб именовании. Существующие имена приложений останутся неизменными.

Пример: myapp-ds27dh7271aah175.westus-01.azurewebsites.net

Дополнительные сведения см. в разделе "Уникальное имя узла по умолчанию" для ресурса Служба приложений.

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

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

В этом видео показано, как развернуть веб-приложение Node.js в 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. Отобразятся примерно следующие сведения:

    Снимок экрана: работающее приложение Express.

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

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

Примечание.

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

Вход в Azure

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

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

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

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

    Экранная часть параметра входа в Azure.

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

  1. Выберите папку myExpressApp.
  1. Щелкните правой кнопкой мыши Служба приложений и выберите "Создать веб-приложение". По умолчанию используется контейнер 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.

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

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

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

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

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

    Снимок экрана: раздел сведений об экземпляре.

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

    Снимок экрана: раздел

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

    Снимок экрана: кнопка

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

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

    Снимок экрана: кнопка

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

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

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

    Снимок экрана: вкладка учетных данных развертывания FTPS.

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

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

    Снимок экрана: сведения о подключении FTPS.

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

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

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

    Снимок экрана: каталог /site/wwwroot.

  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 без аргументов для Linux. Добавление --os-type Windows для Windows:

    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. В обозревателе Службы приложений щелкните узел приложения правой кнопкой мыши и выберите Начать потоковую передачу журналов.

    Запустить потоковую передачу журналов

  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. На той же странице Служба приложений используйте для приложения меню слева для прокрутки к разделу Наблюдение и выберите Поток журналов.

    Снимок экрана: поток журналов в Службе приложений Azure.

  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. Разверните подписку, щелкните правой кнопкой мыши созданную ранее группу ресурсов и выберите Удалить.

    Снимок экрана навигации в Visual Studio Code для удаления ресурса, содержащего ресурсы Службы приложений.

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

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

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

az group delete --no-wait

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

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

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

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

    Группа ресурсов на странице обзора Службы приложений

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

    Удаление группы ресурсов.

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

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

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

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