Создайте конвейер сборки непрерывной интеграции (CI) для Angular

Введение

Конвейеры сборки программного обеспечения объединяют непрерывную интеграцию (CI) и непрерывную доставку (CD) для последовательного тестирования, сборки и доставки вашего кода. Это значительно улучшает качество производственного кода и вовлеченность заинтересованных сторон.

В этом руководстве я покажу вам, как настроить конвейер непрерывной интеграции (CI) в Azure DevOps. Конвейер CI создает производственную сборку вашего приложения всякий раз, когда вы отправляете код в удаленный репозиторий Git.

Примечание. Azure DevOps - это бесплатная служба, и ее не следует путать с облачными службами Azure.

Начало работы

Это руководство должно быть исчерпывающим, поэтому мы будем строить его с нуля. Мы создадим приложение Angular, затем отправим его в удаленный репозиторий GitHub и, наконец, настроим конвейер сборки.

Если у вас уже есть приложение на GitHub, не стесняйтесь переходить к разделу, в котором вы создаете только конвейер, то есть создание конвейера сборки в Azure DevOps.

Создайте приложение Angular

Вы можете легко создать приложение Angular с помощью Angular CLI, используя следующую команду.

$ ng new angular-azure-pipeline --defaults

После создания приложения вы можете перейти в его корневой каталог и инициализировать репозиторий git следующим образом:

$ cd ./angular-azure-pipeline && git init

Создайте репозиторий приложений на GitHub

В этом разделе мы создадим соответствующий удаленный репозиторий GitHub для приложения Angular. Не стесняйтесь использовать другие альтернативы GitHub, такие как Azure, Bitbucket и т. Д., Если хотите.

Войдите в свою учетную запись GitHub и нажмите новую кнопку, выделенную красным ниже.

Затем вы можете указать имя для своего удаленного репозитория. Я назову свое angular-azure-pipeline, что согласуется с названием приложения. Наконец, нажмите кнопку «Создать репозиторий».

GitHub создаст репозиторий и предоставит вам некоторую информацию для быстрой настройки. Важное значение имеет имя репозитория git. Что я выделил на рисунке ниже.

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

Сделайте начальную фиксацию

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

git remote add origin https://github.com/Mwiku/angular-azure-pipeline.git

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

Теперь вы можете сделать первоначальную фиксацию и отправить свой код в репозиторий GitHub с помощью следующих трех команд.

git add .
git commit -m “initialize repository”
git push -u origin master

Создание конвейера сборки в Azure DevOps

В этом разделе мы создадим необходимую инфраструктуру для использования с конвейером в Azure DevOps.

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

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

Чтобы создать проект, нажмите кнопку «Новый проект», как показано на рисунке ниже.

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

После создания проекта щелкните ссылку конвейера в левом меню навигации. Затем нажмите кнопку создания конвейера, которая появляется в области основного содержимого.

Azure DevOps предоставляет два основных метода создания новых конвейеров.

1. Классический редактор, представляющий собой вариант графического интерфейса для создания конвейера и

2. Файлы YAML, в которых используется разметка YAML для создания и редактирования конвейера.

Мы будем использовать YAML, потому что он более простой и дает вам много возможностей для настройки.

Поскольку я использовал GitHub в качестве хоста удаленного репозитория, я выберу GitHub, как показано на рисунке ниже.

После того, как мы выберем GitHub, нас попросят выбрать репозиторий по выбору. Репозиторий, который я ищу, выделен красным, поэтому я выбираю его.

После выбора репозитория GitHub вам будет предложено ввести экран входа в вашу учетную запись GitHub. Укажите свои учетные данные для входа.

После аутентификации вы можете нажать кнопку «Утвердить и установить», если ваш репозиторий был выбран.

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

Поскольку наше приложение использует Angular, я выберу вариант, который гласит: Node.js с Angular. Это даст нам очень хороший шаблон конвейера.

На приведенном ниже рисунке показан предварительный просмотр файла конвейера, созданного Azure DevOps на основе выбранной мной конфигурации.

Файл YAML состоит из трех основных разделов.

  1. Триггер - указывает, что приведет к автоматическому запуску конвейера. В данном случае это главная ветка. Всякий раз, когда вы отправляете изменения кода в главную ветвь, конвейер запускается.
  2. Пул - пул указывает операционную систему, которая будет использоваться при запуске конвейера. Этот конвейер использует ubuntu-latest, которым на момент написания этой статьи является Ubuntu 20.04 Focal Fossa LTS.
  3. Шаги - наконец, файл YAML определяет шаги, используемые при создании приложения Angular. Сначала он установит angular CLI, затем восстановит зависимости и, наконец, создаст производственную сборку. Если в будущем вы хотите, чтобы конвейер запускал модульные тесты и выполнял другие задачи, раздел шагов - это место для редактирования.

Чтобы сохранить и запустить файл конвейера, вы можете нажать кнопку «Сохранить и запустить», как выделено выше.

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

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

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

Заключение

В этом руководстве мы создали приложение Angular, затем отправили его на GitHub и, наконец, создали конвейер непрерывной сборки (CI) для приложения с помощью Azure DevOps.

Включение практик DevOps в рабочий процесс разработки программного обеспечения жизненно важно для создания высококачественного программного обеспечения.