Як налаштувати безперервну інтеграцію з Circle CI, EmberJS та GitHub

Що таке безперервна інтеграція і чому ми повинні це робити?

Безперервна інтеграція - це процес автоматизації побудови та тестування коду. Це трапляється кожного разу, коли член команди проекту вносить зміни до контролю версій.

Наприклад, ви вносите зміни до коду вашого сховища GitHub і надсилаєте ці зміни у головну гілку. Це запускає процес CI для побудови віртуального середовища та запуску команд. Команди налаштовують середовище так, як це було б на виробничому сервері. Потім вони запускають автоматизований набір тестів, який ви написали для тестування коду.

CI часто використовується для:

  • перевірити окремі гілки, над якими працює розробник. Філії добре перевірені перед тим, як об’єднати їх в основну галузь проекту.
  • перевірити та розгорнути останні версії проекту, коли гілки проходять перевірку.

Завдяки постійному інтегруванню коду в проект та тестуванню він зменшує:

  • конфлікти злиття
  • важко виправити помилки
  • стратегії розбіжності коду
  • дубльовані зусилля

Це утримує головну гілку в чистоті. Детальніше про безперервну інтеграцію читайте тут.

Цілі підручника

Це ваш перший крок у процесі безперервної інтеграції. Отже, давайте все буде дуже просто. Наша мета - створити сховище на GitHub і запустити CI на цьому сховищі кожного разу, коли натискається новий коміт. Ми також покажемо значок, який вказує статус нашої поточної збірки.

Інструменти, які ми використаємо для цієї демонстрації:

  • GitHub
  • CircleCI
  • EmberCLI

Тепер давайте почнемо.

Налаштування облікового запису Github

Якщо у вас його ще немає, заведіть собі безкоштовний обліковий запис GitHub.

Далі перейдіть до налаштувань оплати та введіть свою платіжну інформацію. Не хвилюйтеся про те, щоб отримати плату. Ми матимемо 1000 хвилин щомісяця безкоштовних хвилин складання з вибраним варіантом (Circle CI). Цього більш ніж достатньо для цього демонстраційного проекту.

Нарешті, створіть нове сховище під назвою ci-ember-demo . Не ініціалізуйте його.

Створіть базову програму Ember

Встановіть Ember CLI

Давайте використаємо NPM для встановлення Ember CLI. Він включає інструменти, необхідні для створення базового проекту.

npm install -g ember-cli

Створіть проект Ember

Давайте створимо проект під назвою ci-ember-demo за допомогою Ember CLI:

# cd into the desktop cd ~/desktop/ # create a new project ember new ci-ember-demo # cd into the directory cd ci-ember-demo # run the server ember s

Тепер перейдіть до, //localhost:4200і ви побачите цей екран:

Базовий проект Ember працює належним чином. Ви можете вимкнути сервер за допомогою ctrl+C.

Переконайтесь, що тести за замовчуванням проходять

Тепер у терміналі запустімо тести, які були створені разом з проектом:

npm test # alternatively ember test

Ви побачите серію із шести запущених тестів. Все повинно пройти.

Ідея полягає в тому, що ці та інші тести, які ви пишете під час розробки проекту, будуть постійно виконуватися під час надсилання змін до сховища.

Надішліть свій проект на Github

Зайдемо до СI-вугіллячко-демонстраційної папці проекту , щоб відредагувати README.mdфайл. Замініть те, що є, чимось на зразок:

## ci-ember-demo
This is a basic Ember CI demo application. Check out the tutorial: 'First Step into Continuous Integration with Circle CI'.

Отримайте віддалену URL-адресу та встановіть її

Поверніться до свого сховища GitHub і візьміть віддалену URL-адресу, яка повинна виглядати так:

[email protected]:username/repo_name.git

Усередині папки ci-ember-demo ініціалізуйте сховище:

git init

Потім додайте віддалену URL-адресу, щоб Git знав, куди ми надсилаємо наші файли:

git remote add origin [email protected]:username/repo_name.git # check that it's been set, should display the updated origin git remote -v

Час надсилати наш код до Github:

# add all changes git add . # create a commit with a message git commit -m "[INIT] Project" # push changes to the repo's master branch git push origin master

Віддалене сховище Git оновлюється із внесеними нами змінами:

Тепер у нас є основний каталог проекту та сховище. Настав час налаштувати платформу CI.

Налаштування CircleCI - безперервна платформа інтеграції та доставки

CircleCI буде нашим інструментом вибору для безперервної інтеграції. Це просто, популярно і пропонує 1000 безкоштовних щомісячних хвилин побудови.

Зайдіть на ринок GitHub і складіть план.

Виберіть безкоштовний план.

Далі перейдіть до CircleCI і увійдіть за допомогою свого облікового запису GitHub:

Зайшовши, перейдіть до розділу Додати проект . Ви побачите список усіх ваших сховищ GitHub.

Натисніть Проект налаштування на нашому демонстраційному сайті ci-ember .

Потім виберіть Linux як нашу операційну систему та Node для мови.

Натисніть Почати будівництво . Проект намагатиметься будувати і робити те, що роблять процеси безперервної інтеграції.

Since we have no configuration settings the process will almost immediately fail.

Head over to the Builds tab that lists any Jobs that ran, you should see that failure like so:

This is what we expected. Nothing really works because the CI process isn’t configured.

Configure CI in the Ember Project

Get the markdown to display our project’s CI status

CircleCI provides embeddable status badges. They display the status of your latest build. Before we go let’s get the markdown for a status badge.

Go to Settings → Projects → ember-ci-demo’s settings → Status Badges.

Copy the embed code in Markdown.

In the ci-ember-demo's README.md file, paste the embed code under the title. It will look something like this:

## ci-ember-demo [![CircleCI](//circleci.com/gh/username/ci-ember-demo.svg?style=svg)](//circleci.com/gh/username/ci-ember-demo) ...

Add the CI configuration

In the root of ember-ci-demo create a folder named .circleci and create a file called config.yml. This is where all of our configuration settings will go. Add the following:

version: 2 jobs: build: docker: - image: circleci/node:7.10-browsers environment: CHROME_BIN: "/usr/bin/google-chrome" steps: - checkout - run: npm install - run: npm test

Let’s stop and take a look at what’s happening here.

# set the version of CircleCI to use. # we'll use the latest version. version: 2

Next, we’ll set up jobs to run when the CI is triggered.

jobs: # tell CI to create a virtual node environment with Docker # specify the virtual image to use # the -browsers suffix tells it to have browsers pre-installed build: docker: - image: circleci/node:7.10-browsers # use Google Chrome to run our tests environment: CHROME_BIN: "/usr/bin/google-chrome"

Finally, let’s tell it what to do once the environment is setup:

steps: - checkout # install the required npm packages - run: npm install # run the test suite - run: npm test

Push the changes to the master branch.

Review your changes and push them up to the master branch of the repository.

Now, head back to CircleCI and check out the Jobs tab. You’ll now see a passing build. It was able to take the settings from config.yml, set up the correct virtual environments, and run our tests just as we did locally when we first generated the project.

If you look at the repository on GitHub, you’ll see the CircleCI status badge in green. This indicates again that the latest build is passing.

Conclusion

That’s it! Now whenever you create a new pull request or push any changes to master, the CI will run all the tests. The status of that job will be displayed in CircleCI and the badge on your repository. Pass or fail, you get the right information you need to develop well.

Congratulations on taking your first steps into Continuous Integration!

Sources

What is Continuous Integration? — Sam Guckenheimer