В этом блоге я хотел бы рассказать, как я настроил CI с проектом angular, который создается с помощью Angular CLI.
Ниже приведены шаги, которые я выполнил для настройки непрерывной интеграции.
- Установите Angular CLI
Перед установкой Angular CLI нам нужно установить nodejs в систему.
Установите Nodejs: https://nodejs.org/en/
Установите Angular CLI и создайте проект:
Он откроет браузер и запустит приложение angular на порту 4200. По умолчанию порт для проекта angular - 4200. Вы можете изменить его, указав с помощью команды ng server.
Теперь наш угловой проект готов. мы должны установить Jenkins для процесса CI.
2. Установите Jenkins
Установите Jenkins: https://jenkins.io/doc/pipeline/tour/getting-started/
Если вы еще не установили Jenkins в своей системе, он попросит создать учетную запись пользователя. По умолчанию Jenkins работает на порту 8080.
3. Установите PhantomJS
Angular CLI создает проект angular, который запускает наборы тестов с использованием karma, который использует браузер Google для отображения результатов теста.
Но для непрерывной интеграции нам понадобится какой-нибудь безголовый браузер для запуска наборов тестов в Jenkins.
Итак, я использую phantomjs, чтобы получить возможности безголового браузера. Мы также можем использовать другой.
Давайте установим PhantomJS:
npm install - save-dev phantomjs-prebuilt karma-phantomjs-launcher
Он установит karma-phantomjs-launcher в ваш угловой проект.
Теперь нам нужно настроить PhantomJS. Итак, нам нужно настроить некоторые параметры в karma.conf.js.
Ниже приведены изменения, которые необходимо обновить в файле karma.conf.js.
Я упомянул все изменения, которые внес в комментарии.
Кроме того, мы должны включить некоторые полифиллы, которые необходимы PhantomJS, иначе он не запустит тестовые костюмы.
Ниже приведены файлы, которые нам нужно импортировать в src / polyfills.ts.
Просто замените файл polyfills.ts приведенным выше кодом.
4. Давайте настроим Jenkins для настройки непрерывной интеграции:
Пришло время настроить CI в Jenkins.
- Сначала создайте один репозиторий git в своем проекте и разместите его на Gitlab, Bitbucket или Github и получите URL-адрес репозитория.
2. Теперь создайте фристайл-проект в Jenkins. Здесь я провожу тест по названию проекта, вы можете дать ему любое имя.
3. В Source Code Management настройте репозиторий, который вы создали только что. Поэтому всякий раз, когда вы вносите какие-либо изменения в свою ветку, она запускает задачу Jenkins, которую вы настраиваете в Jenkins Build. Также вы можете установить триггер сборки в соответствии с вашими требованиями.
4. Наконец, мы просто запускаем тестовые костюмы с помощью ng test: ng test - single-run true
Теперь настроена непрерывная интеграция, поэтому всякий раз, когда вы вносите какие-то изменения в репозиторий, Jenkins запускает тестовые костюмы и выдает результат в консоли Jenkins.
Мы можем настроить действия Post build в Jenkins, чтобы уведомлять пользователя о результатах теста.
Вот и все, что касается настройки непрерывной интеграции для angular проекта.
Надеюсь, вы захотите прочитать блог и настроить CI для проекта Angular с помощью Angular CLI + Jenkins + PhantomJS.
