Этот пост направляет вас на шаг за шагом с помощью простого процесса использования DEVOPS AZURE, чтобы развернуть aDe js-приложение JS (или любое другое веб-приложение на основе Node.js) к службе Azure Web App.
✅ Требования:
- Azure Account ( Если вы студент, нажмите здесь, чтобы узнать, как получить бесплатные Azure Ressources )
- Запуск Azure Web App Service
- A ract web приложение
- Azure DEVOPS SERVICE SERVICE
Сборка и развертывание
В Azure DevOps Portal перейдите к Строит вкладка Трубопроводы страница. Там у вас будет обзор ваших предыдущих сборки, и позже будет также найти статус сборки вашего приложения React Web App.
Создайте новый конвейер сборной и выберите местоположение/услугу хранилища вашего веб-приложения. Вам придется разрешить доступ к репозиторию, если вы не используете репозиторий Azure и не уполномочили ваш доступ раньше.
Затем выберите репозиторий вашего веб-приложения из списка (на скриншоте я использую репозитории Azure, поэтому внешний вид этого меню может варьироваться в зависимости от вашего репозитория).
После выбора репозитория Azure DEVOPS пытается автоматически создать файл YAML. В нашем случае он сначала определяет, какой вид VM-пула мы будем использовать для создания нашего веб-приложения. Затем он определяет шаги нашей сборки, начиная с установки Node.js и продолжается с установкой зависимостей нашего веб-приложения ( NPM Установить ), а затем запустите команду сборки нашего веб-приложения ( NPM Run Build ). В конце концов, стандартный выход установлен на архивирование рабочего каталога или другими словами наша сборка.
Наша цель — также напрямую вызвать развертывание на нашу службу Azure Web App, поэтому нам нужно изменить последнюю задачу:
- task: AzureRmWebAppDeployment@3 displayName: 'Azure App Service Deploy:' inputs: azureSubscription: WebAppName: Package: '$(System.DefaultWorkingDirectory)/build'
Вам все еще нужно поместить в свой идентификатор подписки Azure и имя вашего веб-приложения, поэтому Azure DEVOPS знает, где вы хотите развернуть сборку. Более того, мы определяем в последней строке, где находится наша сборка, чтобы убедиться, что только наша окончательная сборка развернута.
Файл YAML, который вы только что создали, будет добавлен в репозиторий, как Azure-Pipelines.yml Отказ Поэтому, если вам нужно настроить дополнительные шаги, такие как тесты, которые вам просто нужно редактировать файл yaml в вашем репозитории. Кроме того, если вы редактируете файл онлайн в Azure DEVOPS, он покажет вам список задач для добавления, в котором вы также можете настроить каждую задачу с использованием UI.
Конечно, вы могли (и для больших проектов) явно разделите сборку и развертывание. Теперь каждый раз, когда вы объединяете новые комбиниты в вашу производственную ветку, будет вызвана новая сборка.
И это все, что вам нужно сделать, чтобы иметь базовый процесс сборки и развертывания, повеселиться! 🐱💻.
Оригинал: «https://dev.to/jakob_vdh/react-js-azure-devops-azure-app-service-56oo»