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

  • 13 мин

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

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

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

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

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

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

  4. На вкладке "Основные сведения" введите следующие значения.

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

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

  6. После завершения развертывания выберите "Перейти к ресурсу". Сервис App Service Essentials отображает сведения, связанные с вашим развертыванием.

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

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

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

Это важно

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

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

Это важно

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

  1. В Azure DevOps перейдите в проект Space Game - web - Release.

  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 выберите конвейеры и выберите библиотеку.

    Снимок экрана: Azure Pipelines с расположением меню библиотеки.

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

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

  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 с помощью Azure Pipelines.