Упражнение. Развертывание веб-приложения в службе приложение Azure

  • 13 мин

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

  • Создайте экземпляр Служба приложений для размещения веб-приложения.
  • Создайте конвейер с несколькими этапами.
  • Развертывание в Службу приложений Azure.

Создание экземпляра Служба приложений

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

  2. Выберите Служба приложений на левой панели.

  3. Выберите "Создать>веб-приложение", чтобы создать новое веб-приложение.

  4. На вкладке Основные сведения введите приведенные ниже значения.

    Параметр Значение
    Сведения о проекте
    Отток подписок ваша подписка
    Группа ресурсов Выберите Создать и введите tailspin-space-game-rg, а затем нажмите кнопку ОК.
    Сведения об экземпляре
    Имя. Укажите уникальное имя, например tailspin-space-game-web-1234. Это имя должно быть уникальным в Azure. Оно станет частью доменного имени. На практике выберите имя, описывающее службу. Запишите имя для использования в дальнейшем.
    Публикация Код
    Стек среды выполнения .NET 6 (LTS)
    Операционная система Linux
    Область/регион Выберите регион, желательно ближе к вам.
    Тарифные планы
    План Linux Примите значение по умолчанию.
    Ценовой план Выберите ценовую категорию "Базовый B1" в раскрывающемся меню.

  5. Выберите "Просмотр и создание", просмотрите форму и нажмите кнопку "Создать". Развертывание занимает несколько минут.

  6. По завершении развертывания выберите элемент Перейти к ресурсу. В Службе приложений в разделе "Основные сведения" отобразится подробная информация, связанная с развертыванием.

    Снимок экрана: сведения о развертывании, включая URL-адрес развертывания.

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

    Снимок экрана: веб-браузер с заданной по умолчанию домашней страницей Службы приложений Azure.

Внимание

На странице "Очистка среды Azure DevOps" в этом модуле объясняется, как удалить экземпляр Служба приложений после завершения работы с ним. Очистка помогает убедиться, что вы не взимаете плату за ресурсы Azure после завершения работы с этим модулем. Следуйте инструкциям по очистке, даже если этот модуль не завершен.

Создание подключения службы

Внимание

Убедитесь, что вы вошли в Azure и Azure DevOps в той же учетной записи Майкрософт.

  1. В Azure DevOps перейдите в проект выпуска Space Game ( веб-выпуск ).

  2. В левом нижнем углу страницы выберите Параметры проекта.

  3. В разделе Конвейеры выберите Подключения к службе.

  4. Выберите новое подключение к службе, а затем выберите Azure Resource Manager и нажмите кнопку "Далее".

  5. Выберите субъект-службу (автоматически) и нажмите кнопку "Далее".

  6. Заполните необходимые поля следующим образом: при появлении запроса войдите в учетную запись Майкрософт.

    Поле значение
    Уровень области Подписка
    Отток подписок Ваша подписка Azure
    Группа ресурсов tailspin-space-game-rg
    Имя подключения службы Resource Manager — Tailspin — Space Game

  7. Убедитесь, что выбрано разрешение на доступ ко всем конвейерам .

  8. Выберите Сохранить.

Добавление этапа сборки в конвейер

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

Чтобы преобразовать существующую конфигурацию сборки в многоэтапный конвейер, добавьте stages раздел в конфигурацию, а затем добавьте один или несколько stage разделов для каждого этапа конвейера. Этапы разбиваются на задания, которые являются рядом шагов, которые выполняются последовательно как единица.

  1. В проекте в Visual Studio Code откройте azure-pipelines.yml и замените его содержимое следующим кодом:

    trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      displayName: 'Compile Sass assets'

    - task: gulp@1
      displayName: 'Run gulp tasks'

    - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
      displayName: 'Write build info'
      workingDirectory: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

  2. В интегрированном терминале выполните следующие команды на этапе, фиксации и отправке изменений в удаленную ветвь.

    git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline

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

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

    Снимок экрана: сводка заданий в Azure Pipelines.

Создание среды разработки

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

  1. В Azure Pipelines выберите "Среды".

    Снимок экрана: расположение пункта меню

  2. Нажмите Создать среду.

  3. В поле Имя введите dev.

  4. В остальных полях оставьте значения по умолчанию.

  5. Нажмите кнопку создания.

Сохранение имени веб-приложения в переменной конвейера

Этап развертывания, который мы создаем, использует имя, чтобы определить, какой Служба приложений экземпляр для развертывания, например tailspin-space-game-web-1234.

Хотя вы можете жестко закодировать это имя в конфигурации конвейера, определяя его как переменную, делает конфигурацию более повторно используемым.

  1. В Azure DevOps выберите конвейеры и выберите библиотеку.

    Снимок экрана: расположение меню

  2. Выберите +Группа переменных, чтобы создать новую группу переменных.

  3. Введите выпуск для имени группы переменных.

  4. Выберите " Добавить " в разделе "Переменные" , чтобы добавить новую переменную.

  5. Введите WebAppName для имени переменной и имя экземпляра Служба приложений для его значения: например, tailspin-space-game-web-1234.

  6. Выберите Сохранить.

Добавление этапа развертывания в конвейер

Мы расширяем наш конвейер, добавив этап развертывания для развертывания Space Game для Служба приложений с помощью download и AzureWebApp@1 задач для скачивания артефакта сборки и последующего развертывания.

  1. В Visual Studio Code замените содержимое azure-pipelines.yml следующим yaml:

    trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      displayName: 'Compile Sass assets'

    - task: gulp@1
      displayName: 'Run gulp tasks'

    - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
      displayName: 'Write build info'
      workingDirectory: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

- stage: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: dev
    variables:
    - group: Release
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop
          - task: AzureWebApp@1
            displayName: 'Azure App Service Deploy: website'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appName: '$(WebAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

    Обратите внимание на выделенный раздел и способы использования download и AzureWebApp@1 задач. Конвейер извлекает $(WebAppName) из созданной ранее группы переменных.

    Кроме того, обратите внимание на то, как мы используем environment для развертывания в среде разработки.

  2. В интегрированном терминале добавьте azure-pipelines.yml в индекс. Затем зафиксируйте изменение и отправьте его в GitHub.

    git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline

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

  4. После завершения сборки нажмите кнопку "Назад", чтобы вернуться на страницу сводки и проверить состояние этапов. Оба этапа успешно завершились в нашем случае.

    Снимок экрана: завершенные этапы сборки и развертывания в Azure Pipelines.

Просмотр развернутого веб-сайта на Служба приложений

  1. Если вкладка Служба приложений по-прежнему открыта, обновите страницу. В противном случае перейдите к службе приложение Azure в портал Azure и выберите URL-адрес экземпляра: например,https://tailspin-space-game-web-1234.azurewebsites.net

    Снимок экрана: сведения о развертывании.

  2. Веб-сайт Space Game успешно развернут в службе приложение Azure.

    Снимок экрана: веб-сайт Space Game в веб-браузере.

Поздравляем! Вы успешно развернули веб-сайт Space Game для приложение Azure service с помощью Azure Pipelines.