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

Реализация непрерывной интеграции и непрерывного развертывания с помощью Azure DevOps

Azure DevOps (Visual Studio Team Services / Team Foundation Server) состоит из набора инструментов и служб, помогающих разработчикам реализовывать процессы DevOps, непрерывной интеграции и непрерывного развертывания для проектов разработки.

В этой статье описаны действия, выполняемые при настройке среды Azure DevOps с непрерывной интеграцией и непрерывным развертыванием, чтобы автоматизировать выполнение сборок SharePoint Framework, модульное тестирование и развертывание.

Выбор между многоступенчатыми конвейерами Azure (предварительная версия) и сборками и выпусками Azure DevOps

В настоящее время доступны два подхода для реализации непрерывной интеграции и развертывания в Azure DevOps. Сборки и выпуски Azure появились раньше, предлагая интерфейс с графическим оформлением и сохранение определений в JSON-документе, скрытом от пользователя.

Оба подхода описаны для SharePoint Framework:

Непрерывная интеграция

Непрерывная интеграция (CI) помогает разработчикам интегрировать код в общей репозиторий путем автоматической проверки сборки с помощью модульного тестирования и упаковки решения при каждом изменении кода.

Чтобы настроить Azure DevOps для непрерывной интеграции с помощью решения SharePoint Framework, необходимо выполнить указанные ниже действия.

  1. Создание определения сборки
  2. Установка NodeJS
  3. Восстановление зависимостей
  4. Выполнение модульных тестов
  5. Импорт результатов теста
  6. Импорт данных покрытия кода
  7. Объединение решения
  8. Упаковка решения
  9. Подготовка артефактов
  10. Публикация артефактов

Создание определения сборки

Определение сборки, как следует из названия, включает все определения и их конфигурации для сборки. Начните настройку непрерывной интеграции путем создания нового определения сборки и ее связывания с вашим репозиторием.

связывание определения сборки с репозиторием

Примечание.

Определения сборки можно описать как шаблон процесса. Это набор настроенных задач, которые будут последовательно выполняться в исходном коде при каждом вызове сборки. Задачи можно сортировать поэтапно. По умолчанию определение сборки содержит минимум один этап. Вы можете добавлять новые задачи в этап, щелкнув большой знак "плюс" рядом с названием этапа.

Установка NodeJS версии 10

Сразу после создания определения сборки нужно установить NodeJS. Убедитесь, что устанавливается версия 10, так как SharePoint Framework зависит от нее. Снимок экрана: экран

Примечание.

Убедитесь, что в поле Version Spec указано значение 10.x. Если ваш проект основан на SharePoint Framework 1.7.1 или более ранней версии, используйте версию 8.x.

Восстановление зависимостей

Так как сторонние зависимости не хранятся в системе управления версиями, их нужно восстановить перед началом сборки проекта. Для этого добавьте задачу npm и установите для команды значение install.

установка зависимостей

Выполнение модульных тестов

В SharePoint Framework не предоставляется платформа тестирования по умолчанию (начиная с версии 1.8.0), в этом примере используется Jest. Эти модули будут установлены на следующем этапе, и мы настоятельно рекомендуем протестировать хотя бы бизнес-логику вашего кода, чтобы как можно раньше получить сведения о любых возможных проблемах и регрессиях. Чтобы службы Azure DevOps выполнили ваши модульные тесты, добавьте задачу npm. Присвойте значение command полю custom и custom command, введите test. Затем задайте параметр Working Directory для $(Build.SourcesDirectory).

выполнение модульных тестов

Настройка Jest

По умолчанию проекты SharePoint Framework не содержат платформы тестирования. В этом примере используется Jest.

npm i jest jest-junit @voitanos/jest-preset-spfx-react16 -D

Примечание.

Проекты, созданные в SharePoint Framework 1.7.1 и более ранних версиях, используют React версии 15. Если вы используете React 15, необходимо установить @voitanos/jest-preset-spfx-react15 его. Для других платформ (Knockout и т. д.) может потребоваться установить вместо этого другой готовый набор.

Вам также потребуется настроить Jest. Для этого создайте файл config/jest.config.json и добавьте следующее содержимое.

{
  "preset": "@voitanos/jest-preset-spfx-react16",
  "rootDir": "../src",
  "coverageReporters": [
    "text",
    "json",
    "lcov",
    "text-summary",
    "cobertura"
  ],
  "reporters": [
    "default",
    ["jest-junit", {
      "suiteName": "jest tests",
      "outputDirectory": "temp/test/junit",
      "outputName": "junit.xml"
    }]
  ]
}

Вам также потребуется настроить проект, чтобы использовать Jest при вводе команд. Для этого измените файл package.json и добавьте или замените эти два объекта scripts следующими значениями:

    "test": "./node_modules/.bin/jest --config ./config/jest.config.json",
    "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"

Написание модульного теста

Чтобы написать свой первый модульный тест, создайте файл src/webparts/webPartName/tests/webPartName.spec.ts и добавьте следующее содержимое:

import 'jest'

describe("webPartName", () => {
  test("should add numbers Sync fluent", () => {
    const result = 1 + 3;
    expect(result).toBe(4); // fluent API
  });
});

Примечание.

Дополнительные сведения о написании модульных тестов с помощью Jest см. здесь. Дополнительные сведения о тестировании React-приложений с помощью Jest и Enzyme см. здесь (часть об установке можно пропустить).

Импорт результатов теста

Чтобы получить сведения о результатах теста, приложенных к результатам сборки, нужно импортировать эти результаты теста из средства выполнения тестов в Azure DevOps. Для этого добавьте новую задачу Publish Test Results. Присвойте полю Test results files значение **/junit.xml, а полю Search folder — $(Build.SourcesDirectory).

импорт результатов теста

Импорт данных покрытия кода

Чтобы получить покрытие кода вместе с отчетом о состоянии сборки, необходимо добавить задачу для импорта этих сведений. Чтобы настроить данные покрытия кода, добавьте задачи publish code coverage results. Убедитесь, что для инструмента указано значение Cobertura, а для Summary files — значение $(Build.SourcesDirectory)/**/*-coverage.xml.

импорт данных покрытия

Объединение решения

Сначала необходимо объединить решение, чтобы получить статические активы, распознаваемые веб-браузером. Добавьте еще одну задачу gulp, укажите путь gulpfile, настройте поле Gulp Tasks на объединение и добавьте --ship в Arguments.

объединение активов

Упаковка решения

Следующим этапом после получения статических активов является их объединение в пакет, который SharePoint сможет развернуть. Добавьте еще одну задачу gulp, укажите путь gulpfile, присвойте полю Gulp Tasks значение package-solution и добавьте --ship в Arguments.

упаковка решения

Подготовка артефактов

По умолчанию сборка Azure DevOps не хранит файлы. Чтобы обеспечить сохранение файлов, требующихся для выпуска, нужно явно указать файлы, которые следует сохранить. Добавьте задачу Copy Files и установите для Contents значение **\*.sppkg (пакет SharePoint, созданный с предыдущей задачей), а для целевой папки — значение $(build.artifactstagingdirectory)/drop.

захват артефактов

Публикация артефактов

После сбора всех файлов, требующихся для развертывания, в специальной папке артефактов, по-прежнему нужно указать Azure DevOps на необходимость сохранения этих файлов после выполнения сборки. Для этого добавьте задачу Publish artifacts и присвойте для Path to publish значение $(build.artifactstagingdirectory)/drop, а для Artifact name — значение drop.

публикация артефактов

Непрерывное развертывание

Непрерывное развертывание (CD) использует проверенные пакеты кодов из процесса сборки в поэтапном развертывании среды или рабочей среде. Разработчики могут отслеживать успешные и неудачные развертывания, а также соотносить проблемы с конкретными версиями пакета.

Чтобы настроить Azure DevOps для непрерывных развертываний с помощью решения SharePoint Framework, необходимо выполнить указанные ниже действия.

  1. Создание определения выпуска
  2. Связывание артефакта сборки
  3. Создание среды
  4. Установка NodeJS
  5. Установка CLI для Microsoft 365
  6. Подключение к каталогу приложений
  7. Добавление пакета решения в каталог приложений
  8. Развертывание приложения
  9. Настройка переменных для среды

Создание определения выпуска

Начните с создания нового определения выпуска с помощью пустого шаблона. Определение выпуска — это процесс, используемый для определения следующих элементов для развертывания:

  • Среда
  • Задачи развертывания
  • Артефакты сборки

создание определения выпуска

Связывание артефакта сборки

Щелкните Add an artifact и выберите определение сборки, созданное ранее. Запишите имя Source Alias, которое вы присвоили, поскольку оно потребуется в последующих задачах.

связывание артефактов

Создание среды

При создании среды непрерывного развертывания можно присвоить имя и выполнить настройку для утверждений подготовки к развертыванию, фильтров артефактов (т. е. развернуть, только если сборка происходит из определенной ветви) и т. д., нажав кнопки рядом с окном среды или непосредственно в названии.

создание среды

Установка NodeJS

Щелкнув 1 job, 0 tasks можно перейти к представлению настройки задач, аналогичному определению сборки. Здесь можно выбрать набор задач, выполняемых только для этой определенной среды. К ним относится установка NodeJS версии 10 или более поздней версии.

Добавьте задачу Node tool installer и задайте значение 10.X в поле Version Spec. Если ваш проект основан на SharePoint Framework версии 1.7.1 или ниже, используйте версию 8.X.

Снимок экрана установщика инструмента Node.js с полями

Установка CLI для Microsoft 365

Общий языковой интерфейс Microsoft 365 (CLI) — это проект с открытым кодом, созданный сообществом Microsoft 365 PnP. Чтобы использовать CLI в определении выпуска, сначала необходимо установить его. После этого можно использовать команды, доступные для управления развертыванием. Добавьте задачу npm, выберите команду Custom и введите install -g @pnp/cli-microsoft365 в поле Command and Arguments.

установка CLI для Microsoft 365

Примечание.

Подробнее о средстве CLI для Microsoft 365

Подключение к SharePoint Online

Перед использованием каталога приложений в среде развертывания необходимо сначала пройти проверку подлинности в каталоге приложений вашего клиента. Чтобы это сделать, добавьте задачу Command Line и вставьте следующую команду в поле scriptm365 login -t password -u $(username) -p $(password).

подключение к каталогу приложений

Примечание.

Если вы используете CLI для Microsoft 365 для подключения к клиенту в первый раз, вам нужно сначала выполнить интерактивный вход с помощью учетной записи. Это необходимо для предоставления доступа приложению командной консоли PnP Office 365, которое используется CLI для Microsoft 365 для доступа к вашему клиенту от имени учетной записи. В противном случае для задачи будет невозможно выполнить вход в неинтерактивном режиме. Подробнее см. в Руководстве пользователя CLI для Microsoft 365.

Примечание.

CLI для Microsoft 365 — это решение с открытым исходным кодом, поддерживаемое активным сообществом. SLA для поддержки инструмента с открытым исходным кодом со стороны Майкрософт отсутствует.

Добавление пакета решения в каталог приложений

Отправьте пакет решения в каталог приложений, добавив еще одну задачу Command Line и вставив указанную ниже командную строку в поле Scriptm365 spo app add -p $(System.DefaultWorkingDirectory)/SpFxDevOps/drop/SharePoint/solution/sp-fx-devops.sppkg --overwrite

Примечание.

Путь пакета зависит от имени решения (см. настройки своего проекта) и Source Alias, определенного ранее. Убедитесь, что они совпадают.

Примечание.

Вы можете отправить решение в каталог приложений семейства веб-сайтов, добавив --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope sitecollection

отправка пакета в каталог

Развертывание приложения

Последним этапом при настройке является развертывание приложения в каталоге приложений, чтобы сделать его доступным в последней версии для всех семейств веб-сайтов в клиенте. Добавьте еще одну задачу Command Line и вставьте указанную ниже командую строку в поле Scriptm365 spo app deploy --name sp-fx-devops.sppkg

Примечание.

Убедитесь, что имя пакета обновлено.

Примечание.

Вы можете развернуть решение из каталога приложений семейства веб-сайтов, добавив --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope sitecollection

Развертывание пакета в каталоге

Настройка переменных для среды

Задачи, настроенные на последнем этапе, зависят от переменных процесса Azure DevOps (легко определяются с помощью синтаксиса $(variableName)). Эти переменные нужно определить перед возможностью запуска определения сборки. Для этого щелкните вкладку Variables. Добавьте следующие переменные

Имя Значение
catalogsite Необязательный параметр. Относительный путь сервера сайта каталога приложений, например sites/appcatalog, при отправке в каталог приложений семейства веб-сайтов
пароль Пароль пользователя с разрешениями администратора в клиенте. Чтобы скрыть его от других пользователей, не забудьте установить значок замка
username Имя пользователя с разрешениями администратора в клиенте
tenant Необязательный параметр. Имя клиента в https://tenant.sharepoint.com, например tenant, при отправке в каталог приложений семейства веб-сайтов

Настройка переменных

Примечание.

Обязательно сохраните определение выпуска.

Тестирование

Чтобы протестировать только что созданный процесс непрерывного развертывания, вернитесь к разделу Builds в Azure DevOps, выберите ваше определение сборки и щелкните Queue. Выберите свою ветвь и щелкните Queue. Будет создана новая сборка и начнется ее выполнение.

Добавление сборки в очередь

Через несколько минут ваша сборка должна завершиться, и отобразится страница результата наподобие этой.

Результаты сборки

При переходе к разделу Release Azure DevOps новый выпуск должен запуститься автоматически. Через несколько минут ваш выпуск должен завершиться, и будет выполнено развертывание решения SharePoint Framework для клиента.

Результаты выпуска

Конвейер DevOps для решения SharePoint Framework в Azure DevOps теперь подготовлен и готов к дальнейшей настройке под ваш сценарий.

См. также