Kako postaviti kontinuiranu integraciju s Circle CI, EmberJS i GitHub

Programiranje

Što je kontinuirana integracija i zašto bismo to trebali činiti?

Kontinuirana integracija (CI) postupak je automatizacije izrade i ispitivanja koda. To se događa svaki put kad član projektnog tima izvrši promjene u kontroli verzija.

Na primjer, napravite promjene u kodu svog GitHub spremišta i gurnete tu promjenu u glavnu granu. To pokreće CI postupak za izgradnju virtualnog okruženja i pokretanje naredbi. Naredbe konfiguriraju okruženje kao na proizvodnom poslužitelju. Zatim pokreću automatizirani testni paket koji ste napisali za testiranje vašeg koda.

CI se često koristi za:

  • potvrditi odvojene grane na kojima programer radi. Podružnice su dobro ispitane prije nego što se spoje u glavnu granu projekta.
  • za provjeru valjanosti i primjenu najnovijih verzija projekta dok grane prolaze provjeru valjanosti.

Stalno integriranje koda u projekt i testiranje smanjuje:

  • spojiti sukobe
  • teško ispraviti bugove
  • strategije divergentnog koda
  • udvostručeni napori

Održava glavnu granu čistom. Pročitajte više o kontinuiranoj integraciji ovdje.

Ciljevi udžbenika

Ovo je vaš prvi korak u procesu kontinuirane integracije. Pa, neka stvari budu vrlo jednostavne. Cilj nam je stvoriti spremište na GitHubu i pokrenuti CI na tom spremištu svaki put kad se pritisne novi predaj. Također ćemo prikazati značku koja označava status naše trenutne verzije.

Alati koje ćemo koristiti za ovaj demo:

  • GitHub
  • CircleCI
  • EmberCLI

Sad krenimo.

Postavite Github račun

Ako ga već nemate, nabavite si besplatan GitHub račun.

Zatim prijeđite na postavke naplate i unesite podatke o plaćanju. Ne brinite hoće li vam se naplatiti. Imat ćemo 1000 minuta besplatnih minuta izrade mjesečno s opcijom koju odaberemo (Circle CI). To je više nego dovoljno za ovaj demo projekt.

Konačno, stvorite novo spremište pod nazivom ci-ember-demo . Nemojte ga inicijalizirati.

Stvorite osnovnu aplikaciju Ember

Instalirajte Ember CLI

Upotrijebimo NPM za instalaciju Ember CLI. Uključuje alate potrebne za generiranje osnovnog projekta.

npm install -g ember-cli

Stvorite projekt žar

Stvorimo projekt nazvan ci-ember-demo pomoću 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

Sada prijeđite na //localhost:4200i trebali biste vidjeti ovaj zaslon:

Osnovni projekt Ember izvodi se prema očekivanjima. Možete isključiti poslužitelj pomoću ctrl+C.

Provjerite prolaze li zadani testovi

Sada u terminalu pokrenimo testove koji su generirani s projektom:

npm test # alternatively ember test

Trebali biste vidjeti seriju od šest zadanih testova. Sve bi trebalo proći.

Ideja je da se ovi i drugi testovi koje napišete tijekom razvoja projekta kontinuirano izvode dok pritiskate promjene na spremište.

Gurnite svoj projekt na Github

Idite u mapu projekta ci-ember-demo da biste uredili README.mddatoteku. Zamijenite ono što je tamo nečim poput:

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

Nabavite svoj udaljeni URL i postavite ga

Vratite se na svoje GitHub spremište i uhvatite udaljeni URL koji bi trebao izgledati ovako:

[email protected]:username/repo_name.git

Unutar mape ci-ember-demo inicijalizirajte spremište:

git init

Zatim dodajte udaljeni URL kako bi Git znao kamo guramo svoje datoteke:

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

Vrijeme je da naš kod gurnemo u 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

Udaljeno spremište Git ažurira se promjenama koje smo progurali:

Sada imamo glavni direktorij projekta i spremište. Vrijeme je za postavljanje CI platforme.

Postavljanje CircleCI - kontinuirana platforma za integraciju i isporuku

CircleCI će biti naš odabrani alat za kontinuiranu integraciju. Jednostavan je, popularan i dolazi s 1000 besplatnih minuta izrade mjesečno.

Krenite na GitHubovu tržnicu i napravite plan.

Odaberite besplatni plan.

Sljedeće idite na CircleCI i prijavite se sa svojim GitHub računom:

Kada uđete, idite na odjeljak Dodaj projekt . Vidjet ćete popis svih svojih GitHub spremišta.

Na našem ci-ember-demou kliknite Projekt postavljanja .

Zatim odaberite Linux kao naš operativni sustav i Node za jezik.

Kliknite Start Building . Projekt će pokušati izgraditi i učiniti ono što rade kontinuirani integracijski procesi.

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