Sådan oprettes kontinuerlig integration med Circle CI, EmberJS og GitHub

Hvad er kontinuerlig integration, og hvorfor skal vi gøre det?

Kontinuerlig integration (CI) er processen med at automatisere opbygning og test af kode. Dette sker hver gang et projektmedlem forpligter sig til at ændre versionskontrol.

For eksempel foretager du ændringer i din GitHub-opbevarings kode og skubber denne ændring til mastergrenen. Dette udløser en CI-proces til at opbygge et virtuelt miljø og køre kommandoer. Kommandoerne konfigurerer miljøet, som det ville være på en produktionsserver. Derefter kører de den automatiske testpakke, du skrev for at teste din kode.

CI bruges ofte til at:

  • validere separate filialer, som en udvikler arbejder på. Filialer er velafprøvede, inden de fusioneres i projektets hovedgren.
  • for at validere og implementere de nyeste versioner af et projekt, når filialer bestå validering.

At have kode kontinuerligt integreret i projektet og teste den reducerer:

  • flette konflikter
  • svært at rette fejl
  • divergerende kodestrategier
  • dobbeltarbejde

Det holder mestergrenen ren. Læs mere om kontinuerlig integration her.

Tutorials mål

Dette er dit første skridt i den kontinuerlige integrationsproces. Så lad os holde tingene meget enkle. Vores mål er at oprette et lager på GitHub og køre CI på det arkiv hver gang en ny forpligtelse skubbes. Vi viser også et badge, der angiver status for vores nuværende build.

De værktøjer, vi bruger til denne demo:

  • GitHub
  • CircleCI
  • EmberCLI

Lad os nu komme i gang.

Opret en Github-konto

Hvis du ikke allerede har en, skal du skaffe dig en gratis GitHub-konto.

Gå derefter over til faktureringsindstillingerne og indtast dine betalingsoplysninger. Bare rolig med at blive opkrævet. Vi har 1000 minutter månedligt med gratis byggeminutter med den mulighed, vi vælger (Circle CI). Det er mere end nok til dette demoprojekt.

Opret endelig et nyt lager, der hedder ci-ember-demo . Initialiser det ikke.

Opret en grundlæggende Ember-applikation

Installer Ember CLI

Lad os bruge NPM til at installere Ember CLI. Det inkluderer de værktøjer, vi har brug for til at generere et grundlæggende projekt.

npm install -g ember-cli

Opret et Ember-projekt

Lad os oprette et projekt kaldet ci-ember-demo ved hjælp af 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

Gå nu over til, //localhost:4200og du skal se denne skærm:

Basis Ember-projektet kører som forventet. Du kan lukke serveren med ctrl+C.

Kontroller, at standardtestene er bestået

Lad os nu køre de tests, der blev genereret med projektet i terminalen:

npm test # alternatively ember test

Du skal se en række på seks standardtest køre. Alt skal passere.

Ideen er, at disse og andre tests, du skriver, når du udvikler dit projekt, løbende køres, når du skubber ændringer til arkivet.

Skub dit projekt til Github

Gå over til ci-ember-demo- projektmappen for at redigere README.mdfilen. Udskift hvad der er med noget som:

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

Hent din eksterne URL, og indstil den

Gå tilbage til dit GitHub-lager og tag fat i den eksterne URL, som skal se sådan ud:

[email protected]:username/repo_name.git

Inde i ci-ember-demo- mappen initialiser lageret:

git init

Tilføj derefter den eksterne URL, så Git ved, hvor vi skubber vores filer til:

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

Tid til at skubbe vores kode til 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

Det eksterne Git-lager opdateres med de ændringer, vi har skubbet:

Nu har vi et hovedprojektmappe og et lager. Det er tid til at oprette CI-platformen.

Setup CircleCI - En kontinuerlig integrations- og leveringsplatform

CircleCI vil være vores valgte værktøj til kontinuerlig integration. Det er ligetil, populært og leveres med 1000 gratis månedlige byggeminutter.

Gå over til GitHubs markedsplads og opret en plan.

Vælg den gratis plan.

Gå derefter over til CircleCI, og log ind med din GitHub-konto:

Når du er inde, skal du gå til afsnittet Tilføj projekt . Du får vist en liste over alle dine GitHub-arkiver.

Klik på Setup Project på vores ci-ember-demo .

Vælg derefter Linux som vores operativsystem og node til sprog.

Klik på Start bygning . Projektet vil forsøge at opbygge og gøre hvad kontinuerlige integrationsprocesser gør.

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.

Hvis du ser på arkivet på GitHub, vil du se CircleCI-statusbadge i grønt. Dette indikerer igen, at den seneste build er ved at passere.

Konklusion

Det er det! Når du opretter en ny pullanmodning eller skubber ændringer til master, kører CI nu alle testene. Status for det job vises i CircleCI og badgen på dit arkiv. Videresend eller ikke, du får de rigtige oplysninger, du har brug for for at udvikle dig godt.

Tillykke med at tage dine første skridt til kontinuerlig integration!

Kilder

Hvad er kontinuerlig integration? - Sam Guckenheimer