Restify, lit-html и Azure Pipelines

Azure DevOps (ранее TFS) — это набор сервисов, созданных Microsoft для упрощения CI/CD для проектов. Мы использовали его в течение последних семи месяцев в качестве системы контроля версий. Недавно нам пришлось развернуть одно из наших старых приложений в веб-приложении Azure, и мы решили, что пришло время попробовать некоторые другие функции Azure DevOps — конвейеры. Созданный нами пайплайн гарантирует, что каждый толчок к главной ветке нашего проекта будет идти прямо в производство (без давления).

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

Мы будем развертывать очень простое веб-приложение, которое использует LitElement и restify. Мы начнем с размещения кода в частном репозитории Azure DevOps. Затем мы создадим веб-приложение в Azure. Последние две вещи, которые нам понадобятся, — это два конвейера: один будет строить наш код, а другой — развертывать его в Azure при успешной сборке. Давайте начнем.

Приложение

Приложение, которое мы будем использовать, можно найти в этом репозитории GitHub. Используя Azure Pipelines, можно выполнить развертывание непосредственно из GitHub, но в этом примере я хотел бы показать вам, как мы можем сделать это из репозитория Azure DevOps. Получите код из репозитория выше, и давайте начнем с создания проекта. Перейдите в Azure DevOps и создайте учетную запись, если у вас ее еще нет. Создайте новый проект и нажмите на репозитории, следуйте инструкциям, чтобы создать репозиторий, и зафиксируйте приведенный выше код в этом репозитории. Как только наш код будет отправлен, мы готовы начать развертывание.

Веб-приложение

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

Заполните все необходимые данные, не забыв выбрать метод публикации как код и операционную систему как Linux.

После создания веб-приложения мы должны добавить порт, на котором оно будет работать. Мы делаем это, перейдя к настройкам конфигурации и в разделе «Настройки приложения» добавим новый параметр с именем ПОРТ и значением 8080. Теперь мы можем начать развертывание.

Конвейер сборки

Первое, что нам нужно сделать, это создать конвейер сборки, который будет собирать наш код (и тестировать его при добавлении тестов). Нам нужно создать файл в корне нашего каталога с именем azure-pipelines.yml. Этот файл будет определять все шаги, необходимые для создания нашего кода. Это будет выглядеть так:

trigger:
  - master
pool:
  vmImage: 'Ubuntu-16.04'
steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '10.x'
    displayName: 'Install Node.js'
  - script: |
      npm install
      npm run-script build
    workingDirectory: app
    displayName: 'Install the app dependencies and build the bundle'
  - script: |
      npm install
    workingDirectory: api
    displayName: 'Install the server dependencies'
  - task: CopyFiles@2
    inputs:
      SourceFolder: '$(System.DefaultWorkingDirectory)/api'
      Contents: |
        **/*
        *
        !node_modules/
      TargetFolder: '$(Build.ArtifactStagingDirectory)/api'
  - task: CopyFiles@2
    inputs:
      SourceFolder: '$(System.DefaultWorkingDirectory)/app/build/default'
      Contents: |
        **/*
        *
        !node_modules/
      TargetFolder: '$(Build.ArtifactStagingDirectory)/api/public'
  - task: DeleteFiles@1
    inputs:
      SourceFolder: '$(Build.ArtifactStagingDirectory)/api/public'
      Contents: src/services/config.js

  - task: CmdLine@2
    inputs:
      Script: 'mv config.prod.js config.js'
      WorkingDirectory: '$(Build.ArtifactStagingDirectory)/api/public/src/services'
  - task: PublishBuildArtifacts@1
    inputs:
      pathtoPublish: '$(Build.ArtifactStagingDirectory)/api'
      artifactName: api

Всего шагов восемь, они делают следующее:

Шаг 1. Установите Node в агенте сборки.

- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

Шаг 2. Установите зависимости для веб-приложения и создайте его с помощью полимерного cli.

- script: |
    npm install
    npm run-script build
  workingDirectory: app
  displayName: 'Install the app dependencies and build the bundle'

Шаг 3. Установите зависимости для API.

- script: |
    npm install
  workingDirectory: api
  displayName: 'Install the server dependencies'

Шаг 4. Скопируйте все файлы API в каталог сборки.

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)/api'
    Contents: |
      **/*
      *
      !node_modules/
    TargetFolder: '$(Build.ArtifactStagingDirectory)/api'

Шаг 5. Скопируйте все файлы приложения в папку «public» в каталоге сборки «api».

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)/app/build/default'
    Contents: |
      **/*
      *
      !node_modules/
    TargetFolder: '$(Build.ArtifactStagingDirectory)/api/public'

Шаг 6. Удалите файл конфигурации разработки.

- task: DeleteFiles@1
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/api/public'
    Contents: src/services/config.js

Шаг 7. Переименуйте файл рабочей конфигурации.

- task: CmdLine@2
  inputs:
    Script: 'mv config.prod.js config.js'
    WorkingDirectory: '$(Build.ArtifactStagingDirectory)/api/public/src/services'

Шаг 8. Опубликуйте все файлы из каталога сборки.

- task: PublishBuildArtifacts@1
  inputs:
    pathtoPublish: '$(Build.ArtifactStagingDirectory)/api'
    artifactName: api

Если мы отправим этот файл в Azure DevOps и перейдем в Pipelines > Builds, мы увидим наш конвейер сборки.

Конвейер выпуска

Теперь, когда наш код успешно строится, пришло время развернуть его в Azure. Мы сделаем это, используя конвейер выпуска, который запускается успешной сборкой. Щелкните Конвейеры › Релизы › Создать новый конвейер. В диалоговом окне выбора шаблона выберите «Развертывание службы приложений Azure».

Назовите сцену и нажмите «Добавить артефакт».

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

Нажмите «Триггер непрерывного развертывания» и установите для него значение «Включено», таким образом, каждый раз при успешной сборке будет запускаться конвейер выпуска.

Зайдите в настройки этапа, нажав на ссылку «1 вакансия, 1 задача». Выберите свою подписку Azure и измените тип приложения на «Веб-приложение для Linux». Это должно загрузить службу приложения, которую мы создали ранее, выберите ее из раскрывающегося списка и оставьте команду запуска пустой.

Нажмите «Развернуть задачу службы приложений Azure», здесь мы можем переименовать ее во что-то более подходящее или оставить как есть. Важная вещь, которую необходимо изменить, — это расположение «Пакет или папка». Нажмите на 3 точки, и вы увидите артефакты, опубликованные конвейером сборки. Перейдите к папке API и выберите ее в качестве папки для развертывания. Мы можем оставить все остальные настройки и сохранить наш конвейер выпуска.

Для проверки создайте релиз последней сборки. После завершения выпуска убедитесь, что все работает, перейдя по адресу `‹yourwebsitename›.azurewebsites.net`.

Резюме

Мы успешно развернули наше веб-приложение в Azure. Каждый раз, когда мы отправляем в главную ветку Azure DevOps, наш новый код будет выпущен в рабочую среду. Это может быть как очень полезно, так и очень опасно. Нам нужно убедиться, что каждый человек в команде понимает, что все его изменения в основной ветке будут немедленно доступны для просмотра и использования. Код должен быть хорошо протестирован, и должна быть какая-то модель запроса на вытягивание. Таким образом, нам не нужно бояться форсировать мастеринг и ломать что-то в продакшене.