Hogyan állítsuk be a folyamatos integrációt a Circle CI, az EmberJS és a GitHub szolgáltatással

Mi a folyamatos integráció, és miért kellene ezt megtenni?

A folyamatos integráció (CI) a kód felépítésének és tesztelésének automatizálása. Ez minden alkalommal megtörténik, amikor a projektcsapat tagja változtatásokat hajt végre a verziókezelésben.

Például módosítja a GitHub-adattár kódját, és ezt a változást a főágra tolja. Ez elindítja a CI folyamatot egy virtuális környezet felépítéséhez és a parancsok futtatásához. A parancsok úgy konfigurálják a környezetet, mint amilyen a termelési kiszolgálón lenne. Ezután futtatják az automatikus tesztcsomagot, amelyet a kód teszteléséhez írt.

A CI-t gyakran használják:

  • érvényesítse a különálló ágakat, amelyeken a fejlesztő dolgozik. Az ágakat jól tesztelik, mielőtt beolvadnának a projekt fő ágába.
  • a projekt legújabb verzióinak érvényesítése és telepítése, mivel az ágak átengedik az érvényesítést.

Ha a kódot folyamatosan integrálják a projektbe, és annak tesztelése csökkenti:

  • egyesíti a konfliktusokat
  • nehéz kijavítani a hibákat
  • eltérő kódstratégiák
  • párhuzamos erőfeszítések

Tisztán tartja a főágat. A folyamatos integrációról itt olvashat bővebben.

Bemutató célok

Ez az első lépés a folyamatos integráció folyamatába. Tehát tartsuk nagyon egyszerű a dolgokat. Célunk, hogy hozzunk létre egy adattárat a GitHub-on, és futtassuk a CI-t azon a táron, valahányszor új elkötelezettség lép fel. Megjelenítünk egy kitűzőt is, amely jelzi a jelenlegi összeállításunk állapotát.

A bemutatóhoz használt eszközök:

  • GitHub
  • CircleCI
  • EmberCLI

Most kezdjük.

Github-fiók beállítása

Ha még nem rendelkezik ilyennel, szerezzen be egy ingyenes GitHub-fiókot.

Ezután lépjen a Számlázási beállítások oldalra, és adja meg fizetési adatait. Ne aggódjon a terhelés miatt. Havonta 1000 perc ingyenes építési perc áll rendelkezésünkre, a választott opcióval (CI kör). Ennél több mint elég ehhez a demoprojekthez.

Végül hozzon létre egy új adattárat ci-ember-demo néven . Ne inicializálja.

Hozzon létre egy alapvető Ember alkalmazást

Telepítse az Ember CLI-t

Használjuk az NPM-et az Ember CLI telepítéséhez. Tartalmazza azokat az eszközöket, amelyekre egy alapprojekt előállításához szükségünk van.

npm install -g ember-cli

Hozzon létre egy Ember projektet

Hozzunk létre egy ci-ember-demo nevű projektet az Ember CLI használatával:

# 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

Most menjen át, //localhost:4200és látnia kell ezt a képernyőt:

Az Ember alapprojekt a várakozásoknak megfelelően zajlik. A szerverrel leállíthatjuk ctrl+C.

Ellenőrizze, hogy az alapértelmezett tesztek sikeresek-e

Most a terminálban futtassuk a projekttel létrehozott teszteket:

npm test # alternatively ember test

Látnia kell egy hat alapértelmezett teszt futtatását. Mindennek el kell múlnia.

Az elképzelés az, hogy ezeket és más teszteket, amelyeket a projekt fejlesztése során írsz, folyamatosan futtatod, amikor a lerakat változtatásait hajtod végre.

Tolja a projektjét a Githubhoz

A fájl szerkesztéséhez lépjen a ci-ember-demo projekt mappába README.md. Cserélje le az ott szereplőt valami ilyesmire:

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

Szerezze be a távoli URL-t, és állítsa be

Menjen vissza a GitHub-tárházába, és ragadja meg a távoli URL-t, amelynek így kell kinéznie:

[email protected]:username/repo_name.git

Inicializálja a tárat a ci-ember-demo mappában:

git init

Ezután adja hozzá a távoli URL-t, hogy a Git tudja, hová toljuk a fájljainkat:

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

Ideje átadni a kódunkat a Github-nak:

# 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

A távoli Git adattár frissül az általunk végrehajtott változtatásokkal:

Most van egy fő projektkönyvtárunk és egy tárunk. Itt az ideje a CI platform felállításának.

Setup CircleCI - Folyamatos integrációs és szállítási platform

A CircleCI lesz a választott eszközünk a folyamatos integrációhoz. Egyszerű, népszerű, és 1000 havi ingyenes építési perccel jár.

Menjen át a GitHub piacterére, és állítson össze egy tervet.

Válassza ki az Ingyenes tervet.

Következő lépés a CircleCI-hez, és jelentkezzen be GitHub-fiókjával:

Miután belépett, lépjen a Projekt hozzáadása szakaszra. Megjelenik az összes GitHub-tárháza.

Kattintson a Telepítési projekt elemre a ci-ember-demónkon .

Ezután válassza ki a Linuxot operációs rendszerünknek, és a Node nyelvet.

Kattintson az Építés megkezdése elemre . A projekt megkísérli a folyamatos integrációs folyamatok megépítését és megvalósítását.

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